Heroku와 Git Actions를 활용한 프로젝트 CICD 셋업기

CI/CD 를 하는 이유가 뭘까?  

우선 CI/CD는 Continuous Integration / Continuous Delivery 의 약자다. 

 

예전에는 통합/배포를 하는 날을 따로 잡아서 실행을 했다. 그러다보니 예상치 못한 버그와 문제가 많아 비효율적이었다고 한다. 이 문제를 해결하기 위해서, 통합/배포 과정을 코드로 자동화하해서, 주기적으로 통합/배포를 가능하게 만든 것이 CI/CD 개념이다. 

 

CI/CD에서 주로 하는 작업은 유닛테스트, 통합테스트, 코드 정적분석, 빌드, 테스트 서버 배포, 실서버 배포 등이 있다.

 

Github Actions 활용해서 CI/CD 적용해보기. 

Github Actions란? Github에 내장된 CI/CD 툴.

 

장점 

-Github 에 내장되어 있기 때문에, github과의 통합이 쉽다. 

-ci/cd 가 내장되어 있어서 따로 ci/cd 서버를 구축할 필요가 없다. 

-일정 수준까지 가격이 무료다 . 

 

1단계. Heroku 셋업

 

(1) Heroku 회원가입과 설치

https://dashboard.heroku.com/

 

Heroku windows 를 설치하고 command line을 켠다. 

엔터키를 누르면 로그인 창이 뜸

 

아래 명령어를 넣어야 로그아웃이 된다. 

Heroku logout

 

(2) Heroku App을 생성해준다. 

 

(3) github actions에서 heroku에 접근하려면 접근하려면 AccessKey가 필요합니다.

Github Actions를 돌릴 backend repository의 Account Settings -> account 하단에 API Key를 reveal 후 복사해오자.

 

2단계: yaml 파일 작성 

YAML 파일은, Github Actions는 Push 와 Pull Request 같은 Git Action 에 따라 스크립트를 동작하게 할 수 있다.

파일은 블로그를 참고해 아래와 같이 구성했다. 

 

1. 프로젝트 Checkout하기
2. 프로그래밍 언어 설치하기
3. Build Script 작성하기
4. Heroku 배포하기

 

 

아래 yaml 파일을 지정해둔 브랜치 (main)에 push 하면 Git Actions가 돌아가야한다. 그런데 실패가 뜬다.

그럴 때는 BUILD를 눌러서 메시지를 뜯어보면 된다.  

 

#github actions
name: deploy

#On: yaml 실행 조건  - main 브랜치에 push 가 동작되면 실행된다 (pull_request merge 시 추가됨)
on:
  push:
    branches: [main]


jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-java@v2
          with:
            distribution: 'temurin'
            java-version: '11'
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      #실제 main branch에 push 하면 동작할 내용들
      - name: checkout backend
        uses: actions/checkout@v2
      #frontend 폴더에 frontend 프로젝트 설치
      - name: checkout frontend
        uses: actions/checkout@v2
        with:
          repository: Couch-Coders/6th-music-fe
          path: ./
      - name: build frontend to resources
        run: sh build.sh
      - name: deploy to heroku
        uses: akhileshns/heroku-deploy@v3.12.12 # This is the action
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "git-actions-codingyo"
          heroku_email: "jkdev1324@gmail.com"

sh build.sh  가 안되서 코드를 제거했다. 

#github actions
name: deploy


#On: yaml 실행 조건  - main 브랜치에 push 가 동작되면 실행된다 (pull_request merge 시 추가됨)
on:
  push:
    branches: [main]


jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-java@v2
        with:
          distribution: 'temurin'
          java-version: '11'
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: checkout backend
        uses: actions/checkout@v2
      - name: checkout frontend
        uses: actions/checkout@v2
        with:
          repository: Couch-Coders/6th-music-fe
          path: ./
      - name: deploy to heroku
        uses: akhileshns/heroku-deploy@v3.12.12 # This is the action
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "git-actions-codingyo"
          heroku_email: "jkdev1324@gmail.com"

Heroku에서 Open App 을 하면 Front Repo의 helloworld 코드가 잘 가져와진다. 

 

 

3단계: Front Repo 에도 셋업하기 (진행중) 

 

frontend 업데이트시에도 배포를 하고 싶으면 frontend에도 추가해야한다. 혹시나 해서 프론트 레포에 test 중입니다 코드를 추가했는데, app에 자동 배포 되지 않는다.

 

위의 코드는 백엔드의 repo의 main 브랜치 업데이트시에만 배포되기 때문에 프론트엔드 프로젝트가 업데이트 될때는 배포가 되지 않는 것이 당연할 것이다(backend-git actions가 실행되지 않기 때문에). github workflows에서 rerun all jobs를 하고 나서야, heroku에 아래와 같이 반영된다. 일일이 rerun을 해주면 번거로우니, 프론트 자동 배포도 구성해보자. 

 

 

Frontend에도 셋업 해보기 

 

기존 Backend 배포를 크게 변경하지 않고 시도해보았다. 

Build 에러가 뜬다. 에러 메시지 상단에 아래 내용이 있어서 이후에는 node와 java 설정을 뺴보았다. 

 

ERROR: Application not supported by 'heroku/nodejs' buildpack remote: ! remote: ! The 'heroku/nodejs' buildpack is set on this application, but was remote: ! unable to detect a Node.js codebase. 

 

빼도 에러 내용은 같고, 오히려 이 코드가 이미 백엔드 repo에 배포되어 있다는 에러가 추가되었다 (왼쪽 주황색)

 

 

 

remote: ! ## Warning - The same version of this code has already been built: [commit ID] remote: ! remote: ! We have detected that you have triggered a build from source code with version  [commit ID] remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.

 

혹시나 Path가 ./로 두 repo에서 겹쳐서 그런걸까? frontend할 떄는 ./backend하니까 초록불이 뜬다. backend 할 때는 frontRepo 따로 path 지정해주는 부분에 ./frontend하면 에러나서 그냥 ./처리를 해줬는데. 아마도 path가 겹쳤던 게 메인 오류였던 것 같다. 참고로 Java/node.js 설정은 배포와는 무관하다. (없어도 돌아가고 있어도 잘 돌아간다. )

 

지금은 프론트에 변경사항 push 되면 git action 자동으로 돌아가고 -> Heroku 앱 화면에도 잘 업데이트 되는 것을 확인하였다. (++ backend 와 같은 버전으로 업데이트 되지 않아서 이 부분은 다시 수정할 예정!) 

 

4단계: Heroku와 Postgres 연결해주기 

addOn에 HerokuPostgres 무료 버전 HobbyDev 를 연결해주면 

Postgres 도 쉽게 연결이 가능하다.

다음 창에 DB Credentials 가 나오는데, username, password 등을 Secrets -Actions 에 넣어주고 application.yaml 파일을 메인에 푸시하면 된다.

 

참고

 

*yml 파일의 구조를 뜯어보자. 

 

on: 

이벤트를 감지해서 워크 플로우를 실행. 

 

jobs: 

하나의 인스턴스에서 여러 스텝(컴파일, 테스트, 빌드, 배포 등) 을 그룹화시켜 실행하는 역할. 병렬로 실행된다. 

runs-on: Github Action 스크립트가 작동할 OS 환경. 

 

checkout@v2는 우선 기존checkout 플러그인에서 업그레이드 된 것 같다.

actions/checkout@v2 는 해당 Action을 돌리는 Github를 Checkout한다.

다른 repository 를 체크아웃 할 떄는 with 아래에 branch를 추가해서  명시한다. 

 

This action checks-out your repository under $GITHUB_WORKSPACE, so your workflow can access it.

설명에 보면 commit 이 fetch 된다는 말이 나오는데, git pull 과 fetch 의 차이가 헷갈려서.. 찾아보았다.  

git pull: 원격 저장소의 최신 내용을 로컬 저장소로 가져오면서 병합함. git push 와 반대됨.

git fetch: 로컬과 원격의 변경 사항이 다를 때, 이를 비교 대조하고 git merge 명령어와 함꼐 최신 데이터를 반영하거나 충돌 문제를 해결함. fetch 는 자동 병합 (Merge를 안해줘서 확인 후 Merge해야함..) 

 

참고 자료 

CI/CD란 무엇일까 (feat. gitflow 정책 연계) (velog.io)

CI/CD란 무엇일까 (feat. gitflow 정책 연계)

GitHub Action을 통한 Build 자동화 (SpringBoot + Maven) (tistory.com)

GitHub Action을 통한 Build 자동화 (SpringBoot + Maven)