Firebase + Vue.jsとかで開発するとき
前提
- firebaseのバックエンドとVue.jsを同じディレクトリ内で開発している
- functionsへのアクセスをfirebase.jsonでrewriteして使っている
- Vue-cliなどを使ってプロジェクト作成を丸投げしていた（人）
Vue devtoolsはとても便利です。ただしVueをdevelopモードでビルドしないと発動しません。
バックエンドをfirebase functions等で同じプロジェクト内で開発している場合、大抵の場合firebaseのrewriteを使いたいので、firebase serveでローカル環境にデプロイするんですが、Hostingのディレクトリにビルドしてからfirebaseのローカル環境を立ち上げるとデフォルト設定だとproductionモードでビルドされているのでVue側のデバッグが非常に面倒。
vueとfirebaseでそれぞれserveする選択肢もあるんですが、CORS周りで死ぬ。
ググって5秒で見つけた解決策
Vue.config.devtools = true;をapp.jsとかのエントリーポイントに書く。
デプロイ前だけコメントアウトでもするのか知らないけど、とても事故りそう…
イケてる解決→npmスクリプトの方を触る
npm run serveの中身を書き換えて、developモードでビルドしてそのままfirebaseのローカル環境を立ち上げることにした。
Vue-cli3でプロジェクト作った素の状態がこちら
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
1コマンドでvueをdevelopでビルドしてローカルfirebaseでホスティングする
"scripts": {
"serve": "vue-cli-service build --mode develop & firebase serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run serveを実行するだけで、vue devtoolsの効くfirebase hosting & functionsのローカル環境が立ち上がる。（もちろん他のサービスを使っている場合はそちらも）嬉しい！
