github actions でfirebaseに自動デプロイするための設定
サービス開発のときは、環境構築と同時にデプロイ自動化まで行うのが俺的セオリーです。
というわけで、firebaseを使ったアプリケーションのデプロイを自動化する方法を紹介します。
想定QA
Q. なんで環境構築と同時にデプロイ自動化までするの?面倒くない?
A. 下のような理由
- 実際に使うインフラを知っておいたほうが、開発環境をどう構築したらいいかがわかる。開発環境は本番環境にできる限り近づけて作るべきなので、本番環境を先に知っといたほうがいい。
- 開発終わってから、デプロイの仕方わからーんってなって、構成見直すといった手戻りを防げる。
- どうせいつかやるから最初やっても同じ
- 開発のときのテンションが上がる
Q. Github Actions癖強くない?CircleCIとかで良くない?餅は餅屋理論
A. Githubで完結するのは強い。Github Actionsのデプロイ設定が面倒くさいのは一時の苦痛だが、デプロイのためにCircleCI等使うサービス1つ増やすのは一生の苦痛。
目的
githubにpushしたら自動でデプロイされるように、github actionsを設定します。
nuxtアプリ(SPAモード)を題材に書きますが、ビルドコマンド等をよしなに変更したら、他の環境でも使えるはずです。
前提
firebaseのhosting, firestoreのrules/index, GCP Cloud Functionsの3つをデプロイします。
手順
- ci用にサービスアカウントを作成
- サービスアカウントの認証ファイルをbase64で変換
- github secretsにSA keyの登録
- [optional] firebaseの各種認証情報もついでに登録
- github actionsの設定
- firebase hostingへのデプロイ
- firebase firestoreのデプロイ
- functionsのデプロイ
ci用にサービスアカウントを作成
- firebase hostingへのデプロイ
- firebase firestoreのデプロイ
- functionsのデプロイ
https://console.cloud.google.com/iam-admin/serviceaccounts よりci用のサービスアカウントを作成します。
「Firebase Develop 管理者」の権限を付与します。
後述するCloudFunctionsにもデプロイする場合は、「Cloud Functions開発者」「サービス アカウント ユーザー」のロールも付与します。
次の画面の「ユーザーにこのサービス アカウントへのアクセス権を付与」は設定せずに、そのまま作成します。
一覧画面に戻ったら、詳細メニューから鍵を作成のボタンを押し、jsonファイルをダウンロードします。
サービスアカウントの認証ファイルをbase64で変換
jsonファイルをbase64で文字列に変換します。
macだとこんな感じで変換できます。
gcp-sa-key.jsonは先程ダウンロードしたファイルです。
> cd ~/Downloads
> cat gcp-sa-key.json | base64
NANKARANDOMPPOIMOZIRETSUGADETEKURU4LJ5HFROPO2pSTNgt1HhKU6ZIo1n2t
1YY5uiNoIziuZI5QwYrd0szqBu6vGQJ6UuZPqZfEP6gmKX8FFXUXldj0yKcEx+7C
DWgMir3m/Tz4PoXQBVx7tqG3NdMoM3gCm4k++HHWHRP/VX3Xf+UB8UQEl+VsSOgk
PP96iGr2pW3WAo7IJK/qB0nQ
# このままクリップボードにコピー(mac限定)
> cat gcp-sa-key.json | base64 | pbcopy
github secretsにSA keyの登録
githubリポジトリに行き、settingsの中のsecretsから環境変数を設定します。
url的にはhttps://github.com/{your_account}/{your_repo_name}/settings/secrets
でアクセスできます。
[optional] firebaseの各種認証情報もついでに登録
本筋と外れますが、nuxtとfirebaseをつなぐ認証情報をここで色々設定しておきます。
最終的にはこんな感じになります。
github actionsの設定
ここからが本題です。
今回用いるプロジェクト構成図は以下のようになっています。
(関係するファイルのみ抜き出しています。)
root
├── firestore // firestoreのrulesやindexesをまとめたディレクトリ
│ ├── firebase.json // firestoreの設定
│ ├── firestore.rules // firestoreの読み書きrules
│ ├── firestore.indexes.json // firestoreのindexの設定
│ ・・・
├── front // フロントのコードをまとめたディレクトリ nuxt create-app の成果物。
│ ├── firebase.json // hostingの設定が書かれている
│ ・・・
└── functions
├── func1
└── func2
firebase hostingへのデプロイ
説明はyml内に書きます。
name: Deploy
# masterにpushするたびに、github actionsを走らせる。
on:
push:
branches: [ master ]
# jobを複数定義できる。
jobs:
# frontのデプロイ
front:
runs-on: ubuntu-latest
# デフォルトで走らせるディレクトリを指定
defaults:
run:
working-directory: ./front
steps:
- uses: actions/checkout@v2
# node & yarn を入れる
- name: setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: install
run: yarn
env:
NODE_ENV: development
# yarn generateコマンドでbuildする。
# nuxtに注入する環境変数を明示的に指定する。
- name: build
run: yarn generate
env:
APP_ENV: production
NUXT_ENV_APIKEY: ${{ secrets.NUXT_ENV_APIKEY }}
NUXT_ENV_AUTH_DOMAIN: ${{ secrets.NUXT_ENV_AUTH_DOMAIN }}
NUXT_ENV_DATABASE_URL: ${{ secrets.NUXT_ENV_DATABASE_URL }}
NUXT_ENV_PROJECT_ID: ${{ secrets.NUXT_ENV_PROJECT_ID }}
NUXT_ENV_STORAGE_BUCKET: ${{ secrets.NUXT_ENV_STORAGE_BUCKET }}
NUXT_ENV_MESSAGING_SENDER_ID: ${{ secrets.NUXT_ENV_MESSAGING_SENDER_ID }}
NUXT_ENV_APP_ID: ${{ secrets.NUXT_ENV_APP_ID }}
# build結果をfirebase hosgint にデプロイ
# 先ほど取得したSAのkeyを環境変数として渡す。
# PROJECT_ID は firebaseのプロジェクトID(uniqueな方)
- name: Deploy Firebase Hosting
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
PROJECT_ID: your-pj-id
GCP_SA_KEY: ${{ secrets.GCP_SA_KEY }}
PROJECT_PATH: ./front
hostingだけしたい人はここまでで大丈夫です。
firebase firestoreのデプロイ
先ほどのdeploy.yml
に追記します。
name: Deploy
# masterにpushするたびに、github actionsを走らせる。
on:
push:
branches: [ master ]
# jobを複数定義できる。
jobs:
front:
# ((省略))
firestore:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
# front同様、SAのkeyを環境変数として渡す。
# firebaseのdeployコマンドのoptionが異なる。
- name: Deploy Firestore rules and index
uses: w9jds/firebase-action@master
with:
args: deploy --only firestore
env:
PROJECT_ID: your-pj-id
GCP_SA_KEY: ${{ secrets.GCP_SA_KEY }}
PROJECT_PATH: ./firestore
functionsのデプロイ
注意: この章ではfirebaseのfunctionsではなくGCPのCloud Functionsへのデプロイの仕方を紹介します。(pythonを使いたかったため)
最後にfunctionsへのデプロイの仕方です。
functionsは別jobに並列化することで実行時間を減らすことができます。
functionのdeployにわたすoptionは公式ドキュメントから確認できます。
参考
- https://github.com/GoogleCloudPlatform/github-actions
- https://cloud.google.com/functions/docs/deploying/filesystem?hl=ja
name: Deploy
# masterにpushするたびに、github actionsを走らせる。
on:
push:
branches: [ master ]
# jobを複数定義できる。
jobs:
front:
# ((省略))
firestore:
# ((省略))
functions_func1:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
with:
version: '290.0.1'
service_account_key: ${{ secrets.GCP_SA_KEY }}
project_id: your-pj-id
- name: Deploy Functions
run: |
gcloud functions deploy a --allow-unauthenticated --source ./functions/func1 \
--runtime python37 --trigger-http --region=asia-northeast1 \
--set-env-vars ENV=production
functions_func2:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
with:
version: '290.0.1'
service_account_key: ${{ secrets.GCP_SA_KEY }}
project_id: your-pj-id
- name: Deploy Functions
run: |
gcloud functions deploy a --allow-unauthenticated --source ./functions/func2 \
--runtime python37 --trigger-http --region=asia-northeast1 \
--set-env-vars ENV=production
まとめ
みなさんも快適な自動デプロイライフを!
Author And Source
この問題について(github actions でfirebaseに自動デプロイするための設定), 我々は、より多くの情報をここで見つけました https://qiita.com/aitaro/items/abdc8a88badaba6b3a94著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .