Cloud Firestoreを実践投入するにあたって考えたこと - Qiita
はじめに Firebase Realtime DBを実践投入するにあたって考えたことを読んで頂いてありがとうございます。 多くの方から「いいね」を頂いて、今回のこの記事を書くモチベーションになりました 本当にありがとうございました！ さて、CloudFirestoreは、Firebase Realtime Databaseとは全く違うデータベースです。特にSubCollectionやQueryが導入されたことにより、リレーションシップの設計に関して大きく異なります。 この記事では、主にCloudFirestoreにおけるリレーションシップの設計方法から、アプリ・CloudFunctionsに至るまでを幅広く解説して行こうと思います。 次の記事ではデータベースの歴史を解説しています。 RDBの限界とNoSQLの登場 Cloud Firestoreでの開発について 私の経験上確実に断言できるこ
Next.jsにFirebase Authenticationを導入するときに考えるべきこと - Ateam Tech Blog
エイチームグループの子会社のエイチームライフデザインでフロントエンドエンジニアをしてます。小堀輝(@anneau)です。 今回はNext.jsとFirebase Authenticationについてお話ししようと思います。 はじめに ユーザーが複数端末を持つことが多い現代において、私たちが開発するWebアプリケーションでは、異なるデバイスで同じ体験をユーザーに提供するために、ユーザーIDを識別し、データを保存することはとても重要かと思います。 もちろん、独自にユーザーを識別するシステムを開発することは可能ですが、複雑なロジックになってしまい、メンテナンスコストが嵩んだり、不具合につながってしまう可能性があります。 そこで、議論のテーブルに上がってくるのが認証基盤を提供してくれるSaaS。 今回は、その中でもメジャーなFirebaseについて、実装する上で直面した課題をあげ、あらかじめ考えて
Vercelに Firebase Admin SDK の秘密鍵の情報を設定する
ローカル環境での開発などではFirebaseのコンソールから作成・ダウンロードした秘密鍵（JSONファイル）をルートなどに配置して以下のように読み込んで秘密鍵を使える。。 const admin = require("firebase-admin"); if (!admin.apps.length) { const serviceAccount = require("path/to/serviceAccountKey.json"); firebaseApp = admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: process.env.FIREBASE_DATABASE_URL, storageBucket: process.env.FIREBASE_STORAGE_BU
firebase-adminでfirestoreのフィールドを一括追加する
概要 Firestoreのフィールドを一括で追加する 背景 firestoreをfirebaseコンソールから直接ぽちぽちと更新することはできますが、正直面倒くさいです なので、コマンド一発で全て更新したいと考えました 前提 node v16.13.2 npm 8.10.0 "firebase-admin": "^10.2.0" yarn 1.22.11 参考 クエリ参考 https://www.wakuwakubank.com/posts/723-firebase-firestore-query/ nodeプロジェクトを作成する firebaseフォルダを作成 mkdir firebase フォルダ名は任意 firebaseフォルダに移動 cd firebase npmを初期化 yarn init firebase-adminパッケージを追加 yarn add firebase-admi
型安全firestore
firestoreをTypescriptで使うときに、型つかないので少しはまともそうな方法を紹介する。長いので最後のまとめだけ読めばOK。 firestoreの問題点 get()すると全て{[key: string]: any}で返ってくる Dateが勝手に変換される firebaseとfirebase-adminで型が微妙に違うのでエラーでる 一つずつ対応策を書く。 1: getの返り値を型付けする これは自分でキャストする方法と、withConverterを使う方法がある。 キャストを使う interface User { uid: string; address: string; age: number; } const getUserDoc = (uid: string) => DB.doc(`user/${uid}`) as firebase.firestore.Document
TypeScript を使ってローカル環境で Firebase をアドミン操作する - Qiita
やりたいこと アドミン操作をローカルで行えると、ちょっと集計したいときとかデータを書き変えたいときに便利です。アドミンならセキュリティルールを無視できますしね。 プラスして、型の恩恵が欲しいので TS を使いたい。 実装 TS プロジェクトを作成し設定 必要なパッケージを導入 { "compilerOptions": { "esModuleInterop": true, "allowSyntheticDefaultImports": true, "preserveConstEnums": true, "strictNullChecks": true, "sourceMap": true, "allowJs": true, "target": "es5", "outDir": ".build", "moduleResolution": "node", "lib": [ "es2015" ],
firebase-admin initializeApp の違い - Qiita
firebase-adminのinitializeAppについて、「書き方いろいろ出てくるけど何が違うんだ？」と思ったのでまとめる。
How to use Firebase Authentication in Next.js 13, Server Side with Admin SDK
How to use Firebase Authentication in Next.js 13, Server Side with Admin SDK I'm new to this world of Full Stack Frameworks like Next.js, SvelteKit, Remix... But I know all the advantages it has so I wanted to use it to create a project I'm working on. I love Firebase and I wanted to have it in the project, because it just has everything I need for almost any project, the problem I had is that Nex
Nextアプリでhooks使ったFirebase Analyticsの実装例 - Qiita
本記事の目的 Firebaseを導入したNextアプリ上で、Firebase Analyticsを使うときの具体的な実装例を示します。 今回はhooksを使って実装しました。 あくまで1実装例なので、ベストな方法の紹介というわけではないです。 というかあまり考えずに実装したので、もっといい方法はたくさんあると思います。 FirebaseやAnalytics自体の説明や、導入方法は説明しません。 Firebase Analyticsを使ってやりたいこと 最近個人開発でサービスをリリースしたので、それがどのように使われているかを知るために、ユーザーのアクション(=イベント)を記録したい。 webサービスなのでにイベントのユーザーユニーク性は気にしないが、一度リロードするまでは各イベントの記録は一回度ずつにしたい。（何度も同じ操作をしたとしても最初の一回だけ記録したい） logを取得するメソッド
Firebase Admin の二重初期化エラーの対策（modular版）
経緯 Firebase Admin Node.js SDKのmodular(v10)以降では、公式の通り、以下のように初期化を行います。 import { initializeApp } from 'firebase-admin/app'; const firebaseAdmin = initializeApp({ ...略 }); 一方で、アプリケーションの挙動によってこのファイルが二回以上読み込まれるケースがあると、次のようなエラーが発生することがあります。 error - FirebaseAppError: The default Firebase app already exists. This means you called initializeApp() more than once without providing an app name as the second ar
Next.jsとFirebaseで初回ロードでエラーが出る問題の解決
import fb from "firebase/app"; import "firebase/auth"; import 'firebase/firestore'; export const firebase = !fb.apps.length ? fb.initializeApp(config) : fb.app() export const firestore = firebase.firestore() 解説 ReferenceError: navigator is not defined Server Errorの対処法 どうやらNext.jsはサーバーサイドでレンダリングするタイミングがあるので、その時におかしな挙動になってしまうらしい。まだSSRに疎いのでたまに遭遇する。 最初は下記の記事を参考にwindowがundefinedの時は初期化しないようにした。 これを // a
Next.jsをFirebase Hostingで使う
Next.jsをFirebase Hostingにホストする方法を説明します。 Setup Next.js & Firebase Hosting Next.jsのexamplesのwith-firebase-hostingを使います。 Next.jsのプロジェクトが出来たら、firebase loginでFirebaseにログインします。 さらにテスト用のプロジェクトをFirebase Consoleで作成します。 Firebaseのプロジェクトを作ったら、firebase projects:listでProject IDを確認します。 ここで確認したIDを.firebasercに記述します。
さくらで取得したドメインから、特定のサブドメインをFirebase Hostingで表示する（ドメイン設定） - Qiita
さくらで取得したドメインから、特定のサブドメインをFirebase Hostingで表示する（ドメイン設定）FirebaseFirebase-Hosting はじめに いつごろだったか忘れましたが、Firebase Hostingのドメイン設定で特定のサブドメインに対してFirebase Hostingでデプロイしたサイトに適用することができるようになりました。 今回はちょうどさくらインターネットで取得したドメインの中で、あるサブドメインだけをHostingでデプロイしたサイトに接続したかったので、その時にやった内容を共有します。 というタイミングで、 Hostingのコンソール画面がちょっと変わった ために、キャプチャの一部などに差異があります。ご了承ください。 いちおう注意として、自分はこのあたりのネットワーク知識がガバガバなので、解説もかなりガバガバです。なにかやろうとしてることのヒ
認証機能を（ほぼ）作らずに認証付きバックエンドを3日で作っちゃった話 - Google CloudとFastAPIのエコシステムに全力で乗っかろう - Lean Baseball
心身のコンディション維持と体調管理のため, 毎日運動と血圧・体重・脈拍の計測をしているマンです*1. 新たな個人開発かつ, 趣味と実益（&学習）を兼ねて, プロダクトオーナーやりたい宣言したので, 個人開発としてプロダクト作りたい ネタどうしようかな...そうだ！ 毎日運動と血圧・体重・脈拍の計測 に役立つ何かを作るぞ！ 自分でSaaSを開発する練習もしたいので, スタートアップがやりそうなアーキテクチャでちゃんと作ろう と, 昨年末に思いつき「自分専用のヘルスケア領域SaaS」としてモノを作っているのですが, データの入力元となるフロントエンドと, 記録したデータの可視化&リコメンドに注力したい ↑の理由で, バックエンドの開発は正直な話思いっきり手を抜きたい 一番面倒くさいと言っても過言ではない認証機能（ユーザー管理）を開発ゼロでやりたい！！！ ...と思いつき, 知識と余暇の時間を総
React + Firebase + Hasuraで体験する快適なGraphQL生活
元々graphql-rubyとReactで生きていたんですが、どうやらHasuraなるものが良いらしいと知り、掲題のスタックで社内書籍管理サービスをつくってみました。 楽しかったのでちょっと書いてみます。 具体的には認証つきHasuraからusersを取得できるところまで。 Apolloは使わず、FetchでPOST投げちゃいます。 また、コード自体は本番運用に耐えうるものでは全くないので、 概念を理解する・触りを体験して全体像をつかむくらいの用途にとどめてください。 なお、Firebaseを利用する場合はCloudFunctionsを利用するので従量課金のBlazeプランにする必要があります。(といっても個人で遊ぶ分には無料枠で事足りる) 認証にAuth0を利用するのであればそこは考慮しなくてOKです。でもあれ真面目に使うとなると高いですよね(?) TL;DR HasuraはRDB版Fi
1年ほどFirebase x TypeScriptで開発してきて定まってきた僕なりの書き方 - Qiita
はじめに 去年(2018)春ごろから、Firebase x React x TypeScriptでアプリケーションを作成する機会が多くなり、 自分の中である程度書き方が固まってきたので、その内容をまとめることにしました。 フロントエンドの実装を想定した説明をしますが、サーバーサイドも似たような構造で筆者は書きます。 Firebase、TypeScriptを使ったことがないかたは、少し難しいかもしれません。 「俺はこのような書き方してるよ〜」などあれば、コメントで教えて欲しいです！ アーキテクチャについて 筆者はFirebaseプロジェクトでの設計では、レポジトリパターンを使って設計することが多いです。 ※厳密にレポジトリパターンになっているかといわれると、なっていないかも... 下記がフォルダ構造です。
Flutter製SNSを2ヶ月で作るために【Firebase編】
Flutterがめちゃくちゃ良いですね．なんと言ってもホットリロードとVSCodeが使える素晴らしさ．しかし，Flutterで開発していると初心者向けの記事か玄人向け（本当は僕の頭では理解できないだけ）の記事が多い気がします．下の上くらいの僕の記事を必要としている誰かのために，下の上の知識でSNSを作るには？なる記事を書いていきたいと思います．使っている状態管理はriverpod+StateNotifier+freezed+Hooksです． 今回の記事ではFirebase周りに焦点を当てていきます． まず宣伝 作ったアプリはこれです． （公式以外の）主な参考文献 Komercoの記事は，ほぼ完成してから読んだので参考にできてないですが非常に分かりやすかったです．（もっと前に読みたかった...） （以下で引用するときには上から[1]，[2]，[3]，[4]，[5]の記事と呼ばせていただきます
Firebase + Spreadsheet で Slack Bot を作ったら社内用語辞典の運用が3倍楽しくなった話
最近作った Slack Bot が好評だったのでまとめてみました！ どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot（社内では tell-me-paccho）という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt（TypeScript）にて作ってみました（アイデアをくれた@しかじろうさんに感謝🙏）。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsでSSGしてFirebaseでホスティング | Narumium Blog
Firestore subcollection vs array