前置き
もともとGitHub Pages にAngular サイトを公開していた。
正直不満はないが、なんとなくBaaS を使ってみたかった。
なので、Firebase に移行し、ついでにAnalytics を設定した時のメモがこちら。
本編
firebase cli でHosting の設定
firebase cli の指示に従えばOK
あとはメインのブランチにマージしたらGitHub Actions が動きデプロイされる。
個人的に詰まったポイント
- デプロイしたけどアイコンしか表示されない。
- 原因1:firebase.json のhosting.public がデフォルトのpublicだった。
- ここで指定したフォルダ配下のファイルがHosting にアップロードされる。
- firebase init で適当にデフォルトで進めていたからこうなった。
- 原因2:ビルドオプションで
--base-href /project-name/を指定していた- GitHub Pages とFirebase のURL の違いを考えていなかった。
- 原因1:firebase.json のhosting.public がデフォルトのpublicだった。
- (ちょっと違うけど)プルリクを再開できなかった。
- 原因:スカッシュマージしたから。
- Firebase のHosting の画面がダッシュボードにならない。
- 単純に初回だから？時間がかかっただけ。
メモ
- Hosting ではAngular 等のSPA ようにrewrites が設定できる。
- URL に対応しないやつはdestination に設定したファイルが得られる。
- GitHub Actions 生成時にサービスアカウント(機械用のアカウント)とtoken も生成される。
- token はGitHub のsecrets に自動で登録されるので何もしなくてOK。
- このtoken は秘密にする必要がある。
- プルリク時に実行されるGitHub Actions でプレビューが見れる。
- 本番と別のドメインでアクセスでき、動作確認ができる。しかもプルリクごとに別！
@Angular/fire の設定
やったことを箇条書きにすると以下の通り
- Firebase にアプリを登録する。
- 登録したアプリの設定画面からfirebaseConfig を確認。
-
ng add @angular/fireを実行。 - 例の通りapp.config.ts 等を修正。
- dotenv をインストール& 環境変数からfirebaseConfig を取得するts を作成。
- Secrets にfirebaseConfig を登録。
- GitHub Actions で環境変数にSecrets を設定。
個人的に詰まったポイント
- Firebase のコンソール画面からAnalytics を使おうとしたけど使えなかった。
- 原因:アプリを登録していなかった。
- Project があって、その中にアプリがあって、そのアプリからの情報をもとにAnalytics が動く流れ。
- なので、アプリがないとAnalytics も何もない。
- 原因:アプリを登録していなかった。
- Analytics が反応しなかった。
- 原因1:Secrets を設定し忘れていた。
- いくつも設定する必要があり...
- 原因2:Analytics を正しく記載できていなかった。
- 結局よくわかっていないのであとで勉強する予定。
- 原因1:Secrets を設定し忘れていた。
- Analytics のcookie がサードパーティーだった。
- chrome でも警告が出たし、firefox だとエラーが出ていた。
- だけど、どちらも閲覧ページの情報等は取得できていた。
- ちょっとよくわからないのであとで勉強する予定。
メモ
- firebaseConfig のAPI key は公開しちゃっても大丈夫？
- 公式のドキュメントにも問題ないと記載がある。
- 理由はバックエンドリソースへのアクセス制御には使用されないから、とのこと。
- それよりも使えるAPI を制限して余計な穴は開けない方がよいよ、とのこと。
- 使えるAPI の制限はAPI key でどういう操作ができるかは他のルールでやるという役割分担に見える。
- どのアプリからかwebならどのURLからかと、使えるAPIを制限できる。
- Analytics にはストリームという概念がある。
- firebaseConfig のmeasurementId で一意に特定している。
感想
大分難しかった。
そして、分からないことがものすごくあった。
今回の記事は以上です。
前回記事はこちら
詳細見たい人はこちら