프로젝트 프론트엔드 배포 과정
프로젝트의 프론트엔드 배포를 맡아서 했습니다. 배포 과정에 대해 정리해 드리겠습니다. Vite 기반 프로젝트를 Vercel에 배포하는 전체 과정을 상세히 알아보겠습니다.
1. 프로젝트 Fork 및 로컬 환경 설정
1-1. 프로젝트 Fork
먼저 organization 레포지토리를 자신의 GitHub 계정으로 Fork합니다.
1-2. 환경 설정 파일(.env) 준비
프로젝트에 필요한 환경 변수 파일을 준비합니다.
VITE_COTREE_BASE_URL = "https://api.cotree.site/"1-3. 패키지 설치
프로젝트 디렉토리에서 다음 명령어를 실행하여 필요한 패키지를 설치합니다.
npm i --legacy-peer-deps참고:
--legacy-peer-deps옵션은 의존성 충돌이 있을 때 유용합니다.
1-4. 로컬 개발 서버 실행
다음 명령어로 Vite 개발 서버를 실행합니다.
npm start2. Vercel을 통한 배포 과정
Vercel을 활용하여 프론트엔드를 배포하는 과정은 다음과 같습니다.
2-1. Vercel 프로젝트 설정
Vercel 대시보드에서 Fork한 레포지토리를 연동합니다.
2-2. 프로젝트 배포 및 환경 변수 설정
프로젝트의 세부 설정과 환경 변수를 등록합니다.
2-3. 배포 진행
설정을 마친 후 Deploy 버튼을 눌러 배포를 진행합니다.
2-4. 배포 중 에러사항
배포를 하던 와중에 에러가 발생했습니다. 원인은 import할 때 윈도우나 Mac 환경에서는 대소문자 구분을 명확하게 하지 않아도 되지만, Vercel의 Linux 환경에서는 정확히 구분해야 하기 때문입니다. 이 부분을 맞춰줘야 합니다.
2-5. 배포 완료 및 초기 도메인 확인
배포가 완료되면 cotree-fe.vercel.app과 같은 초기 도메인이 생성됩니다.
2-6. 가비아 CNAME 추가
도메인 연결을 위해 가비아에서 CNAME 레코드를 추가합니다.
Vercel에서 발급한 초기 도메인(cotree-fe.vercel.app)을 가비아 DNS 설정에 추가하여 커스텀 도메인(cotree.site)으로 연결합니다.
2-7. 도메인 생성 확인
가비아 설정 후, Vercel에서 두 개의 도메인이 연결된 것을 확인할 수 있으며, 자동으로 리다이렉팅이 설정됩니다. 이때 "redirect to cotree-fe.vercel.app" 설정을 통해 cotree.site로 접속하면 Vercel 배포 주소로 리다이렉트되도록 합니다.
2-8. 백엔드 CORS 설정
배포가 완료된 후, 백엔드에 CORS 허용 설정을 추가합니다.(로컬url, 서버url 유지)
백엔드에서 www.cotree.site 도메인에 대한 CORS를 허용하도록 설정합니다.
2-9. 배포 상세 정보
배포된 프로젝트가 api를 통해 정보를 가져온 상세 정보를 확인할 수 있습니다.
3. 향후 계획: 프론트엔드 배포 자동화
앞으로는 프론트엔드 배포 자동화 과정을 진행할 예정입니다.
Organization 레포지토리에 GitHub Actions을 설정하여 Fork한 레포지토리에 자동으로 최신 변경사항이 반영되도록 할 계획입니다.
