firebase functions next example

Firebase-GCP-Examplesの新しい例

---

next.js ssr firebase with firebaseホスティングのクラウド関数のSSRアプリ

Firebaseホスティングを備えたFirebaseのクラウド関数に関するnext.js ssr Reactアプリをホストします。

これは、新しいプロジェクト構造、Firebaseの部分展開、展開前/展開後のフックのFireBaseサポート、およびこれらの新機能が解決する問題を説明するために、新しい投稿が書かれている媒体投稿です。

なぜ？

SSR Next.jsアプリをクラウド関数でホストします。低コストの自動スケーリングSSRアプリエクスペリエンスを可能にし、FirebaseのSweet Developer Experienceを活用します。

どうやって？

FireBaseホスティングは、サーバー側にレンダリングされたnext.jsアプリを提供するクラウド関数へのルートを書き換えることができます。すべてのルートをキャッチする書き換えルールを使用して、FireBaseクラウド機能URLの代わりにSSRアプリをFireBase Hosting URLでホストできます。

の代わりに：

https://us-central1-<project-name>.cloudfunctions.net/<function-name>

使用できます：

<project-name>.firebaseapp.com/

次に、JSを使用して、Hotモジュールのリロード、サーバー、クライアント側のルーティング、ルートレベルコードスプリッティング、ルートプリフェッチなどでSSR反応を実現できます。

SSRでSSRをFirebaseでホストすることに関する多くの問題がこの方法で克服されました。ここで問題を作成する前に、中程度の投稿を参照してください。

重要！

• この例では、 yarnを介してnode_modules/.bin/フォルダーから実行される開発としてfirebase-toolsを使用します。 Yarnは、 package.jsonまたはnode_modules/.bin/のバイナリスクリプトのいずれかからスクリプトを実行します。 npm run実行可能ファイルの.binフォルダーをチェックしないため、 npmを使用する場合は、 node_modules/.bin/またはfirebase firebase-toolsをグローバルにインストールし、devdepsリストから削除するためにスクリプトを変更する必要があります。 npmの使用方法については、Next.js Repoの例をご覧ください。

• 関数エミュレータがこれを必要とするため、ノード6.11.5を実行していることを確認してください。 ASDFをバージョンマネージャーとしてお勧めし、ASDF .tool-versionsファイルを追加してノードランタイムを定義しています。

• _app.jsを使用している場合は、展開されたクラウド機能で次のエラーを受信できます。

   { Error: Cannot find module '@babel/runtime/regenerator'...
  

  next.jsは@babel/runtimeを依存関係として持っているにもかかわらず、このプロジェクトで依存関係として直接インストールする必要があります。

インストール

git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

FireBase CLIにログインします

これは、グローバルインストールの代わりに開発者依存関係として使用されます。これはもっと良い開発の経験であることがわかりました。

yarn fblogin

next.js開発

標準のNext.JSホットモジュールのリロードなどを備えた開発

yarn dev

ローカルテスト

yarn serve

これはついに機能します！注： serveコマンドがプロジェクトが存在することを確認するため、 .firebasercファイルで定義されている有効なFirebaseプロジェクトIDが必要です。これは<project id>がURLで使用されているため、展開されたアプリケーションと並べる相対ルートを確保することに関係すると思います。

ここで実際に起こっていることをより深く掘り下げたい人のために、このコマンドを実行します。

yarn serve --debug

FireBaseに展開します

プロジェクトをFireBaseプロジェクトに接続する必要があります。 .firebasercで名前を編集するか、 firebase initを実行し、ファイルをオーバーライドしないように選択します。

ホスティングリソースと書き換えクラウド機能を展開します

yarn deploy-app

SSRには使用されていない機能を展開します

関数グループで指定されたすべての関数を展開します。このスクリプトを編集して、機能グループを追加します。 - 関数グループの使用方法については、Partial Deploys Docsを参照してください。

yarn deploy-funcs

すべてをfirebaseに展開します

yarn deploy-all

クリーンdistフォルダー

yarn clean

コード互換性に関するメモ

すべてがUbuntu 17.04でBashでテストされました。これは、変更せずにWindowsのUbuntuでBashで動作するはずです。 Windowsネイティブサポートが必要な場合は、Windowsの互換性に取り組むことができるように、問題を提出してください。テストするためにデバイスにアクセスできないため、MacOSエラーを報告してください。私の開発環境はここにあります。