🐣
Vite + React + FirebaseでGoogle認証機能を作ったときのメモ
実現したこと
Vite + React（TypeScript） + Firebaseの構成で
- Google認証機能を実装した
- エミュレーターを利用しローカルでテストできるようにした
- 正常にデプロイできることも確認済（ただし、Reactはホスティングしていない）
モチベーション
- Reactでのデータ検索機能はReact、TypeScriptでQiita記事検索機能作ってみたで作ってみたので次はデータ登録機能を作ろうと思った
- Firebaseなら無料で簡単にできそうと何となく思ったので使ってみた
- 特にこだわりはなかったがまずは認証機能を作ってみた（MVPの思想だと先に登録機能を作るのがよさそうだが・・・）
- Create React Appは役割を終えましたという記事を読んだので次はViteを試してみようと思った
主に参考にしたサイト
基本はVite + React + Firebaseのハンズオンに沿って作業。
ちなみに・・・
元々は設計から学ぶFirebase実践ガイドに沿って進めようとしたものの
- ReactではなくVueを利用している
- npmではなくyarnを利用している
- 作成済のコードを元に話を進めている
点が自分とは合わずVite + React + Firebaseのハンズオンベースで進めることにした。
Vite + React + Firebaseのハンズオンから機能的に変更した点
- アカウント作成機能ではなくサインイン機能とした
- Googleでのサインインとした（OAuth）
- ユーザーを取得する処理を省略
エラーになった点
Functionsデプロイ時にインスタンス数に関するエラーが発生
以下のメッセージが出力された。
+ firestore: deployed indexes in firestore.indexes.json successfully for (default) database
instances setting of 100. Either reduce this function's maximum instances, or request a quota increase on the underlying Cloud Run service at https://cloud.google.com/run/quotas.
! functions: You can adjust the max instances value in your function's runtime options:
setGlobalOptions({maxInstances: 10})
Failed to create function projects/vite-react-f4c90/locations/us-central1/functions/helloWorld
最大インスタンス数を調整するために、setGlobalOptions({maxInstances: 10}) と記述するといいよとのことだったので、.\emulator\functions\src\index.ts に以下のように記述。
// 省略
import { setGlobalOptions } from "firebase-functions/v2";
// Set the maximum instances to 5 for all functions
setGlobalOptions({ maxInstances: 5 });
export const helloWorld = onRequest((request, response) => {
logger.info("Hello logs!", { structuredData: true });
response.send("Hello from Firebase!");
});
所感
- それなりに試行錯誤はしたもののFirebaseは比較的簡単なGoogle認証の実現手段と思われる
- Vite速い！これまで利用していたwebpackと比べて3分の1以下の時間でビルドする感覚。仕組みなどは全くわかっていないが、個人開発で使うなら当面はViteでいいかなと・・・
ソースコード
Discussion