はじめに
Firebase を使ったプロジェクトの環境構築をしていて、デプロイをCLIからではなく、 GitHub の特定ブランチの変更をトリガーにデプロイされるようにしたいと思い、調べていると GitHub Actions 良いじゃん。となったので、具体的な設定方法をまとめました。
GitHub Actions とは
2019年11月に GitHub に追加された新機能で、簡単に説明するとリポジトリの変更をトリガーに実行できるCI/CD機能です。（Circle CI、Travis CI みたいなやつ）
気になる料金ですが、 GitHub フリープランでもストレージ 500MB 、1ヶ月 2000分 までは無料で行えるようです。
個人プロジェクトなら全然これで良いですね。
今回やりたいこと・用意したプロジェクトの環境
-
GitHubのリポジトリにプッシュ → 特定のブランチであればGitHub Actionsでビルド・デプロイしたい -
Nuxt(dotenvモジュール入り) のアプリケーションをFirebaseプロジェクトへデプロイしたい -
Firebaseプロジェクトは、本番用とステージング用の２つの環境を作成済み
Firebase の Config を環境変数化する
まず、 Firebase の設定を .env で定数化します。
FIREBASE_API_KEY=XXXXXXXXXXXXXXX
FIREBASE_AUTH_DOMAIN=XXXXXXXXXXXXXXX
FIREBASE_DATABASE_URL=XXXXXXXXXXXXXXX
FIREBASE_PROJECT_ID=XXXXXXXXXXXXXXX
FIREBASE_STORAGE_BUCKET=XXXXXXXXXXXXXXX
FIREBASE_MESSAGING_SENDER_ID=XXXXXXXXXXXXXXX
FIREBASE_APP_ID=XXXXXXXXXXXXXXX
Nuxt プロジェクトで Firebase を利用する場合、こんな感じのファイルを作成するのがありがちかと思います。
import firebase from 'firebase'
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID
}
const app = firebase.apps.length
? firebase.app()
: firebase.initializeApp(firebaseConfig)
export const auth = app.auth()
export const db = app.firestore()
export default firebase
GitHub リポジトリの Secrets に環境変数を登録する
リポジトリ内の Settings > Secrets から Add a new secrets をクリックして登録します。
※ 下記のサンプルでは、本番環境用のみ記載しています。
< $ firebase login:ci > で取得したトークン（本番・ステージング共通でOK）
作成した Firebase プロジェクトの ID （本番環境）
FIREBASE_API_KEY=XXXXXXXXXXXXXXX
FIREBASE_AUTH_DOMAIN=XXXXXXXXXXXXXXX
FIREBASE_DATABASE_URL=XXXXXXXXXXXXXXX
FIREBASE_PROJECT_ID=XXXXXXXXXXXXXXX
FIREBASE_STORAGE_BUCKET=XXXXXXXXXXXXXXX
FIREBASE_MESSAGING_SENDER_ID=XXXXXXXXXXXXXXX
FIREBASE_APP_ID=XXXXXXXXXXXXXXX
GitHub Actions 用のコンフィグファイルを作成
.github/workflows/ 直下に YAML ファイルを置いた状態で git push すると、それをトリガーに条件（ YAML 内 on: ）に該当する YAML ファイル見てコンテナを起動してくれるようです。
今回は、 deploy-prod.yml (= 本番環境デプロイ用) と deploy-stag.yml (= ステージング環境デプロイ開発用) を作成しました。
（ if などで分岐することもできると思いますが、今回は２ファイル作成することで分岐させました）
※ 下記のサンプルでは、本番環境用のみ記載しています。
name: Deploy to Firebase project production
on:
push:
branches: [master] # ステージング用は「[develop]」
jobs:
deploy:
name: Build and Deploy
runs-on: macos-latest
# ↑ ubuntu や windows なども指定可能
steps:
- name: Checkout repo
uses: actions/checkout@v2
# ↑ 「@master」とかもあってブランチ名っぽいですが、ブランチ名ではなく
# GitHub Actions が提供している `チェックアウトアクション` のバージョン名なので注意
- name: Install firebase-tools
run: yarn global add firebase-tools
- name: Create .env file
run: echo "${{ secrets.ENV_PROD }}" > .env
# ↑ Secrets に定義した「ENV_PROD」の文字列の内容で「.env」というファイルを作成する
# 下記の「env:」に定義してしまうと echo の結果が「***」となってしまうので、直書きする必要がある
- name: Install dependencies
run: yarn --network-timeout 100000
# ↑ ネットワークタイムアウトの設定がデフォルトだと、 yarn install 時に
# 「info There appears to be trouble with your network connection. Retrying...」 というエラーが出てしまうことがある
- name: Build app
run: yarn generate
- name: Deploy
run: firebase deploy --project $FIREBASE_PROJECT_ID_PROD --token $FIREBASE_TOKEN
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
FIREBASE_PROJECT_ID_PROD: ${{ secrets.FIREBASE_PROJECT_ID_PROD }}
git push してデプロイする
普通はやらないと思いますが、 master ブランチに直プッシュします。
git push origin master
リポジトリ内の Actions の Workflows に、アクションのステータスが表示されます。
最後に
今回は、 Nuxt、 dotenv、 Firebase と GitHub Actions を組み合わせた内容でしたが、別のケースでもブランチによる環境変数の出し分けの参考になるかと思います。
参考文献
GitHub Actions ワークフロー
[GitHub Action for Firebase]
(https://github.com/marketplace/actions/github-action-for-firebase)
さくらのナレッジ - GitHubの新機能「GitHub Actions」で試すCI/CD
Qiita - Nuxt × Firebase アプリケーションを GitHub Actions で自動デプロイ