이 게시물에서는 Vercel에서 Nextjs로 CI/CD를 설정하는 방법을 배웁니다.

전제 조건

Github 계정

베르셀 계좌

시작하기

새 github 저장소 생성
Github Account 👈여기를 클릭하세요.
그렇다면 새 저장소 생성을 진행하십시오

.

리포지토리 이름을 추가하고 리포지토리 생성을 클릭하십시오.

Vercel 토큰/비밀을 생성하고 Github 비밀에 추가
VercelAccount 👈여기를 클릭하세요.
그렇다면 vercelToken 생성을 진행하십시오.

대시보드에서 설정 탭을 클릭합니다.

토큰을 클릭한 다음 만들기를 클릭합니다.

토큰 이름을 추가한 다음 만들기 클릭 -- 토큰 복사

새 Nextjs 앱을 만듭니다.
npx를 사용하여 새 Next.js 앱을 만들고 새 디렉터리로 변경합니다.

npx create-next-app nextjs-vercel-ci-cd
cd nextjs-vercel-ci-cd

Git 원격을 추가합니다.
이전에 생성한 GitHub 리포지토리의 고유 주소를 사용하여 URI를 사용하여 로컬에서 Git을 구성합니다.

git remote add origin [email protected]:git-<username>/<project-name>.git

워크플로 파일을 추가합니다.
프로젝트 루트 디렉터리에 워크플로 파일을 추가합니다.
.github/workflows/deploy.yml에 있거나 간단히

touch .github/workflows/deploy.yml

시스템에 전역으로 Vercel cli 설치npm i -g vercel진행하기 전에 Vercel의 프로젝트 ID와 조직 ID를 알아야 합니다. 이것을 얻는 가장 간단한 방법은 프로젝트를 Vercel에 연결하는 것입니다. npx vercel link 를 사용하여 이를 수행할 수 있습니다.

명령을 실행하면 프로젝트에 .vercel 파일이 있는 project.json 폴더가 생성됩니다. 해당 파일에서 나중에 GitHub Actions 워크플로에서 사용할 수 있는 projectId 및 orgId를 찾을 수 있습니다.
리포지토리의 비밀 입력 설정에서 두 값을 모두 입력으로 저장할 수 있습니다.

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

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

{
  "version": 2,
  "github": {
    "enabled": false
  }
}

리포지토리의 Github 암호에 값을 추가합니다.
github secrets에 다음 토큰을 추가해야 합니다.
Vercel_토큰
프로젝트 ID
조직 ID
및 기타 env 토큰 또는 암호

그렇게하려면.

Github 리포지토리로 이동하여 설정 탭을 클릭합니다.

비밀을 클릭한 다음 2. 새 비밀 만들기를 클릭합니다.

비밀 이름 및 값 추가



#N.B 원하는 경우 여러 비밀을 추가할 수 있습니다.

작업 흐름 파일을 편집합니다.
deploy.yml에서 추가..

name: deploy nexturl to vercel
on: [push, pull_request]
jobs:
  vercel: 
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

환경 변수(예: .env.local)를 추가하는 경우 👇 코드를 추가합니다.
아래 예제에는 Github 비밀에 추가해야 하는 Mongodb 연결 문자열과 데이터베이스 이름이 포함되어 있습니다.

      #add env file to .env.local
      - name: Set Env Vars on Vercel Project
        uses: dkershner6/vercel-set-env-action@v1
        with:
          token: ${{ secrets.VERCEL_TOKEN }}
          teamId: ${{ secrets.VERCEL_TEAM_ID }} # optional, without will use personal
          projectName: nexturl # project name in Vercel
          envVariableKeys: MONGODB_URL,MONGODB_DB
        env:
          MONGODB_URL: ${{ secrets.MONGODB_URL }}
          TARGET_MONGODB_URL: preview,development,production 
# comma delimited, one of [production, preview, development]
          TYPE_MONGODB_URL: encrypted # one of [plain, encrypted]
          MONGODB_DB: ${{ secrets.MONGODB_DB }}
          TARGET_MONGODB_DB: preview,development,production
          TYPE_MONGODB_DB: encrypted

다음 코드를 추가하여 vercel에 배포를 진행합니다.

      # deploy app to vercel
      - name: deploy site to vercel      
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional 
          vercel-args: '--prod' #Optional
          vercel-org-id: ${{ secrets.ORG_ID}}  #Required
          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required 

다음은 github 작업을 사용하여 vercel에 배포한 프로젝트의 예입니다. 👉 NextUrl

github 저장소 링크 👉 Nexturl-github

별이 인정될 것입니다.