프로젝트에 github actions를 통해 CI/CD를 적용해보았다

먼저 CI/CD란 무엇인가?


CI (continuos integration)

 - 지속적인 통합. 새로운 커밋이 추가될 때 이를 기존코드와 병합하는 작업을 의미한다.

CD (continuos delivery / deployment)

- 지속적인 제공 혹은 지속적인 배포. 병합된 코드를 공유 레포지토리를 넘어 실제 운영 서버에 배포하는 것을 말한다.


작업한 소스 코드를 빌드하고, 저장소에 전달 후 배포까지 하는 과정을 통상적으로 CI/CD라고 부른다.

 

 

CI/CD를 적용하면 다음과 같은 장점이 있다

  • 통합 및 배포를 위한 작업 시간 효율성 증대
  • 소스코드 충돌방지
  • 소프트웨어 버전문제로인한 커뮤니케이션문제 예방

대표적인 툴로는 Jenkins, github actions, Travis 등이 있다.

 

 

github actions

 - github에서 제공하는 CI/CD도구로 배포 뿐만 아니라 다양한 작업들을 자동화 할 수있다.

 

우리의 프로젝트의 백엔드 개발시 workflow를 보면 기능을 개발할 때는 feature/기능 브랜치를 추가하여 개발하고

테스트가 어느정도 끝나면 feature -> develop 브랜치로 소스를 통합한다.

실제 서버에 배포할 때는 develop -> main 브랜치로 올려서 해당 소스를 배포한다.

 

따라서 우리는 develop 브랜치와 main브랜치에 push 명령이 수행될때 배포를 자동화 해주면 좋을 것같다!

(제대로 하려면 develop서버와 main서버를 따로 구성해 각각 배포해야 하지만 일단 여기서는 하나의 서버로 모두 배포하자)

 

 

작업 순서는 간단하다.

- 가장 먼저 CI/CD를 적용할 레포지토리에 .github/workflows/deploy.yml 파일을 생성한다.

- 해당 파일에 다음과 같은 옵션을 사용하여 파일을 작성해준다.

 

 

yml 파일 작성법

on, push

workflow가 실행되는 조건을 의미한다.

 

main, develop 브랜치에 push가 되면 해당 workflow가 수행된다.

# main, develop 브랜치에 push시 동작한다
on:
  push:
    branches: [main, develop]

 

jobs

실제 단계별로 수행할 작업들을 의미한다.

 

build라는 job을 생성하고, 그 아래에 2개의 step이 존재하는 구조이다.
runs-on은 어떤 OS에서 실행될지를 의미한다.
steps의 uses는 어떤 액션을 사용할지 지정한다. 이미 만들어진 액션을 사용할 때 지정한다.

백엔드와 프론트엔드 리포지토리를 체크아웃 한다. with명령으로 원격지 레포지토리에 접근가능하게 해준다.

jobs:
  build:
    # 해당 동작들을 돌릴 OS
    runs-on: ubuntu-latest
    steps:
      # 실제 main branch에 push하면 동작할 내용들

      # dependencies 설치 
      # java 설치
      - uses: actions/setup-java@v2
        with:
          distribution: 'temurin'
          java-version: '11'

      # node 설치
      - uses: actions/setup-node@v2
        with:
          node-version: '14'

      # checkout 하기
      # backend
      - name: checkout backend
        uses: actions/checkout@v2

      # frontend
      - name: checkout frontend
        uses: actions/checkout@v2
        with:
          repository: ssso-pro1/tennis-together-fe
          path: ./frontend

 

run

run 옵션으로 build.sh라는 쉘파일을 실행시켜준다.


build.sh 파일은 npm 설치와 build를 실행하고 체크아웃받은 프론트엔드 소스를 백엔드로 복사해주는 역할을 한다.

      # backend 폴더에 frontend 프로젝트 설치
      # build 하기
      - name: build frontend to resources
        run: |
          sh build.sh
#! build.sh 파일 소스
#!/bin/sh
cd frontend
npm install
npm run build
cd ..
cp -r frontend/build/* src/main/resources/static/

 

배포

      # heroku에 배포하기
      - name: deploy to heroku
        uses: {서버명}
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "tennis-togeter" #
          heroku_email: "{이메일}"

heroku서버에 배포한다. heroku_api_key는 설정에서 따로 세팅해줘야한다.(리포지토리 소유자만 가능!)

 

 

 

다음과 같이 github에서 actions탭을 통해 수행된 빌드 과정과 결과를 확인할 수 있다.

 

deploy.yml 전체 소스코드

name: deploy

# main, develop 브랜치에 push시 동작한다
on:
  push:
    branches: [main, develop]

jobs:
  build:
    # 해당 동작들을 돌릴 OS
    runs-on: ubuntu-latest
    steps:
      # 실제 main branch에 push하면 동작할 내용들

      # dependencies 설치 
      # java 설치
      - uses: actions/setup-java@v2
        with:
          distribution: 'temurin'
          java-version: '11'

      # node 설치
      - uses: actions/setup-node@v2
        with:
          node-version: '14'


      # checkout 하기
      # backend
      - name: checkout backend
        uses: actions/checkout@v2

      # frontend
      - name: checkout frontend
        uses: actions/checkout@v2
        with:
          repository: ssso-pro1/tennis-together-fe
          path: ./frontend


      # backend 폴더에 frontend 프로젝트 설치
      # build 하기
      - name: build frontend to resources
        run: |
          sh build.sh


      # heroku에 배포하기
      - name: deploy to heroku
        uses: {서버명}
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "tennis-togeter" #
          heroku_email: "{이메일}"

프로젝트 소개

프로젝트명 : 테니스 투게더
프로젝트 기간 : 2021.10.12 ~ 2021.11.30
주요 기능

  • 로그인, 회원가입(구글 Oauth 인증, Spring Security 기반 )
  • 테니스장 조회 (kakao지도 api)
  • 경기 모집글 및 댓글 CRUD
  • 모집글 수락 및 거절
  • 친구 등록
  • 게임 한 유저 리뷰 작성
  • 유저 프로필 수정

기술 스택

  • frontend : react, javaScript, html/css
  • backend : java, spring boot, JPA, spring security
  • Database : postgreSQL
  • CI/CD : github actions, heroku
  • etc : firebase storage, firebase oAuth

 

 

카우치 코딩이라는 곳에서 멘토님들의 도움을 받아 다른 개발자분들 함께 6주간 프로젝트를 하나 시작하게되었다!!

프로젝트의 주제는 이름은 "테니스 투게더" 쉽게 말해 테니스를 함께 할 친구를 찾는 사이트이다.

팀원은 프론트 2명 / 백엔드 3명 총 5명이다. 여기서 나는 백엔드 개발 파트를 맡았다.

Java/spring 프로젝트를 거의 3년만에 처음 해보는 것이다 보니 기억도 가물가물하고..

한번도 안써본 기술들도 많아서 해야될 것들이 너무 많다.

직장을 다니면서 병행하려면 정말 부지런히 해야할 것 같다!! 화이팅!!!

 

기능명세서

처음엔 채팅도 있고, 지도로 테니스장 조회하는 것도 있고, Oauth 로그인도 여러개, 친구 신청 및 거절 등등..

수많은 기능들이 있었지만 회의를 할수록 기능을 단순화하고 핵심로직에 집중하려고 했다.

멘토님이 피드백을 통해 기획에서 불필요한 부분을 많이 다듬어 주셔서 기획을 마무리 하는데 많은 도움이 되었다

https://www.notion.so/5856162f5b9e494f8b874d5cc23847bc

 

기능명세서

남은 작업

www.notion.so

 

 

API

테이블의 PK를 복합키로 설정한 부분은 api 설계할 때도 두 개의 key 를 www.xx.com/keyA/keyB 와 같이 보내는 방식으로 설계를 했었는데, 그렇게 하면 URI가 복잡해지고 의미를 식별하기도 어렵다는 피드백을 받았다.

복합키 대신 의미가 없는 대체키를 테이블에 만들어서 그것을 PK로 API설계를 변경하였다.

나중에 JPA Entity 매핑을 하면서 더 느낀 거지만 테이블에 pk를 복합키로 사용하면 뭔가 더 생각해야할게 많아진다..

꼭 필요한 경우가 아니면 사용하지 않는 편이 좋겠다

HTTP 정리

 

https://www.notion.so/API-8817ad4aae54409cbce3f1a89452f2d3

 

API

A new tool for teams & individuals that blends everyday work apps into one.

www.notion.so

 

 

 

ERD

ERD작성은 ERD 클라우드 라는 무료 ERD도구를 사용하였다.

항상 쿼리를 기반으로 데이터를 관리하고 작업을 하고 테이블 조인을 하는 것에 익숙해져 있었고 내가 지금 일하면서 주로 쓰는 방식대로 ERD를 설계 하였는데, JPA를 사용하며 객체와 테이블의 관계를 매핑하다 보니 매끄럽지 못한 부분들이 많았다.

이 부분은 앞으로 공부가 좀 더 필요할 것 같다.

https://www.notion.so/ERD-485b1bf4cd464f2884e3518fff6d1f06

 

ERD

1차 작성

www.notion.so

 

+ Recent posts