[React, Firebase, Github Actions] 5 분 안에 가능합니다. React 애플리케이션을 Github Actions에서 Firebase에 배포하는 방법
하고 싶은 일
개략도

사용하는 것
절차 모두 3단계
프로시저 1. 워크플로우용 yaml을 작성하십시오.
다음은 staging 브랜치에 push했을 때에 이번 하고 싶은 처리를 실행하는 yaml.
이것을 .github/workflows
바로 아래에 놓습니다.
production(프로덕션 환경) 브랜치에도 마찬가지의 처리를 하고 싶은 경우는, 브랜치명을 지정하는 부분만을 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: htps : // 기주 b. 코 m / 마 r tp ぁ세 / 아 c 치 온 s / 기테 브 아 치 온 - 푸 r

2단계. 각 배포 대상에 대해 다른 환경 변수를 Github Secrets 설정
GithubActions에서 사용할 수 있는 환경 변수를 Github의 Secrets로 설정합니다.
secrets는 저장소 설정의 Secrets 탭에서 설정할 수 있습니다.

firebase 프로젝트 Id를 secrets로 설정
firebase에서는 프로젝트별로 id가 설정되어 있으며, 이것을 배포 명령을 사용할 때 --project
에 전달하여 지정한 프로젝트에 배포할 수 있습니다.
위 코드에서 --project=${{ secrets.PROJECT_ID_STG }}
부분
확인하면 임의의 이름으로 등록한다.
이 프로젝트 ID는 배포 대상 프로젝트마다 다르므로 각각 확인하여 별도의 이름 HOGE_STG
과 HOGE_PROD
등으로 등록하는 것이 좋습니다.
확인 방법은 이하.
firebase의 프로젝트 ID 확인
firebase 프로젝트 Id는 장치의 다음 위치에서 확인할 수 있다.

또는 커맨드 라인에서 프로젝트 목록을보고 확인할 수 있습니다.
firebase projects:list

firebase의 자격 증명 토큰을 secrets에 등록
배포를 실행할 때 인증 토큰이 필요하므로 등록합니다.
코드의 다음 부분
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
인증 토큰을 얻는 방법
다음 명령을 터미널에서 실행하면 얻을 수 있습니다.
firebase login:ci
실행하면, 브라우저가 일어나, Google 로그인과 인증의 허가를 요구되므로 로그인해 허가한다. 그러면 터미널에 TOKEN이 지불되므로 복사하여 secrets에 임의의 이름으로 등록한다

이상.
그리고 위의 yaml이 포함된 코드를 push(merge)하면 Firebase Hosting과 Cloud Functions에 자동으로 배포된다.
참고
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 projects:list
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
firebase login:ci
Reference
이 문제에 관하여([React, Firebase, Github Actions] 5 분 안에 가능합니다. React 애플리케이션을 Github Actions에서 Firebase에 배포하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/iron-smri/items/0043a092139b8db0a31f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)