[CI/CD] GitHub Actions를 활용한 Next.js 프로젝트 배포 자동화(feat. cloudtype)

GitHub Actions란?

GitHub Docs를 살펴보면 GitHub Actions 는 빌드, 테스트, 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이며, 레포지토리에 대한 모든 pull request를 빌드, 테스트하거나, merge된 pull request를 production에 배포하는 workflow를 생성할 수 있다고 설명하고 있습니다.

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.

 

여기서 workflow는 하나 이상의 job으로 구성된 자동화된 프로세스이며, GitHub 레포지토리의 .gitub/workflows 폴더 내 YAML 파일로 저장됩니다.

 

 

GitHub Actions를 활용한 배포 자동화

배포

배포는 클라우드 서비스인 클라우드타입을 활용하여 진행했습니다.

 

 

Personal access token 발급

레포지토리에 접근하기 위한 Personal access token 생성이 필요합니다.

Github 메인페이지에서 settings -> Developer Settings -> Personal access tokens -> Generate new token(classic) 으로 이동하여 토큰을 생성합니다.

클라우드타입을 활용하여 배포를 진행한 경우 Github Actions를 활용한 배포 자동화를 진행하기 위해 repo, admin: public_key 항목에 대한 권한이 필요하기 때문에 아래 그림과 같이 Select scopes 항목에서 해당 항목을 선택한 후 토큰을 생성합니다.

이 때 생성된 토큰은 최초 한 번만 확인할 수 있고, 이후 다시 확인할 수 없기 때문에 별도로 저장해두어야 합니다.

 

 

 

클라우드타입 API Key 발급

Github Actions과 같은 클라우드타입 외부의 CI/CD 도구를 활용하여 배포 자동화를 진행하기 위해서는 클라우드타입 API Key 생성이 필요합니다.

클라우드타입 메인페이지에서 환경설정 -> 인증 -> 새로운 API 키 생성을 클릭하여 API Key를 생성합니다.

이 때 생성된 API Key 또한 최초 한 번만 확인할 수 있고, 이후 다시 확인할 수 없기 때문에 별도로 저장해두어야 합니다.

 

 

Secrets 설정

API Key와 같이 노출이 되면 안되는 정보들의 경우 Secrets에 추가하여 관리할 수 있습니다.

Github 메인페이지에서 프로젝트 레포지토리 -> settings -> Secrets and variables -> Actions -> New repository secret을 클릭하여 추가할 수 있습니다.

이 때 클라우드타입을 활용하여 배포를 진행한 경우 앞서 생성한 Personal access token과 클라우드타입 API Key 두 가지를 Secrets로 추가해야 합니다. 

 

 

 

Workflow 설정

프로젝트 레포지토리에서 Actions 탭을 클릭하면 workflow를 설정할 수 있습니다.

클라우드타입으로 배포를 진행한 경우 프로젝트 페이지에서 CLI 탭을 클릭하면 배포 자동화에 필요한 workflow의 기본 내용을 확인할 수 있으며, 해당 내용을 바탕으로 아래와 같이 .github/workflows 폴더 내에 yml 파일을 설정하였습니다.

 

name: Deploy to cloudtype
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Connect deploy key
        uses: cloudtype-github-actions/connect@v1
        with:
          token: ${{ secrets.CLOUDTYPE_TOKEN }}
          ghtoken: ${{ secrets.GHP_TOKEN }}
      - name: Deploy
        uses: cloudtype-github-actions/deploy@v1
        with:
          token: ${{ secrets.CLOUDTYPE_TOKEN }}
          project: 프로젝트명
          stage: main
          yaml: |
            name: 프로젝트명

            app: node@16

            options:
              env:
                - name: NEXT_PUBLIC_BASE_URL
                  value: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
                - name: NEXT_PUBLIC_SUPABASE_URL
                  value: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
                - name: NEXT_PUBLIC_SUPABASE_ANON_KEY
                  value: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
              ports: 3000
              build: npm run build
              install: npm install
              start: npm run start
            context:
              git:
                url: git@github.com:${{ github.repository }}.git
                ref: ${{ github.ref }}

 

설정이 완료되면 아래와 같이 프로젝트 레포지토리의 Actions 탭에서 workflow가 실행되는 것을 확인할 수 있습니다.

 

 

또한 항목을 클릭하면 아래와 같이 job의 세부 작업 단위인 step이 실행되는 것을 확인할 수 있습니다.

 

 

 

 

참고자료

- https://docs.github.com/ko/actions

- https://docs.cloudtype.io/guide/welcome/intro