みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Firebase

静的なHTMLをFirebase HostingにアップしてBasic認証を掛ける 🔑

普段は静的サイトのホスティングに GitHub Pages か Netlify をつかうことが多いのですが、Basic認証をかけたい場合、GitHub Pagesでは実現できないですし、Netlifyでは有料の機能なので、どうしようかなと思っていました。一旦は、 Heroku を使おうかなとも…

Firebase Admin SDKを使って匿名ユーザーを一括で1000件削除する 🔥

Firebaseで匿名認証を作成した際、自動クリーンアップを有効にすれば30日間で匿名ユーザーが削除されるようになります。firebase.google.comしかし、場合によってはスクリプトで匿名ユーザーをまるっと削除したい場合もあるでしょう。 そんなときに使えるス…

Firebase Authenticationを使って、メールアドレスとパスワード認証で作成したユーザーのメールアドレスを変更する ✉️

ドキュメント を見ながら、updateEmailを使って実装してみました。firebase.google.com import { updateEmail, User } from 'firebase/auth'; async function changeEmail(currentUser: User, newEmail: string) { return updateEmail(currentUser, newEmail…

Firebase HostingにホスティングしたウェブサイトからCloud FunctionsのHTTPS関数を実行する 🔥

発行されたURLを普通に叩くとクロスオリジンになってしまうのでどうしたものかと思っていたのですが、ホスティングのリライトルールを使うと回避できます。firebase.google.comというか、公式のドキュメントに詳しい手順が書いてあるので、その通り進めればF…

プロトタイプでCloud Firestoreをさささっと使う(モジュールバンドラー無し ver.) 🔥

本番環境でCloud Firestoreを使う場合、セキュリティルールをしっかり設定しないといけないですが、プロトタイプとして誰でも読み書きOKとしてさささっと実装したい場合もあります。今回は、 ログイン不要で誰でもデータを読み書きできる モジュールバンドラ…

Firebase Cloud Messaging + Cloud Functionsを使って、iOS16.4のPWA(Progressive web apps)にプッシュ通知を送る ✉️

前回は、Navigator.setAppBadgeを使ってアイコンにバッジをつけました 。blog.kimizuka.org今回はトークンをデータベースに登録して、サーバからプッシュ通知を送信してみます。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブ…

Cloud Firestoreに保存された値が変更された際にExpoで作ったアプリに通知を送信する 📛

Cloud Firestore トリガー を使って、ドキュメントに変更があった際にプッシュ通知を送ってみました。firebase.google.com 前提 Cloud Firestoreにデバイストークンを保存する(tokensコレクションにデバイスIDをドキュメントIDにして保存する) Cloud Fires…

Expoアプリのプッシュ通知用デバイストークンをCloud Firestoreに登録する 🔥

関連記事 Expoでつくったアプリにローカルサーバからプッシュ通知を送る blog.kimizuka.org Expoでつくったアプリにサーバからプッシュ通知を送る blog.kimizuka.orgこれまで、ローカルサーバからプッシュ通知送信、サーバからプッシュ通知送信を試しまし…

Cloud Functionsを定期的に実行する ⏰

昔はCloud Functionsに加え、Cloud Pub/Sub、Cloud Schedulerで設定が必要だったようですが、いまはCloud Functionsで設定すれば、自動的にCloud Pub/SubのトピックとCloud Schedulerのジョブが作成されます。便利な時代になりましたね。firebase.google.com…

Expo(44.0.0) + Firebase(9.6.8)でアプリをつくった際に「Can't find variable:IDBindex」と表示される際の対策 🔥

結論 firebase 9.6.7を使ったら解決した。(expoは44.0.0) ことの発端 こちらのドキュメントをみながら、ExpoアプリにFirebaseを導入しようとしたのですが、iOSでもAndroidでもinitializeAppのタイミングで「Can't find variable:IDBindex」とエラーが表示…

Firebase Hostingにホスティングしたサイトを削除する 🔥

コンソールからは削除できず、firebase-toolsを使い、 firebase hosting:disableを実行すれば削除できます。

Firebase HostingでURL末尾の.htmlを削除する設定にするとNext.jsのホスティングがいい感じになる 🔥

これまで、Next.jsのプロジェクトをFirebase Hostingにデプロイするときは、Next.jsの設定を変更してURLの末尾にスラッシュをつけていました。blog.kimizuka.orgが。逆に、Firebase Hostingの設定を変更してURL末尾の.htmlを削除することができることを知り…

Next.js + Firebase Hosting で構築したサイトにGoogleアナリティクスを導入する 📈

Firebase HostingにはGoogleアナリティクスとの連携機能がついています。firebase.google.com僕はこれまで連携機能を使ったことがなく、Firebase Hostingを使っていても、タグやnpmでアナリティクスを導入していたのですが、この度初めて使ってみました。連…

なぜかfirebase deployに失敗するときは一度ログアウトしてみると解決することがある 🔥

タイトルにすべてを書いてしまったので、本文に書くことがなくなってしまったのですが、 ある日、 firebase deploy で、Firebase Hostingにデプロイしようと試みたところ、 Error: Failed to get Firebase project PROJECT_NAME. Please make sure the proje…

NuxtJS + TypeScript(nuxt-property-decorator) + Firebase Hosting + Cloud Functions でSSR環境をつくった際に {"code": "MODULE_NOT_FOUND"} になってしまったので調査した 🔥

いま振り返ると単純な話だが、ものすごくはまった。 ことの発端 結論 疑ったこと ことの発端 Nuxt.js + Firebase Hosting + Cloud Functions でSSRを実現しているプロジェクトが動かなくなった {"code": "MODULE_NOT_FOUND"} と表示されるので、なにかモジュ…

Firebaseのリアルタイムデータベースで読み込みは誰でもOK、書き込みは事前に許可したGoogleアカウントのみに限定するルールの書き方 🔥

結論 背景 Realtime Databaseのルールの書き方 ルールのサンプル 全員読み書き可 全員読み書き不可 全員読み込み可、書き込み不可 全員読み込み可、事前に指定したGoogleアカウントのみ書き込み可 注意事項 結論 { "rules": { ".read": "true", ".write": "a…

Cloud Functionsのリージョンは簡単に変更できるが、Firebase Hostingと組み合わせて動的なHTMLを返そうとすると変更すると問題が出てくる 🌍

すべてはドキュメントに書いてあることではあるのですが、週末にほんのりはまったのでメモを残しておきます。 Cloud Functionsとは Google Cloud Functions は軽量なコンピューティング ソリューションであり、デベロッパーはサーバーやランタイム環境を管理…