CI/CD 구축하기
vercel
1.github repository 배포
레파지토리 import 하기
설정 후 배포
Environment Variable 설정하면 프로젝트 내에서 process.env 객체를 통해 접근가능
url을 통해 배포된 주소에 접근 가능
2. 로컬에서 vercel 설정
sudo npm install -g vercel@latest
vercel login // email 로 로그인 진행vercel
자동적으로 .vercel 폴더가 생성된다
이후 .gitignore에서 .vercel을 제거하고 commit 해줬음 ( .vercel/project.json 에 있는 정보를 사용해야 하기 때문에)
GitHub Actions 설정
1. workflow 파일 생성
name: Deploy to Vercel
on:
push:
branches:
- main
- dev
pull_request:
branches:
- main
- dev
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Build project
run: npm run build
- name: Deploy to Vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
run: |
npx vercel --prod --token $VERCEL_TOKEN --yes2. GitHub Secrets 추가
필요한 정보
VERCEL_TOKEN
VERCEL_PROJECT_ID
VERCEL_ORG_ID
VERCEL_PROJECT_ID, VERCEL_ORG_ID
생성된 .vercel/project.json 에 기재되어있음
VERCEL_TOKEN
create를 통해 생성 ( 토큰이 만들어지는데 한번만 볼 수 있으므로 github secret에 저장)
secret key 등록된 상태
테스트
새로운 PR을 만들어서 dev로 merge한 결과 배포자동화가 이루어진 것을 확인
404 이슈해결
origin으로 접근하면 (ex. www.domain.com/) 새로고침해도 Not Found가 뜨지 않는데, www.domain.com/community 등 pathname이 추가되면 새로고침 했을 때 Not Found가 뜨는 상황
이 문서를 참고하여 문제 해결
https://medium.com/@abdulmuizzayo6/how-to-host-your-react-app-on-vercel-effectively-7ae35b259044
이 문제는 Vercel에 배포한 React 애플리케이션에서 발생하는 SPA 라우팅 문제로, 서버가 클라이언트 측 경로를 인식하지 못해서 발생합니다. 이 문제를 해결하려면 Vercel의 리디렉션 설정을 통해 모든 경로 요청을 index.html로 리디렉션해야 한다.
루트에 vercel.json을 추가하고 이 내용을 작성 ( .vercel 폴더내에 추가하는 것이 아니다!)
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
참고 블로그
