먼저 vercel에 VITE_TOKEN, VITE_BASE_API_URL 2개 넣고 deploy하기
.github → workflows dir만들기 → production.yaml 생성
cli → npm i -g vercel → npx vercel → 로그인 이후에 프로젝트 등록
.vercel에: id두개 저장됨 → settings → secret 에 넣기 (id 2가지, BASE_API_URL, VERCEL_TOKEN : 총 4가지)
( token은? : https://vercel.com/account/tokens 가서 워크 스페이스 선택하고 이름은 아무렇게 )
( .gitignore에 .vercel도 추가해야함 - 알아서 추가됨)
api 코드 다음과 같이 작성
const { VITE_API_END_POINT, VITE_TOKEN } = import.meta.env; const API_BASE_URL = import.meta.env.MODE === 'development' ? VITE_API_END_POINT : '/api';
마지막 확인할 때 preview가 아닌 deployments확인하기.
- production.yaml
name: Vercel Production Deployment env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} on: push: branches-ignore: - main jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 - name: create vercel.json run: | touch vercel.json echo ' { "rewrites": [ { "source": "/api/:url*", "destination": "${{ secrets.API_BASE_URL }}/:url*" } ] } ' >> vercel.json - name: Install Vercel CLI run: npm install --global vercel@latest - name: Pull Vercel Environment Information 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 }}