結論
Angularのビルドをウォッチモードで起動
$ ng build --watch
Functions用にTypeScriptのビルドをウォッチモードで起動
$ tsc -w
Firebaseのテストサーバーを起動
$ firebase serve
localhost:5000にアクセス
→ これでローカルテストがらくちん！！！
メリット
- CORSなどを気にせず、FirebaseでHosting、Functions、Firesotreを使ったサイトをFirebase上とほとんど同じ状況でローカルテストができる。
- Angular、Functionsどちらも編集ごとのビルドを自動でやってくれる。再起動いらない。
- Functionsを実際デプロイするととても時間がかかるが、ローカルなら素早くテストできる。
デメリット
- Angularの
ng buildはホットリロードが効かないので編集したらブラウザのリロードは必要。そのさいキャッシュが残る場合もあるのでハードリロード推奨。 - Functionsを使用しないテストは
ng serve単体の方がホットリロードが効いて便利
その他
環境変数を使用する場合はローカルに保存
$ firebase functions:config:get > .runtimeconfig.json
// gitにcommitしないように注意
Firebaseのプロジェクトを確認、選択
Firestoreは実際の環境を使用するので注意。
$ firebase list
$ // プロジェクトIDが出てくるのでその中から選ぶ
$ firebase use hogeID
firebase serveがうまく行かない時。
firebase-functionの3.1.0では動かなかったので3.0.2で
package.json
"firebase-functions": "^3.0.2",