Next.js and Firebase DB full-stack app tutorial | LogRocket Blog
Editor’s note: This tutorial was updated on 8 March 2022 to include the latest information for Firebase’s Cloud Firestore. Setting up databases has never been easier. What used to take a few hours can now be done in a matter of minutes. In particular, with Firebase’s newest NoSQL database, developers can have a database up and running in a couple of clicks. Like Firestore’s Realtime Database, Clou
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
Next.js × Firebase Authentication × Vercel で認証アプリをお手軽に作ってデプロイする | kimizuy blog
本記事は次の技術を利用して、メールアドレスによる認証アプリをデプロイ（公開）するまでの流れをまとめたものである。 Next.js Firebase Vercel（本記事で Vercel と連携する Git クライアントは GitHub です。自身の環境で適宜、読み替えてください。） 実際のサンプル。 Next.js が用意してくれている examples の with-firebase-authentication を利用し認証アプリをデプロイするまでを説明する。この雛形を使うため内容量としては Firebase : Vercel : Next.js = 7 : 2 : 1 くらいの比率になる。サービスやフレームワークに全依存すればだいたいコピペとクリックでいけるぞ！ 前提条件 基本的な Git の操作ができること Firebase や Vercel アカウントを持っていること 本記事では
2020年の個人的Firebaseのまとめ
（この記事はFirebase アドベントカレンダー 2020の記事です） もうアドベントカレンダーの季節かーって感じですね。もともと引きこもるのが好きだったのが、引きこもる大義名分を得た年だったのでずっと家にいて季節感がなかった年でした。 そんなことは関係なく、2020年もFirebaseは進化していたのアップデート内容を個人的興味があったものまとめていきます。 Emulator Suite UI Emulator SuiteはローカルやCI/CDでFirebaseの機能をテストできるツールです。Emulator Suiteが出るまでは本物のFirebaseプロジェクトを利用する必要がありましたが、Emulatorの登場で複数人開発やCIでのテストもやりやすくなりました。 5月のリリースでEmulator SuiteにUIが付きより視覚的にローカルでのテストがしやすくなり、Firebase
絶対にお金を払いたくない精神での動的OGP生成は辛い
OGP 生成をタダでやろうとするとそのデプロイに意外と苦労したという話です。 アプリケーションの技術スタックは React/NextJS、クラウドサービスとして Cloud Storage, Cloud Functions, Vercel での検証です。 こういう設計で、クラウドサービスの選定をどうするかで頭を悩まします。 ただし 無料にこだわるため GCP の基盤は全部 Firebase から利用しています(Firebase の Spark プランでの運用)。 NextJS での SSR 時に meta タグを展開して OGP 画像を作ることが要件で、その OGP 画像はコンテンツに応じて動的に変化するものです。 ここでは動的 OGP をタダで実現するためのサービス選定について扱い、動的 OGP それ自体のやり方は扱いません。 もし気になる場合はmizchi さんの記事や、コードの全体像
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう
note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を守るという点で、同じ水準を要求されます。悪意あるハッカーは常にカモを探していて、もし認証が破られた場合、自分だけではなく大多数に迷惑が掛かります。初心者だから免責されるといったこともありません。全員が同じ土俵に立たされています。 とはいえ、認証基盤を作らないといろんなサービスが成立しません。そういうときにどうするか。 Firebase Authentication で、タイトルの件なんですが、 Firebase Authenticat
Firebaseの存在をフロントエンドから隠蔽するために
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku) - Qiita
最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。 いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。 いままで試したものをまとめてみた。 ほしかったもの 主に開発してるのがCGM系のWebサービスなので、 動的なOGP画像などが設定できる(OGP芸) カスタムドメインが使える 日次のランキング集計などの定期実行ができる が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。 試した5つのパターン 試したのは以下の5パターン。試してみた順で記載。 Nuxt(SSR) + Cloud Function 起動がかなり遅かった。。実装も大変なのでNG Nuxt(SPA) + Firebase Hosting 構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要 Nuxt(SPA) + Netlify プレレンダリ
Firestore導入前に知ってほしい。３層に分解して、メリット・デメリット比較と使いどころを考える - Qiita
はじめに Firebase Cloud Firestoreは個人的に非常に期待しているサービスです。Firestoreは従来のモバイルアプリ開発の3層の概念を統合したサービスだと感じています。 例えばデータ同期するモバイルアプリを作る場合、以下が相当します。 クラウドDB （ex. MySQL) API/WEBアプリケーション (ex. Ruby On Rails) モバイルDB (ex. realm) この３層を一手に引き受けてくれるのがFirestoreの存在です。これらの開発をしないで済むなら「神」のような存在ですよね。 本当にFirestoreは神サービスなのか？ 私の答えは「NO」です。 それでもとても強力で素晴らしいサービスであることは間違いないです。どんなメリット・デメリットがあるのか３層の観点からそれぞれ考えてみました。導入する前に本当にFirestoreを使ってよいのか？
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
Vue.js サーバサイドレンダリング on Cloud Functions for Firebase - Qiita
去年の今頃にNode.jsとGoでサーバサイドレンダリングをしました。 ２０１７年になって自分の中でこうやってサーバサイドレンダリングすればいいなという一つの答えが出たことを書きます。 サーバサイドレンダリングの必要性 サーバサイドレンダリングをやる理由に２つ理由があると思います。 １つはSEO、もう１つが表示の高速化です。 もしGoogleからのアクセスのみを考えているのであればあまりサーバサイドレンダリングするメリットは薄いかもしれません。 GoogleのクローラはJavaScriptも解釈してくれると言われています。 それとsitemapを設定してもindexをしてくれるので個人的にSEOのためにサーバサイドレンダリングすることはとくにないです。 次に表示の高速化のためですがこれはファーストペイントの高速化のためにサーバサイドレンダリングするべきかですが これはその通りでサイトアクセ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
