vercel로 next13 배포

 

1. .github/workflows

 

root 폴더에 .github/workflows 폴더 생성 후  preview.yaml 파일을 생성한다.

 

//preview.yaml 

name: GitHub Actions Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Vercel CLI
        run: npm install --global vercel@canary
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

 

*  yaml파일을 github 레포에 push하면 자동으로 action이 생성된다.

 

 

2. 버셀에서 access token 받기

 

 

https://vercel.com/login?next=%2Faccount%2Ftokens

Login – Vercel

 

접속 후

 

 

토큰을 생성한다. 토큰값 복사해 두기!

 

반응형

 

3. 버셀로 배포하기 - 터미널에 명령어만 치세요

 

1) 버셀 설치하기

npm install -g vercel@latest

 

 

2) 버셀 로그인하기

vercel login

 

3) 깃허브에서 레포지토리를 찾아서 배포하기

vercel

 

4) 

 

PS C:\프로젝트 폴더 위치\my-app> vercel
Vercel CLI 32.3.1
? Set up and deploy “C:\프로젝트 폴더위치\my-app”? [Y/n] y
? Which scope do you want to deploy to? 깃허브 이름 (입력)
? Link to existing project? [y/N] y
? What’s the name of your existing project? 깃허브 레포 이름 (입력)
🔗  Linked to 깃허브이름/깃허브레포이름 (created .vercel and added it to .gitignore)
🔍  Inspect: https: 배포 주소
✅  Preview: https: 배포 주소 [3s]
📝  To deploy to production, run `vercel --prod`

 

 

5) .vercel 폴더 생성됨

 

폴더 안에 있는 project.json 파일 안에 들어가면

{"projectId":"프로젝트 아이디","orgId":"organiztion ID"}
두개가 있다.

각각 해당하는 값 복사해 두기

 

728x90

3. 시크릿 키 설정

 

깃허브에서 해당 레포에 settings을 들어가면 Actions secrets and variables 폴더 안에 actions를 클릭한다.

 

 

새로운 시크릿키 생성하기

 

 

생성한 키에 맞게 복사해둔 값을 붙여준다.

 

4. git push

 

git push를 하고 Actions에 들어가보면 workflow가 생성되었을 것이다.
이제 자동으로 main에 merge될 때마다 자동 배포가 된다.

 

++++++중간에 실패 했다면 버셀에서 재배포 해보자

👀참조 : https://cocobi.tistory.com/105