[Next.js] Serverless + Github Actions로 Vercel 배포 및 자동화 작업

Front-End/Next

[Next.js] Serverless + Github Actions로 Vercel 배포 및 자동화 작업

Voyage_dev 2022. 11. 9. 21:07

출처 : https://svrooij.io/2022/06/09/building-github-action-in-net/

Github Actions란?

GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하는 워크플로를 생성하거나 병합된 풀 요청을 프로덕션에 배포할 수 있다.
GitHub Actions는 단순한 DevOps를 넘어 리포지토리에서 다른 이벤트가 발생할 때 워크플로를 실행할 수 있도록 한다. 예를 들어, 누군가가 저장소에 새 문제를 생성할 때마다 적절한 레이블을 자동으로 추가하는 워크플로를 실행할 수 있다.
GitHub 홈페이지

쉽게 얘기하면 깃헙에서 특정 이벤트가 발생했을 때 어떤 동작을 할지 설정해놔서 리액션을 자동화하는 서비스라고 보면 된다.

CI / CD란?

CI (Continuous Integration) : 테스트 혹은 빌드 등의 프로세스를 지속적으로 실시해 프로덕션 환경의 품질을 유지하는 것을 의미

CD (Continuous Delivery or Continuous Deploy) : 프로덕션 서비스를 실제 사용자들에게 배포하는 프로세스

GitHub Actions Vercel 배포 및 자동화 적용

일단 프로젝트 루트에서 .github/workflows 폴더를 만든다
.github/workflows 폴더 안에 들어가서 (이름).yml 파일을 만든다.
.yml 작성
공식문서 : https://vercel.com/guides/how-can-i-use-github-actions-with-vercel

// .github/workflows/autoDeploy.yml

name: Auto Deploy StaticPage Every 3Hours

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  schedule:
    // # 3시간마다 배포
    - cron: "0 */3 * * *"

jobs:
  cron:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Install Vercel CLI (Vercel CLI 설치)
        run: yarn add vercel@latest

      - name: Pull Vercel Environment Information (Vercel 원격 환경에서 환경 변수 및 프로젝트 설정을 가져오기)
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts (프로젝트 빌드)
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel (프로젝트를 배포)
        run: vercel deploy --prebuilt --prod  --token=${{ secrets.VERCEL_TOKEN }}

문법을 모두 설명하기는 어려우므로 위에 적용한 예제들을 간단히 살펴보자.

name : 현재 이 워크플로우의 이름이다. 이해하기 쉬운 이름을 주면 아래처럼 Actions에서 표시가 된다

on : 필수값으로 워크플로우가 어떤 이벤트에 대해서 실행될지를 지정할 수 있다. 위에서는 schedule 즉, 실제 스케쥴 작업이 시작될 cron을 등록했다. 크로은 https://crontab.guru/ 여기서 확인할 수 있다. 위 cron은 3시간 단위로 실행된다.

jobs : 이름처럼 여러 개의 잡을 설정할 수 있다.

runs-on : 잡을 실행할 운영체제로 Windows, Linux, macOS를 지정할 수 있고 노드를 직접 운영하면 self-hosted를 지정할 수 있다.

steps : 잡의 실제 동작하는 부분이다.

uses : 사용하고자 하는 액션의 위치를 {소유자}/{저장소명}@{참조자}의 형태로 명시한다. github에서 제공하는 체크아웃 액션의 소유자는 actions이고, 저장소 이름은 checkout이며 현재 포스팅 시점에서 사용 가능한 최신 버전은 v3이다.

run : 시스템 shell에 명령어를 실행하는 부분이다. 이름을 지정해서 각각의 잡을 표시할 수 있다.

steps의 키워드 내부의 값들이 처음 보는 방식으로 값이 전달되고 있다. 위의 “secret”들이 어떻게 설정할 수 있고 위 값들은 어디서 가져와서 쓰는 것인지 알아보자.

GitHub Secrets

Github Repository의 Secrets은 환경 변수를 암호화해서 저장할 수 있는 기능이다. 해당 기능은 Actions를 트리거할 때, 환경 변수를 가져오기 위해 사용할 수 있다. 즉, 로컬 개발 환경에서는 .env 파일을 통해 환경 변수에 접근하고, 배포할 때에는 actions secrets을 통해 환경 변수에 접근할 수 있다.

Secrets의 설정은 어렵지 않으며 간단하다.

원하는 레포지토리 → settings → secrets → actions
우측 상단의 “New repository secret” 버튼 클릭
이름과 값을 추가 후 → Add secret

VERCEL_TOKEN

Vercel의 우측 상단의 프로필의 settings → tokens로 가면된다. (https://vercel.com/account/tokens)
- create 누른 후 SCOPE는 Full Account로 설정하고 토큰을 생성하면 된다.

생성된 토큰 값을 secrets에 저장하면 된다.

VERCEL_ORG_ID & VERCEL_PROJECT_ID

이 두개는 Vercel CLI를 사용해서 한 번에 받을 수 있다.

VSCode에서 vercel을 받아보자

yarn global add vercel

vercel login

vercel login

❗에러

zsh: command not found: vercel 라는 에러가 발생하면 환경변수를 만져주자

mkdir ~/.npm-global
export NPM_CONFIG_PREFIX=~/.npm-global
export PATH=$PATH:~/.yarn/bin
echo -e "export NPM_CONFIG_PREFIX=~/.npm-global\\nexport PATH=$PATH:~/.npm-global/bin" >> ~/.bashrc