Firebase + gitAction 분기배포하기

yesme·2022년 9월 6일

배포 뿌수기

목록 보기

1/1

동기들과 사이트 프로젝트를 진행하면서 배포를 뭘로 할까 고민하다가
firebase가 공짜였다는 생각이나서 gitAction과 함께 분기배포를 진행해봤다.
참고로 진짜 10분이면 분기배포! 와 쉽다!이니 한 번 해보는 것을 추천함니다..🔥

진행 순서 🔗

firebase에 새 Hosting 프로젝트 만들기
firebase 사이트 & 기본 세팅하기
프로젝트 내에 배포할 사이트 만들기 (나는 master, dev로 2개를 만들었다)
Firebase 호스팅에 GitHub 작업 설정하기
소스코드에 gitAction 자동배포 설정하기
완성

순서대로 진행해보자! 👉

1. firebase에 새 Hosting 프로젝트 만들기

https://console.firebase.google.com/
페이지에서 새로운 Firebase 프로젝트를 추가해주면 된다.
UI가 쉽고 간단하게 되어있기 때문에 생략

2. firebase 사이트 & 기본 세팅하기

새로운 프로젝트를 만들었다면, 이제 배포할 사이트를 만들어주면 된다.
좌측 사이트바에서 빌드 > Hosting 에 들어와 시작하기 클릭해주기

그럼 아주 친절한 firebase가 어떻게 하면 되는지 알려준다.
내 프로젝트 코드에서, 순서대로 따라해주면 된다.

firebase init 코드를 입력하면 CLI로 firebase를 설정할 수 있는데 어라?
침착하게 firebase init hosting부터 설정해주자. ~~(아마 나는 이전에 만든 플젝이 있어서 그런가보다)~~

이제 본인 프로젝트 방향에 맞춰 체크해주면 된다.
참고로 나는 single page이기때문에 두번째 문항에 Yes를 해줬고, 뒤에 나올거지만 next export를 사용했다.
init으로 설치해도 위와 크게 다른점이 없었던 것으로 기억한다.
firebase deploy 는 배포인데, 나중에 해도 괜찮다.

참고로 얘네는 결국 gitAction 파일에서 수정할 수 있어서, 중간에 실수했다고 다시 작업할 필요는 없다!!

3. 프로젝트 내에 배포할 사이트 만들기

나는 master, qa(dev)로 두 개의 분기 배포가 필요했기 때문에
지금 만들어져있는 사이트 말고 추가로 하나가 더 필요하다.
내가 만들어 놓은 hosting 페이지 아래쪽에 고급에서 다른 사이트를 추가하자.

사이트를 추가하면 이제 내 hosting에 두개의 사이트가 뜨는 것을 확인할 수 있다.

4. Firebase 호스팅에 GitHub 작업 설정하기

https://firebase.google.com/docs/hosting/multisites
firebase 공식문서에도 소개가 참 잘되어 있어서 이대로 따라해주면 된다. 심지어 한글이다

따로 만든 페이지마다 TARGET_NAME을 지정하고 파일을 보면 아래처럼 된다.

firebase.json

{
  "hosting": [
    {
      "target": "master",
      "public": "dist/master",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "qa",
      "public": "dist/qa",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

.firebaserc

{
  "projects": {
    "default": "test"
  },
  "targets": {
    "test": {
      "hosting": {
        "qa": [
          "devtest"
        ],
        "master": [
          "test"
        ]
      }
    }
  },
  "etags": {}
}

5. 소스코드에 gitAction 자동배포 설정하기

이제 코드에 분기배포를 할 두개의 브랜치를 나두자. (나는 master, qa로 했다)
gitAction이 각 브랜치에서 실행할 build를 따로 설정해두었다.

이제 gitAction을 만들자. 아마 위의 과정을 했으면 이미 두 개의 파일이 있을 것이다.

사실 이 파일 그대로 배포해도 된다.
대신 분기배포는 되지 않는..

나는 이미 만들어뒀지만, 총 4개를 만들었다. 개발용 PR/pull, 배포용 PR/pull gitAction 파일이다.
참고로 개발용,배포용은 브랜치랑, build:master, build:qa 작업 부분만 다르기 때문에 파일 두 개만 올렸다.

push용

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: MASTER/Push - Deploy to Firebase Hosting on merge
'on':
  push:
    branches: [{빌드할 branch}]
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install && npm run build:master
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BYE_EXPLORER }}'
          channelId: live 
          projectId: {프로젝트이름}
          target: {3번에서 지정한 target}

여기서 channelId가 live여야 해당 브랜치에 push와 동시에 배포가 진행된다.

당연히 channelId니까 아까 설정한 master겠지? 히힛! 하고 2시간을 버렸다.

PR 테스트용

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: MASTER/PR - Deploy to Firebase Hosting
'on':
  pull_request:
    branches:
      - {배포할 브랜치이름}
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install && npm run build:master
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_BYE_EXPLORER }}'
          projectId: {프로젝트이름}