Vercel 무료 배포
firebase로 로그인, 이메일전송 등의 서비스를 구축하고 있다. 미리 배포한 후 연동하려고 하는데 멘토님께서 firebase 배포가 아닌 vercel 배포를 추천하셨다.
Git Organization 에서 FE, BE 레포가 다른데 시간이 없어서 둘다 내가 하기로 했고,
무료로 하려면 조직(팀) 레포가 아니라 내 계정으로 개인으로 fork 를 해서 vercel 배포를 하고 cicd로 바로 적용될 수 있도록 하는게 포인트!
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 자동 배포