Develop/CICD

[Google Cloud Platform] Next.js App Engine 자동배포하기 (feat. Cloud Build)

3.dev 2023. 8. 17. 18:03
반응형

지난 번 매우 힘들었던 배포 환경변수설정을 해결하고 CICD를 완성하기 위해
CD = Continuous Delivery (or Deploy)를 시도해 본다.
 
예외적으로 AWS가 아닌 Google Cloud Platform (이하 GCP) AppEngine(이하 GAE)를 사용하기에
다른 배포과정과는 다를 수 있다.
 
혹시 수동으로 배포를 해보지 않았거나 App Engine 서비스를 만들지 않았다면 먼저 선행해야하고

 

[해결] Next.js GCP AppEngine 배포 환경변수 분기

Next.js 프로젝트를 완료한 후 배포환경을 설정하던 도중 예상치 못한 난관에 마주했다. Google Cloud Platform의 App Engine을 사용해 배포하는데 문제는 project-dev서비스와 project-prd서비스로 나누어 각각

3pdev.tistory.com

위 글에서 환경변수 분기배포 방법이나 기존 작성자의 디렉토리구조, 명령어를 보고싶다면 참고하도록 하자.
 
GCP에 접속하면 아주 친절하게도 CI/CD메뉴가 제공된다.

 

GCP 콘솔 메뉴

 

가장 먼저 설정을 해주어야하는데

Cloud Build에 설정메뉴로 접속해서 두가지는 사용설정으로 바꿔주자

  • App Engine 관리자

  • 서비스 계정 사용자


GCP 콘솔메뉴에서 보이는 Cloud Build를 찾고 트리거메뉴로 접속해보자.
기존 트리거가 있다면 보일 것이고 아마 처음인 분들이 대다수일 테니 상단에 "+트리거 만들기"를 눌러 시작해보자.
 

트리거 만들기 항목

 

  • 이름은 트리거이름이니 편하게 설정

  • 리전은 지역인데 전역으로 설정했다.

  • 설명 또한 원하는 대로 작성

  • 아래쪽에 보이는 저장소를 눌러 "새 저장소 연결"

  • 아래 사진처럼 나오면 Github 기본값으로 "계속"

 

  • 인증은 Github 로그인 웹이 자동 팝업될텐데 허용해주면 된다.

  • 작업하던 레포지토리를 선택 후 약관동의, 계속!


저장소가 정상적으로 연결되었다면 다음사진과 같이 브랜치를 탐색해준다.

main 또는 develop에 연결하는 경우가 대부분이고

나는 development 브랜치와 연결할 것이기 때문에 다음과 같이 했다.

 

자 이제부터가 중요한데

바로 자동배포를 실질적으로 동작해주는 코드를 입력해야한다.

 

  • 유형은 위 사진처럼 Cloud Build 기본값으로 설정

  • 위치는 인라인 YAML 작성으로 선택 후 "편집기 열기"로 진입한다.

 

  • 진입했다면 위와 같이 구성을 수정할 수 있다.

  • 작성 예시를 보면서 같이 작성해보자.

steps:
  - name: 'node:$_NODE_VERSION'
    args:
      - install
    dir: resource
    entrypoint: npm
  - name: 'node:$_NODE_VERSION'
    env:
      - NEXT_PUBLIC_API_URL=$_API_URL
    args:
      - run
      - 'build:dev'
    dir: resource
    entrypoint: npm
  - name: gcr.io/google.com/cloudsdktool/cloud-sdk
    args:
      - '-c'
      - >-
        gcloud config set app/cloud_build_timeout 1600 && gcloud app deploy
        --project='project-dev' -q --appyaml=app_dev.yaml
    dir: .
    entrypoint: bash
timeout: 1600s
options:
  machineType: E2_HIGHCPU_8

 

  • steps : 말그대로 순차적인 코드진행이라는 것을 의미한다.

  • name : 순차 진행 code title (명령어 실행환경)

  • args : 실행 명령어

  • dir : 명령어를 실행할 디렉토리 위치

  • entrypoint : 해당 명령어의 실행도구, 툴 등을 의미한다.
  • env : 환경변수 설정 ("$" 달러표시를 붙여 환경변수를 불러온다)

위 내용은 설명을 위한 예시이고 당연히 개발중인 각자의 디렉토리, 명령어에 맞추어 작성하면 된다.
명령어는 기존에 로컬 VSCode나 커멘드에서 입력했던 명령어들과 비슷한 형식이다.
개인적으로 내가 작성한 package.json을 보면서 작성했다.
 
순서대로 트리거가 작동되면 다음과 같은 행동을 한다.

  1. npm install (/resource 디렉토리)
  2. npm build:dev (/resource 디렉토리)
  3. gcloud deploy 명령어 실행 (최상단 디렉토리)

이전 배포글을 보신분들께서는 아시겠지만 귀찮은 작업을 이제는 연결해둔 github에 push하면 자동으로 진행된다.
이제 대체변수(환경변수)를 설정하자

 

 

이처럼 환경변수는 "$"이 달러를 제외하고 작성해주면 된다.
 
드디어 가장 아래에 있는 만들기를 클릭하고 트리거 리스트에서 내가 만든 트리거가 존재하는지 확인한다.

 

 

자 그럼 우측 실행을 눌러 배포가 정상적으로 되는지 확인해야한다.
좌측 메뉴에서 기록을 누른 뒤 상태에 진행중표시가 잘 떳는지 확인하고 기다려보자
길면 5분정도 걸리는 것 같다. (너무 짧게 끝나면 실패한 것이니 오히려 좋아 하며 기다리자)

 

 

자 심심하다면 보이는 빌드 코드를 눌러 요약, 그리고 로그를 지켜봐도 좋다.
에러가 발생하면 이곳에서 확인해 수정해야하니 미리 익숙해지자

 

진행중
성공

 

그럼 이제 기존 수동배포하던 AppEngine 메뉴로 가서 잘 작동하는지 확인하면 끝이다!
 
앞으로는 develop에 push하면 트리거가 작동되고
이제 마저 main 트리거도 추가로 작성해주면 된다.

반응형