Vercel 무료 배포
firebase로 로그인, 이메일전송 등의 서비스를 구축하고 있다. 미리 배포한 후 연동하려고 하는데 멘토님께서 firebase 배포가 아닌 vercel 배포를 추천하셨다.
Git Organization 에서 FE, BE 레포가 다른데 시간이 없어서 둘다 내가 하기로 했고,
무료로 하려면 조직(팀) 레포가 아니라 내 계정으로 개인으로 fork 를 해서 vercel 배포를 하고 cicd로 바로 적용될 수 있도록 하는게 포인트!
🤗 무료 배포 방법 설명하기 전에,
cicd 전략을 개선한 글 먼저 본다면 프로젝트의 개선 방법이 더 잘보일 듯 합니다!
코드품질, 태그 기반 배포 전략에 대해 설명했습니다.
🏷️ 안정성 배포전략 - CI 코드품질 검사, CD 태그 기반 배포
단순했던 첫 배포 파이프라인Kampus 프로젝트는 초기 Git Flow 를 따르자고 정했다. feature 브랜치에서 develop 으로 PR 을 올렸을 때 → Squash and merge → merge 후 remote branch 삭제기능 단위로 개발한 브랜
datdaradanadat.tistory.com
1. 개인 계정에 public으로 fork 한다.
2. vercel에 project 생성해서 git import 한다.
이때 연결하는건 fork 해온 개인 레포지토리 링크이다.
선택된 레포지토리만 vercel에 불러오게 할 수 있다.
Vite로 생성한 프로젝트는 Framework Preset 에서 Vite 선택
node.js+express 는 따로 프레임워크를 제공하지 않아 Other 선택하면 된다.
Environment Variables 에서 환경변수를 등록해주어야 하는데, 추후에 추가할 수 있다. 개발 도중에 환경변수를 생성하면 필수로 추가해야 한다.(+ 깃에도)
CICD 자동배포
3. 개인 github 설정에서 Personal access tokens > Token을 만들어서 repo 권한을 체크한다.
새로 토큰을 만든다.
- Note 토큰에 부여할 이름
- Expiration 토큰 만료 기한 : 1달정도 권장. 기한없음으로 하면 위험하다는 경고가 뜬다.
- Select scopes 해당 토큰에 줄 권한 : repo, workflow 체크
그러면 `ghp_`로 시작하는 토큰이 발급되는데 다시 볼 수 없으니 꼭꼭 메모해야 한다.
나는 팀노션, 개인학습노션, 카톡에 작성했다.
여러개 만들 수 있으니, 프로젝트마다 개인토큰 생성 권장
FE, BE 토큰은 통일했다.
4. 팀(Organization) 레포지토리에서 4-1, 4-2 작업을 한다
4-1. build.sh 파일 생성
프로젝트 루트에 아래 `build.sh` 파일을 생성한다.
#!/bin/sh
cd ../
mkdir output
cp -R ./[team-repo-name]/* ./output
cp -R ./output ./[team-repo-name]/[team-repo-name] 에는 팀의 레포이름(프로젝트 이름)을 입력한다.
* vercel.json 파일이 있어야 한다. 없을 경우 이때 추가하기!
Vite + React + TS
react DOM 을 가상 돔으로 인식해서, 배포되었을때 url 을 가상으로 인식해 페이지가 없다는 404 에러가 발생했다. 여기에서 routes 의 설정을 작성해주면 해결된다.
{
"version": 2,
"routes": [
{
"handle": "filesystem"
},
{
"src": "/.*",
"dest": "/index.html"
}
]
}
node.js + express
{
"version": 2,
"builds": [
{
"src": "app.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/app.js"
}
]
}
4-2. secret 변수 등록
팀 레포 Settings > Secrets and variables > Actions > Repository secrets > New repository secret
`ghp_`로 시작하는 3번에서 발급받은 토큰을 등록해준다.
+ 개인계정의 깃허브 이메일 등록한다.
5. GitHub Action 활성화 코드를 작성, 워크플로우 생성한다.
배포랑 연결된 개인레포의 계정 환경변수(actions, email)을 작성해주면 되는 것 같다.
📦.github
┣ 📂ISSUE_TEMPLATE
┃ ┣ 📜✅-etc-template.md
┃ ┣ 📜✨-feature-template.md
┃ ┗ 📜🐛-bug-report-template.md
┣ 📂workflows
┃ ┗ 📜deploy.yml
┗ 📜PULL_REQUEST_TEMPLATE.mdname: Synchronize to forked repo
on:
push:
branches:
- main
jobs:
sync:
name: Sync forked repo
runs-on: ubuntu-latest
steps:
- name: Checkout main
uses: actions/checkout@v4
with:
token: ${{ secrets.AUTO_ACTIONS }}
fetch-depth: 0
ref: main
- name: Add remote-url
run: |
git remote add forked-repo https://[your-github-name]:${{ secrets.AUTO_ACTIONS }}@github.com/[your-github-name]/[your-repo-name]
git config user.name [your-github-name]
git config user.email ${{ secrets.EMAIL }}
- name: Push changes to forked-repo
run: |
git push -f forked-repo main
- name: Clean up
run: |
git remote remove forked-repo
ISSUE_TEMPLATE, PULL_REQUEST_TEMPLATE 는 이슈생성, PR 날릴때 적는 템플릿을 설정해줬다. 깃허브에서 세팅할 수도 있지만, vscode 에서 작성할 수 있다. 코드에서 세팅해주는게 편리한듯.
6. 팀 레포 main에 올리면 Actions 탭의 workflow 가 돌아간다. run
성공!
개인레포에서도 action이 돌아가고
vercel 프로젝트의 Deployments 탭을 보면 성공적으로 배포된 것을 볼 수 있다!
☑️ 배운 점
인터넷을 열심히 참고하며, 나만의 vercel 배포 세팅을 가지게 되었다.
이때 firebase의 Google 소셜 로그인을 구현했는데, 승인된 도메인에 배포된 링크를 추가해주어야 했다.
이제 vercel + Github Action 조합을 마스터했다!
#참고
[ node.js ] Express를 vercel로 배포하기
[Github Action] 깃허브 Organization 레포지토리 vercel 자동 배포