안녕하세요! WEB 정도영입니다!
오늘은 저희 비트의 프론트엔드에서 production 서버와 development 서버 분리하기에 대해서 작성해보겠습니다.. ㅎ
저희 비트는 현재 사용자가 존재하는 서비스이기 때문에, 서비스를 배포한 후 배포 환경에서도 이상없이 잘 동작하는지, 확인할 필요가 있었고, 이에 따라서 서비스를 기획할 때 부터, 다른 파트들과 얘기해서 개발(테스트) 서버를 만들기로 결정했습니다!
그래서 저희는 애초에 도메인을 구입할 때 2개를 구입했는데요!
먼저 메인 서버(production) 도메인은 https://www.beatlive.kr/
BEAT
BE AT WHERE YOUR HEART BEATS
www.beatlive.kr
그리고 개발(테스트) 서버(development) 도메인은 https://www.sinjibabo.shop/
BEAT
BE AT WHERE YOUR HEART BEATS
www.sinjibabo.shop
위와 같이 두 개를 구매했습니다!
저희 메인 서버는 Vercel을 활용해서 배포했고, 아래 글을 참고해서 배포하였습니다.
Github action으로 Sync Fork 자동화하기 - push 될 때마다
Vercel 무료 배포를 위해 Organization repo를 개인 레포로 fork했다면, 주기적으로 개인이 Sync Fork 작업을 해주어야한다. main 브랜치에 변경사항 push시, Github Action을 활용하여 Sync Fork 작업을 자동화할 수
velog.io
Github Organization에 속한 프로젝트는 Vercel에서 유료(team plan)로 배포됩니다. 팀 프로젝트를 개인 레포로 클론해 무료(personal plan)로 배포하는 방법입니다.
그럼 테스트 서버는?
테스트 서버도 위의 방식과 별로 다르지 않습니다!
저희는 테스트 서버도 간단하게 Vercel을 통해서 배포를 했습니다.
정말 간단하게 스크립트만 몇 가지 변경해주면 되는데요!
기존의 메인 서버만 존재했을 때의 자동 배포 스크립트는 다음과 같습니다.
# main에 push되면 개인 레포에 push
name: 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.DEPLOY_TOKEN }}
fetch-depth: 0
ref: main
- name: Add remote-url
run: |
git remote add forked-repo https://pepperdad:${{ secrets.DEPLOY_TOKEN }}@github.com/pepperdad/BEAT-Client
git config user.name pepperdad
git config user.email email
- name: Push changes to forked-repo
run: |
git push -f forked-repo main
- name: Clean up
run: |
git remote remove forked-repo
위 스크립트를 통해서 fork된 제 개인 레포로 푸쉬되게 됩니다!
그리고, 테스트 서버를 Vercel을 통해서 똑같이 fork 후 배포합니다.
(위 과정은 한 repository를 2번 fork할 수 없기 때문에, 다른 팀원이 다시 포크한 후 Vercel로 배포를 진행하였습니다.)
테스트 서버를 도입하며 변경된 스크립트
name: Synchronize to repo deploy
on:
push:
branches:
- main
- develop
jobs:
sync-main:
name: Sync main to production repo
if: github.ref == 'refs/heads/main' # main에 푸쉬된 경우
runs-on: ubuntu-latest
steps:
- name: Checkout main
uses: actions/checkout@v4
with:
token: ${{ secrets.DEPLOY_TOKEN }}
fetch-depth: 0
ref: main
- name: Add remote-url for main
run: |
git remote add production-repo https://pepperdad:${{ secrets.DEPLOY_TOKEN }}@github.com/pepperdad/BEAT-Client
git config user.name pepperdad
git config user.email becomegoodguy@gmail.com
- name: Push changes to production-repo for main
run: |
git push -f production-repo main
- name: Clean up for main
run: |
git remote remove production-repo
sync-develop:
name: Sync develop to development repo
if: github.ref == 'refs/heads/develop' # develop에 push된 경우
runs-on: ubuntu-latest
steps:
- name: Checkout develop
uses: actions/checkout@v4
with:
token: ${{ secrets.DEV_DEPLOY_TOKEN }}
fetch-depth: 0
ref: develop
- name: Add remote-url for develop
run: |
git remote add development-repo https://imddoy:${{ secrets.DEV_DEPLOY_TOKEN }}@github.com/imddoy/BEAT-Client
git config user.name imddoy
git config user.email email
- name: Push changes to development-repo for develop
run: |
git push -f development-repo develop
- name: Clean up for develop
run: |
git remote remove development-repo
변경된 스크립트의 if 문을 통해서 main에 push 됐는지, develop에 push 됐는지를 확인하고, 해당하는 레포에 반영이 됩니다!
여기서 꼭 유의할 점은 token을 repo, workflow를 체크한 후, 기존 organization의 레포와 fork한 레포 모두에 token을 넣어야합니다!
이렇게 테스트 서버 배포 끝!
앞으로 더 좋은 글을 통해서 찾아오겠습니다~~~!
WEB_정도영
공연 예매하기를 맡은 FE 개발자 정도영입니다.
'WEB' 카테고리의 다른 글
OG(오픈그래프) 이미지를 공연 포스터로 동적으로 설정하고 싶다면? (2) | 2024.08.05 |
---|---|
구글 애널리틱스(GA) 도입해서 사용자의 유입을 알아보자! (0) | 2024.07.23 |
캐러셀... 너 뭔데 나를 이렇게 힘들게 해... (0) | 2024.07.19 |
상태 관리 라이브러리 (Jotai vs Zustand) (0) | 2024.07.19 |
못말리는 Input 달래주기 2편 (이모지 입력) (1) | 2024.07.19 |