webpackでFirebaseのプロジェクトを切り替える方法
メリークリスマス! コキチーズです。
これはFirebase Advent Calendar 2018の25日目の記事です。
今年のアドベントカレンダーを眺めているとFirebaseのカレンダーじゃなくてもFirebaseを使っている人がすごい増えたなという印象です。
まさに今年はFirebaseが広く普及してきたなと感じました。
特にWebサービスを気軽に立ち上げるときのデータベースにFirebaseを選択している人が多い印象があり、Webでも普及していますね。
来年はWebだけではなくモバイルでもFlutterを通じてFirebaseに触れる人も増えてくるのではと思っていますし、実サービスに投入する企業も増えるのではないかなと考えています。ぜひ皆さんの知見をブログや勉強会でアウトプットしてほしいです。Firebaseのことについて喋りたかったらFirebase Japan User GroupでFirebase Meetupをしているので、ぜひ気軽に登壇してみてください！
それと、モバイルの人向けですが来年の2019年4月にはGCMがシャットダウンされるので、FCMに移行できてない人は今のうちにやっておかないとつらいので、年明けくらいからは頑張りましょう。
Webでのプロジェクトの設定
ここからが本題です。個人開発でとりあえずスタートしたときは1プロジェクトで試行錯誤しながら開発を進めてきたのではないかと思います。
ただ、リリースしたあとも機能開発をする場合などは安全側に倒すためにステージング環境、開発環境を用意したりするのではないでしょうか？
プロジェクトを切り替える際、例えば次のようなコードにしてないですか？
switch(location.host) {
case 'localhost':
config = {...}
case 'example.com':
config = {...}
case 'dev.example.com':
config = {...}
}
firebase.initializeApp(config)これでも動作はすると思いますが、あまり賢い方法ではないでしょう。
なによりもプロジェクトの設定を切り替えるのにコードの変更をしなくてはいけません。
実はデプロイに利用しているfirebase-toolsには便利な機能があり、もっと簡単にプロジェクトを切り替えることができます。
firebase-tools
まずfirebase-toolsにプロジェクトの追加をします。
次のコマンドでプロジェクトを追加できます。
(執筆時に試したfirebase-toolsのversionは6.1.1です。)
firebase use --addこのコマンドを実行するといくつか質問されます。
Which project do you want to add? これは、どのプロジェクトを追加するかを聞かれています。矢印キーの上下でプロジェクトを選択し、エンターキーで決定できます。
次に、 What alias do you want to use for this project? (e.g. staging)と聞かれます。これはプロジェクトのalias名を聞かれているので、わかりやすい名前をつけるのがいいでしょう、今回は devとつけました。
これでプロジェクトの追加は完了です。
次のようにプロジェクトを切り替えることができます。
firebase use default
firebase use devfirebase use defaultでは firebase init 時に選択したプロジェクトに切り替えられます。
次にプロジェクトでfirebase-toolsのバージョンを固定するためにpackage.jsonに追加しましょう。既に追加している場合はこの作業はスキップして大丈夫です。
次のコマンドでfirebase-toolsをプロジェクトにインストールします。
npm i -D firebase-toolsそして、次のようなスクリプトを書くことでWebのプロジェクトに追加する認証情報を取得できます。
const firebaseTools = require('firebase-tools')
firebaseTools.setup.web().then(config => {
...
})これをwebpackで利用するには次のようなloaderを書きます。
webpackのバージョンは4以上です。
const firebaseTools = require('firebase-tools')function FirebaseConfigLoader () {
const callback = this.async()
firebaseTools.setup.web().then(config => {
callback(null, JSON.stringify(config))
}).catch(err => callback(err))
}module.exports = FirebaseConfigLoader
このloaderは firebase-config-loader.jsで保存します。
次にwebpack.config.jsに追加します。
module: {
rules: [
{
test: /firebase-config\.json$/,
loader: path.resolve('./firebase-config-loader')
},...
そしたら次のコマンドで空のjsonファイルを作成しておきましょう。
echo '{}' >> firebase-config.jsonあとは初期化処理をしているところで次のような形でimportすると、webpackのbuild時にAPI Keyなどの認証情報を埋め込めます。
import firebase from 'firebase/app'
import FirebaseConfig from './firebase-config.json'
firebase.initializeApp(FirebaseConfig)まとめ
今回のコードはgithubに載せているので、細かいところはそちらを参考にしてください。
プロジェクトの切り替え方法はいくつかあるので、これが正解というわけではありませんが、FirebaseやGCPは環境を分ける場合はプロジェクトはたくさん作ることになると思うので、簡単な切り替え方法を理解しておくと今後のFirebaseライフのストレスが減るのではないかと思います。
参考
https://firebase.googleblog.com/2017/04/easier-configuration-for-firebase-on-web.html
