Angularのプロジェクトをとりあえず動かすためのFirebase連携

TL;DR

キャッシュ関連でハマるのは時間がもったいないという話

Firebaseを使ってみる

・herokuと似た感じで使える(NoSQL/SNS認証はFirebase、cron周りはherokuが優秀っぽい)
・とりあえずデプロイして自宅外でもイメージ確認できるように走らせてみたかった
・できればCIと繋ぎたいので、先に環境のイメージをしておきたかった
・PaaS、SaaS、IaaSの体感比較をとりためているのでその一環(ずっと記事が完成しない…)

やったこと

1.　Firebaseのアカウント登録→FirebaseCLIのインストール
2.　$ firebase loginでfirebaseへログインする
3.　$ firebase initをAngularディレクトリのルートパスで実行。
　　　(Angularはほぼほぼ最小構成の作成済みディレクトリを使用)
3.　Firebaseの利用について聞かれるのでHostingを選択、publicをルートにするか聞かれるが
　　デフォルトでいいのでそのままエンター、SPAか聞かれるので"y"入力しエンター
4.　$ ng build --prod でビルドしてdistフォルダと下位ディレクトリ作成
5.　firebase.jsonの"public"の設定をdist以下のパスで指定(ドメイン以下ディレクトリは指定可)
6.　$ firebase deployでデプロイ実行、$ firebase openでデプロイ先ページを表示

つまった箇所

・デプロイしてもfirebaseの作成ページから変更されない
　→firebase.jsonで初期表示時のフォルダパスを設定していることがわかったのでdist内にアクセスするよう変更

firebase.json

"hosting": {
  "public": "dist",  // dist以下にフォルダが作成されている場合はそのフォルダ名を指定する
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

・firebase.jsonのデプロイ先設定を変更してもデフォルトページが表示された
　→Chrome側でキャッシュが残ってたらしく、スーパーリロードで解決した

まとめ

・デフォルトの設定を的にAngular側できちんと設定していればキャッシュクリアだけで対応できたので、
　忘れがちになるキャッシュクリア周りはこれからもちゃんと実施したい。

・「command + shift + r」でのスーパーリロードを忘れないように使っていきたい。

・次回はAngular + CircleCI + Firebaseの自動デプロイを試す予定。