GitHub Actions を用いたデプロイで、ブランチによって環境変数を出し分ける方法

# はじめに
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` で定数化します。

```txt:.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 を利用する場合、こんな感じのファイルを作成するのがありがちかと思います。

```js:firebase.js
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` をクリックして登録します。

※ 下記のサンプルでは、本番環境用のみ記載しています。

```txt:FIREBASE_TOKEN
< $ firebase login:ci > で取得したトークン（本番・ステージング共通でOK）
```

```txt:FIREBASE_PROJECT_ID_PROD
作成した Firebase プロジェクトの ID （本番環境）
```

```txt:ENV_PROD
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` などで分岐することもできると思いますが、今回は２ファイル作成することで分岐させました）

※ 下記のサンプルでは、本番環境用のみ記載しています。

```yaml:deploy-prod.yml
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 ワークフロー](https://help.github.com/ja/actions/configuring-and-managing-workflows/configuring-a-workflow)
[GitHub Action for Firebase]
(https://github.com/marketplace/actions/github-action-for-firebase)
[さくらのナレッジ - GitHubの新機能「GitHub Actions」で試すCI/CD](https://knowledge.sakura.ad.jp/23478/)
[Qiita - Nuxt × Firebase アプリケーションを GitHub Actions で自動デプロイ](https://qiita.com/ko_u_0402/items/ff9c2095b529463bcdf9)