1. 개요
구름톤 파이널 프로젝트를 진행하다 중간 발표를 위해 프론트엔드 배포를 진행해야 하는 상황이었다. 아직 기능 연결이 된 건 없지만 적어도 진행 상황을 알려 줄 수 있는 화면 정도는 필요했기 때문에 급하게 next.js와 친화적인 vercel로 배포를 결정했다.
2. Vercel
1. GitHub Repository 선택 (개인 Repository로 Fork)
vercel을 가입하고 마주하는 첫 화면은 GitHub Repository를 불러오라는 화면일 텐데, 여기에서 배포하고자 하는 Repository를 선택해 주면 된다. 단, 조직의 경우에는 pro plan을 사용해야 하므로 무료로 이용하고 싶다면 조직 내의 repository를 개인 repository로 fork해서 배포해야 한다.
1-1. 개인 Repository로 Fork
월 20달러가 작은 돈은 아니니 만큼 무료로 진행하기 위해 Fork를 진행해 줬다. 조직 내의 Repository를 들어가 상단의 Fork 버튼을 클릭하면 개인 Repository로 가져올 수 있게 된다. 단, 공개(public)로 가져가야 한다.
1-2. Vercel에서 Repository 선택과 배포 설정
Vercel에서 방금 Fork한 개인 Repository를 import하게 되면 아래와 같은 모달이 표시된다. 여기서 중요한 건 Framework Preset 선택과 Root Directory 선택인데, 이 부분이 정말 중요하다. 제대로 선택하지 않으면 각각 다른 오류가 발생하는데 나 같은 경우는 Root Directory로 인해 오류가 발생했었다. 이건 나중에 포스트를 작성해 추가적으로 올려 두겠다.
위와 동시에 가장가장 중요한 게 Environment Variables이다. 환경 변수 파일(.env)에서 다루고 있던 키 값을 넣어 줘야 빌드 오류가 발생하지 않으니 환경 변수를 사용하고 있다면 잊지 말고 꼭 입력해 주자. 입력 완료 후 Deploy를 클릭하면 배포는 끝이다. Vercel 최고!! 👍
2. 조직 Repository에서 변경 발생 시 개인 Repository로 자동 반영
사실 우리가 작업하는 공간은 조직 내의 Repository인데, 변경점이 발생할 때마다 fetch/merge를 반복하기에는 너무 번거롭지 않나? 의문이 들 것이다. 근데 GitHub는 이걸 자동으로 가능하게 해 준다. GitHub Actions 최고!! 🥹
2-1. personal access tokens 생성하기
Repository에 접근할 수 있는 권한을 가진 토큰을 생성해 줘야 하는데, 여기로 들어가 Generate new token > Generate new token (classic)를 클릭하면 아래 화면처럼 깃허브 토큰을 생성할 수 있다. repository 접근 권한을 부여하는 토큰이므로 하단에 보이는 사진의 repo 체크 박스만 체크하고 생성해 주자.
참고로 생성하게 되면 다음 화면에서 바로 키를 복사할 수 있게 되는데, 이건 복사해서 어딘가에 잘 보관해 두자. 아니면 재발급을 받아야 한다...... 😀
2-2. 조직 내 팀 Repository에서 시크릿 키 등록
GitHub Actions를 통해 변경 내역을 자동으로 개인 Repository로 옮겨 주기 위해 개인 계정 정보가 담겨 있는 시크릿 변수를 등록해 줘야 한다.
키 이름은 본인이 알아볼 수 있는 이름으로 작명하자. 처음에 잘 작성해 둬야 나중 가서 헷갈릴 일도 없기 때문에....... 🥲 이메일 값은 본인 깃허브 계정 이메일, GitHub Key는 2-1 에서 발급받은 personal access tokens 값을 넣으면 된다. 이 시크릿 키는 yml 파일에서 사용될 거다.
2-3. 조직 내 팀 Repository root 경로에 build.sh 파일 생성
Zoo-Goorm/Zoo-Front라면 GitHub-Team-Repository-Name에 Zoo-Front를 넣어 주면 된다.
#!/bin/sh
cd ../
mkdir output
cp -R ./GitHub-Team-Repository-Name/* ./output
cp -R ./output ./GitHub-Team-Repository-Name/
2-4. GitHub Actions 탭에서 .github/workflows/git-push.yml 파일 생성
set up a workflow yourself를 클릭하면 yml 파일을 생성할 수 있다. 이때, yml 파일을 생성하는 branch를 꼭!! 잘 확인하자.
yml 파일에는 아래 내용을 작성해 주면 되는데, 개인 상황에 맞게 변경해 줘야 하는 부분은 branch name, your-github-username, your-github-repository-name, YOUR_GITHUB_KEY, YOUR_ACCOUNT_EMAIL 이렇게가 될 것 같다.
name: git push into another repo to deploy to vercel
on:
push:
branches: [branch name]
jobs:
build:
runs-on: ubuntu-latest
container: pandoc/latex
steps:
- uses: actions/checkout@v2
- name: Install mustache (to update the date)
run: apk add ruby && gem install mustache
- name: creates output
run: sh ./build.sh
- name: Pushes to another repository
id: push_directory
uses: cpina/github-action-push-to-another-repository@main
env:
API_TOKEN_GITHUB: ${{ secrets.YOUR_GITHUB_KEY }}
with:
source-directory: 'output'
destination-github-username: your-github-username
destination-repository-name: your-github-repository-name
user-email: ${{ secrets.YOUR_ACCOUNT_EMAIL }}
commit-message: ${{ github.event.commits[0].message }}
target-branch: branch name
- name: Test get variable exported by push-to-another-repository
run: echo $DESTINATION_CLONED_DIRECTORY
2-5. 결과
조직 내 팀 Repository에서 변경 사항이 생기면 github actions가 동작하면서 fork한 개인 repository로 자동으로 push 해 준다. 완전 짱인데....... 😳
3. Vercel 도메인 연결
Domain을 추가하기 위해서는 배포한 프로젝트의 Settings로 들어가 Add 버튼을 클릭해 주면 도메인을 추가할 수 있다. 당연한 이야기지만, 구매한 도메인이 필요하니 가비아나 도메인 구매 서비스에서 도메인을 구입한 뒤 진행하자.
이때, 총 세 가지의 선택지가 나올 텐데 추천되는 선택지는 도메인 이름이 domain이라면 domain.com만 입력해도 www.domain.com으로 redirect해 주겠다는 뜻이다.
추가하게 되면 유효하지 않다고 오류가 뜰 텐데, 가비아 도메인 설정 중 DNS 관리 > DNS 설정에서 아래 값을 그대로 입력해 주면 된다.
나 같은 경우는 백엔드에서 구매한 도메인을 그대로 사용한 거라 백엔드 분들께 아래 사진처럼 부탁드렸다. 👍
3-1. 결과
아주 잘 연결됐고, 사이트로 정상적으로 접근 가능한 것까지 확인했다. 🎉 이렇게 쉬운 도메인 연결은 처음이다.
3. 결론
개발 공부를 시작하고, AWS/Naver Cloud Platform/Vercel 이렇게 세 개로 배포를 진행해 봤는데 정말 앞선 두 개와는 비교도 안 되게 쉬운 배포였다. 괜히 많이 사용되는 클라우드 플랫폼이 아닌 것 같다....... 🥺 SSL 인증도 따로 안 받아도 되고, 도메인 연결도 정말 쉽고, CI/CD까지 알아서 다 해 주니 Next를 사용해 구현한다면 Vercel를 사용하지 않을 이유가 없는 것 같다. 좋은 경험이었다!
4. REFERENCE
가비아에서 domain을 Vercel의 내 프로젝트와 연결하기
[Next.js] Vercel로 GitHub Organization 무료 배포하기 with github actions