GitHub 작업 및 릴리스를 사용하여 Vercel에 사이트 배포

내가 가장 좋아하는 호스팅 회사 중 하나는 단순성과 유연성을 동시에 제공할 수 있는 Vercel입니다. 제가 만들고 있는 새 제품을 위해 Vercel에서 사이트의 배포 프로세스를 완전히 제어하고 싶었습니다.

일반적으로 Vercel을 GitHub과 함께 사용하는 경우. 코드를 푸시하면 새 배포가 자동으로 트리거됩니다. 필요에 따라 구성할 수 있지만 주요 문제는 GitHub 릴리스로 작업하려는 경우입니다. Vercel은 아직 새 릴리스에 배포할 수 없습니다.

이를 극복하기 위한 몇 가지 방법이 있습니다. 예를 들어 배포 후크로 Vercel을 호출하여 빌드를 시작할 수 있습니다. 이렇게 하면 GitHub Actions 워크플로 내에서 후크를 호출할 수 있습니다.

또 다른 접근 방식은 Vercel CLI와 GitHub Actions의 조합을 활용하는 것입니다. 이 접근 방식은 CI/CD 프로세스 중에 필요한 모든 유연성을 제공했기 때문에 제가 사용한 접근 방식입니다.

전제 조건

시작하기 전에 Vercel에서 프로젝트 ID와 조직 ID를 알아야 합니다. 이것을 얻는 가장 간단한 방법은 프로젝트를 Vercel에 연결하는 것입니다. npx vercel link 를 사용하여 이를 수행할 수 있습니다.

Info: You read more about the CLI here: Vercel CLI. When you have not used it yet, it will first ask you to sign in.

명령을 실행하면 프로젝트에 .vercel 파일이 있는 project.json 폴더가 생성됩니다. 해당 파일에서 나중에 GitHub Actions 워크플로에서 사용할 수 있는 projectId 및 orgId 를 찾을 수 있습니다.

구성해야 할 다른 사항은 Vercel에서 프로젝트에 대해 GitHub를 비활성화하는 것입니다. 그렇게 하면 Vercel에 제어 권한을 넘겨받고 싶다고 알릴 수 있으며 코드를 GitHub에 푸시할 때 트리거되지 않습니다.

GitHub를 비활성화하려면 프로젝트의 루트에 vercel.json 파일을 생성하고(아직 존재하지 않는 경우) 다음 콘텐츠를 추가합니다.

{
  "github": {
    "enabled": false,
    "silent": true
  }
}

한 가지 더, GitHub Actions에서 CLI를 사용하려면 atoken가 필요합니다.

Vercel Tokens 으로 이동하여 새 토큰을 만듭니다. 나중에 필요하므로 이 토큰을 안전하게 보관하십시오.

구성할 GitHub 비밀

GitHub 프로젝트에서 설정으로 이동하여 다음 비밀을 추가합니다.

VERCEL_ORG_ID: 값은 orgId 명령으로 생성된 JSON 파일의 vercel link입니다.

VERCEL_PROJECT_ID: 값은 projectId 명령으로 생성된 JSON 파일의 vercel link입니다.

VERCEL_TOKEN: 값은 이전에 생성한 토큰입니다.

GitHub 워크플로

마지막 단계는 작업을 GitHub 워크플로에 추가하는 것입니다. 다음은 이를 수행할 수 있는 방법의 예입니다.

name: "Deploy"

on:
  release:
    types:
      - published
  push:
    branches:
      - dev
  workflow_dispatch:

jobs:
  vercel: 
    runs-on: ubuntu-latest
    name: "Deploy front-end"

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '14'
          registry-url: https://registry.npmjs.org/

      - name: "Deploy to Vercel"
        run: |
          prodRun=""
          if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
            prodRun="--prod"
          fi

          npx vercel --token ${VERCEL_TOKEN} $prodRun
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

Info: When the action runs for any other branch than my main branch, it will not deploy to production.

위 워크플로에서 볼 수 있듯이 GitHub Actions 워크플로는 워크플로에서 릴리스, 푸시dev 또는 수동 트리거가 있는 경우에만 트리거됩니다.

이 워크플로를 배치하면 Vercel에 대한 모든 배포를 제어할 수 있습니다.

eliostruyf.com에 처음 게시된 기사