vercel 로 배포 및 CI/CD 파이프라인 구축하기(배포 자동화)

오늘은 vercel 로 배포및 CI/CD 파이프라인 구축을 통해 프론트엔드 개발환경을 세팅해볼 예정입니다.

 

위 블로그를 작성할때 기준 저의 프로젝트 개발환경 세팅은  pnpm + react + typescript + tailwind 입니다. 또한, 저의 경우 깃허브 레포지토리로 미리 위 세팅에 대해 template 레포지토리가 있기 때문에 레포는 미리 만들어두고 시작했습니다. 

 

1. github에 있는 repository clone 

1. vscode 로컬 환경에 워크스페이스 폴더를 등록합니다.

2. 해당 워크스페이스 폴더로 터미널 경로를 맞춰줍니다.

3. git clone [레포주소]

4. pnpm install : 의존성 설치 작업 진행.(저는 기존 템플릿 레포지토리를 클론받은거라 의존성 설치를 해주었습니다.)

 

2. 예상치 못한 이슈

위와 같이 의존성 설치 후 pnpm run dev 를 통해 로컬호스트 실행을 하였습니다. 하지만, tailwind css 의 자동완성 및 자동정렬 기능이 실행되지 않는 이슈가 발생했습니다. 이를 해결하는 방법은 아래와 같습니다.

 

해결과정

Ctrl + P 를 눌러 검색창에 "settings.json" 파일로 들어갑니다.

이후 맨 아랫줄 코드를 추가했습니다.

  "tailwindCSS.validate": true,

위와 같이 추가하면, tailwind 자동완성 및 자동정렬 기능이 정상 동작합니다.

3. yml 코드를 통한 깃허브 액션봇 설정

github 액션봇 yml 파일 만들기 (CI/CD 파이프라인 구축)

github 액션봇 yml 파일 만들기 (CI/CD 파이프라인 구축)

위 글을 참고해주세요. 주의할 것은 deploy.yml (CD테스트) 는 vercel 로 배포 연동 후 등록해야 합니다.

 

4. vercel 배포하기

vercel로 배포할 때, org 에 있는 레포를 그대로 배포하려면 vercel 유료 버전을 결제해야합니다. 따라서 저는 아래 블로그를 참고했습니다.

[Github Action] 깃허브 Organization 레포지토리 vercel 자동 배포

[Github Action] 깃허브 Organization 레포지토리 vercel 자동 배포

1. 위 블로그에서 설명하는 것 처럼, org의 레포를 먼저 개인 레포로 fork 해줍니다.

2. 이후 fork 한 레포를 vercel 에서 배포해줍니다.

3. secret 토큰을 발급받습니다.(블로그 3번과정 참조) 발급받은 토큰은 복사해둡니다.

4. Org 레포 settings -> Secrets and Variables -> Actions 에서 secret 변수를 등록합니다. (블로그 5번과정 참조)

 

저의 방식의 경우 build.sh 파일이 필요없습니다. 제가 올려둔 deploy.yml 파일에서 이미 깃허브 액션으로 빌드 가 진행되기 떄문입니다,   

5. VERCEL 토큰 발급받기

위와 같이 Accounts Settings 에서 토큰 이름을 아무렇게나 정해주고 발급받습니다. 발급받은 토큰은 본인 계정으로 배포한 프로젝트들에서 사용되는 secrets.VERCEL_TOKEN 변수가 되며, 이는 깃허브 Actions 애서 secret변수로 등록하면 된다. 

꼭 복사해서 저장해두세요!!

 

위는 Org repo 의 settings 화면이며, 저의 deployment.yml 파일 기준으로 등록해야하는 secret 변수는 3개 입니다.

 

- VERCEL_TOKEN : 위에 위에 있는 vercel 홈페이지 Account Settings 에서 발급받으면 됩니다.

- VERCEL_PROJECT_ID : 아래 사진 참고하셔서 프로젝트 settings -> general 화면에서 확인 가능합나다. 

- VERCEL_ORG_ID :  아래 사진 참고하셔서 워크스페이스에서 Settings를 클릭한 뒤, Team ID를 복사하면 됩니다.

무지 이모티콘이 붙어있는 settings 클릭

 

Team ID 를 복사해주세요!

 

위의 과정이 성공적으로 마무리 되면,

위 사진처럼 배포 자동화까지 성공적으로 진행됩니다.

(참고 : 배포 자동화는 main에 코드를 push 했을 때 발생합니다!)

 

이제 feat 브랜치에서 작업 -> 원격에 push 및 develop 브랜차에 merge -> 로컬환경에서 git pull origin develop 으로 최신사항 반영 -> main 브랜치로 switch 후 develop 브랜치 merge -> main 을 원격에 push 과정을 거치면 변경사항이 배포환경에 자동으로 적용되는 것을 확인할 수 있습니다! 

 

+ vercel 에서의 환경변수 등록

추후 네이버연동이나 카카오연동에 따른 API KEY 등록 및 백엔드 API BASE URL 등록등 환경변수 등록이 필요합니다. 이때, vercel 홈페이지에서 해당 프로젝트를 클릭합니다.

이후 위와같이 Settings -> Environment Variables 화면으로 들어갑니다.

위 입력란에 Key 값과 Value 값을 컨벤션에 맞게 입력해주면 됩니다.

등록 후의 위와 같이 확인할 수 있습니다. 위 모습은 제가 이전에 진행했던 프로젝트의 내용입니다. 

 

VITE_REDIRECT_URI 와 VITE_CLIENT_ID 는 네이버 맵 api 를 연동할 때 발급받은 것이며, VITE_API_BASE_URL 은 백엔드 api 도메인 주소를 입력한 것입니다.

 

물론 배포환경 말고, 로컬환경에서도 위와 같이 등록을 해야합니다.

해당 작업은 vscode 로컬 환경에서도 동일하게 해야하며, 방법은 아래와 같습니다.

 

1. 프로젝트 루트 디렉토리 아래 .env 파일 생성

2.VITE_API_BASE_URL=https://1.2.3.4........~~처럼  api base url을 입력해줍니다.

3. .env 파일은 gitignore처럼 github 에 push 되지 않으므로, 팀원들과의 커뮤니티를 통해 해당 작업의 내용을 알려주고 각자 로컬에서 똑같이 등록할 수 있도록 공유해야 합니다.