[React, Firebase, Giithub Action] 5분이면 완성됩니다.Giithub Action 으로 React 의 응용 프로그램 을 Firebase 로 설계하는 방법

하고 싶은 일

특정 지점의push/merge를 통해 각각 다른 환경에서 블록을 해체

Firebase Hosting과 Cloud Function 두 가지를 한 번에 추출

다이어그램

쓸것

Github Actions

Github secrets

Firebase CLI

총 3단계
1단계.제작 작업 흐름용yaml.
다음은 Staging 지점에 대한push를 진행할 때 이번에 하고 싶은 처리를 실행하는yaml입니다..github/workflows 바로 아래에 놓습니다.
제품(정식 환경) 지점도 똑같이 처리하려면 지정한 지점 이름의 부분만main으로 고쳐서yaml을 만들고 같은 지점.github/workflows 바로 아래에 설정합니다.

name: Deploy The App To Firebase Hosting and Cloud Functions For Firebase
# 実行タイミング
"on":
  push: # pushで実行される。マージも含まれる
    branches:
      - staging  # どのブランチにマージした時に実行して欲しいか。

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checuout
        uses: actions/checkout@v2

      # ①アプリケーションをビルドする。
      - name: Install Packages And Build The Application
        run: cd ./path/to/your/hosting/app && npm i && npm run build
        env:
          CI: false

      # ②Hostingにデプロイ
      - name: Deploy to Hosting
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting --project=${{ secrets.PROJECT_ID_STG }}
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_PATH: "cd ./path/to/your/firebase.json/directory" # firebase.jsonが存在するディレクトリへのパス

      # ③Cloud Functionsのコードに必要なpackageをinstall
      - name: Install Packages for Cloud Functions
        run: cd ./path/to/your/functions/app && npm i
        env:
          CI: false

      # ④Cloud Functionsにデプロイ
      - name: Deploy to Cloud Functions
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only functions --project=${{ secrets.PROJECT_ID_STG }}
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          PROJECT_PATH: "cd ./path/to/your/firebase.json/directory" # firebase.jsonが存在するディレクトリへのパス

주의점
코드 중의 ③, ④로 각자의 코드를 Firebase 처리할 때 firebase.중요한 것은 json이 어디에 배치되었는가 하는 것이다.
창고 노선에서 Firebase만약 json이 없다면 상기 코드처럼 환경 변수PROJECT_PATH가 된다.firebase.json에 존재하는 디렉터리의 경로를 표시해야 합니다.
반대로 노선이라면 생략할 수 있다.
출전:이번 action 사용:https://github.com/marketplace/actions/github-action-for-firebase

2단계.프로그램마다 다른 환경 변수 Giithub Secrets 설정
GiithubAction에 사용되는 환경 변수를 Giithub의 Secrets로 설정합니다.
secrets는 저장소의 settings의 Secrets 탭에서 설정할 수 있습니다.

Firebase 항목 Id를 secrets로 설정
Firebase에서 모든 항목에 id를 설정하고 디버깅 명령을 사용할 때--project 이 id를 지정한 항목에 전달하여 디버깅을 할 수 있습니다.
상기 코드 중 --project=${{ secrets.PROJECT_ID_STG }}의 부분
확인 후 임의의 이름으로 등록하세요.
이 프로젝트 ID는 프로젝트마다 개발 목적지가 다르기 때문에 각각 확인하고 다른 명칭HOGE_STG과 HOGE_PROD으로 등록하는 것을 권장합니다.
확인 방법은 다음과 같습니다.
Firebase 항목 확인 Id
Firebase 항목 Id는 콘솔의 다음 위치에서 확인할 수 있습니다.

또는 명령줄에 항목 목록을 표시하고 확인할 수 있습니다.

firebase projects:list

시크릿에 Firebase 신용 카드를 등록합니다
디버깅을 실행할 때 인증 영패가 필요하기 때문에 등록하십시오.
코드의 아래 부분

env:
 FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

인증 토큰을 획득하는 방법
터미널에서 아래 명령을 실행하면 얻을 수 있다.

firebase login:ci

를 실행하면 브라우저가 시작되고 Google 로그인 및 인증 라이센스가 필요하므로 로그인 및 라이센스가 부여됩니다.그리고 터미널에서 TOKYEN을 지불하기 때문에 복사 후 시크릿에 임의의 이름으로 로그인합니다

이상.
그런 다음 위의 yaml이 포함된 코드push(merge)가 있으면 Firebase Hosting 및 Cloud Function이 자동으로 수행됩니다.
참고 자료

GitHub Action for Firebase

GiitHub Action에서 Hosting 및 Function에서 Nuxt 응용 프로그램 개발