프론트엔드에서 production 서버와 development 서버 분리하기!

안녕하세요! WEB 정도영입니다!

오늘은 저희 비트의 프론트엔드에서 production 서버와 development 서버 분리하기에 대해서 작성해보겠습니다.. ㅎ

 

저희 비트는 현재 사용자가 존재하는 서비스이기 때문에, 서비스를 배포한 후 배포 환경에서도 이상없이 잘 동작하는지, 확인할 필요가 있었고, 이에 따라서 서비스를 기획할 때 부터, 다른 파트들과 얘기해서 개발(테스트) 서버를 만들기로 결정했습니다!

 

그래서 저희는 애초에 도메인을 구입할 때 2개를 구입했는데요!

먼저 메인 서버(production) 도메인은 https://www.beatlive.kr/

BEAT

 

그리고 개발(테스트) 서버(development) 도메인은 https://www.sinjibabo.shop/

BEAT

 

위와 같이 두 개를 구매했습니다! 

 

저희 메인 서버는 Vercel을 활용해서 배포했고, 아래 글을 참고해서 배포하였습니다.

https://velog.io/@charming-l/Github-action%EC%9C%BC%EB%A1%9C-push-%EB%90%A0-%EB%95%8C%EB%A7%88%EB%8B%A4-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%B5%9C%EC%8B%A0%ED%99%94%ED%95%98%EA%B8%B0to-forked-repo

Github action으로 Sync Fork 자동화하기 - push 될 때마다

 

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 개발자 정도영입니다.