Zenn
🖖

Firebaseで開発環境と本番環境を分けたい

2021/02/13に公開
Firebase
tech

先日、はじめてFirebaseを使ったSlackアプリをつくったのですが、そのときに開発環境と本番環境を分けたくてFirebaseだとどうやってやるんだろう？と思い調べてみました。これ書いてて気づいたのですが、ぶっちゃけこのくらいの規模であればエミュレーター使ってローカルで確認でも良かったかもしれない😂

前提

  • この記事では、環境を分けたい場合の手順を中心としたいため、Firebaseのプロジェクトを作成する手順について詳細は触れません

手順

  1. Firebaseプロジェクトを環境ごとに作成
  2. Firebase CLIでプロジェクトを確認する
  3. 環境ごとのプロジェクトを設定する
  4. 使用したい環境のプロジェクトをアクティブにする

1. Firebaseプロジェクトを環境ごとに作成

公式ドキュメント等を参考にFirebaseコンソール上で開発環境用のプロジェクトと本番環境用のプロジェクトを作成します。

  • 開発用プロジェクト名 => xxxx-dev
  • 本番用プロジェクト名 => xxxx-prod

2. Firebase CLIでプロジェクトを確認する

Firebaseコンソールでプロジェクトを作成できたら、ローカルでFirebase CLIを使ってプロジェクトが作成できているか確認してみます。

$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌────────────────────────────┬───────────────────────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name       │ Project ID                            │ Project Number │ Resource Location ID │
├────────────────────────────┼───────────────────────────────────────┼────────────────┼──────────────────────┤
│ Sample Project DEV         │ sample-project-dev (current)          │ xxxxxxxxxxxx   │ asia-northeast1      │
├────────────────────────────┼───────────────────────────────────────┼────────────────┼──────────────────────┤
│ Sample Project PROD        │ sample-project-prod                   │ yyyyyyyyyyyy   │ asia-northeast1      │
└────────────────────────────┴───────────────────────────────────────┴────────────────┴──────────────────────┘

2 project(s) total.

3. 環境ごとのプロジェクトを設定する

作成したプロジェクトが確認できたら、以下の設定を行ってプロジェクトエイリアスを設定します。
エイリアスを設定することで、ローカルで環境ごとにディレクトリを分けることなく開発・本番を切り替えることができるようになります。

$ firebase use --add
? Which project do you want to add? (Use arrow keys)
❯ sample-project-dev
  sample-project-prod

選択してEnterを押すとエイリアス名を入力するように促されるので、以下のように設定します。
※ 名前は任意で構いません。

  • 開発環境 => dev
  • 本番環境 => prod 
? What alias do you want to use for this project? (e.g. staging) dev

Created alias dev for sample-project-dev.
Now using alias dev (sample-project-dev)

Enterを押すと設定した内容が.firebasercに反映されます。
これを必要な環境の数だけ繰り返します。以下に本番環境の設定も行ったファイルを載せておきます。

.firebaserc
{
  "projects": {
    "prod": "sample-project-prod",
    "dev": "sample-project-dev"
  }
}

4. 環境を切り替える

環境を変えたい場合はさきほど設定したエイリアスを使ってfirebase useを実行します。

$ firebase use prod

これで環境を分けて使うことができるようになりました。
あとは環境ごとに必要な環境変数をfirebase functions:config:setを使って設定するなどすれば完成です。

参考

Discussion