静的ファースト：サーバーレスレンダリングを備えた事前に生成されたジャムスタックサイト

Jamstack Architectureは注目を集めており、Webサイトを構築する効率的な方法を提供しています。

Jamstackの核となる原則の1つは、プレレンダリングです。これは、一連の静的リソースを事前に生成して、CDNSまたはその他の最適化された静的ホスティング環境からの訪問者のサービスを最速の速度および最低間頭上で可能にすることを意味します。

しかし、もし私たちが事前にウェブサイトを事前に生成するなら、どうすればそれらをよりダイナミックに見せることができますか？頻繁に変更が必要なWebサイトを構築する方法は？ユーザーで生成されたコンテンツを処理する方法は？

実際、これはサーバーレス機能の理想的なアプリケーションシナリオです。 JamstackとServerLessは最高のパートナーであり、お互いを完全に補完します。

この記事では、パターンについて説明します。これは、以前のページのバックアップソリューションとしてサーバーレス関数を使用して、ほぼ完全にユーザー生成コンテンツで構成されるWebサイトでです。 404ページがサーバーレス関数であり、サーバーレスレンダリングを動的に追加する楽観的なURLルーティング手法を採用します。

複雑に聞こえますか？多分。しかし、それは機能しますか？絶対に効果的です！

このユースケースについて学ぶために、デモWebサイトを試してみることができます。ただし、この記事を読んだ後に試してみてください。

あなたは戻ってきましたか？素晴らしい、それに飛び込みましょう。

このサンプルWebサイトの哲学は次のとおりです。友人に送信する温かいメッセージと仮想励ましのメッセージを作成しましょう。メッセージを書き、ロリポップ（または私のアメリカ人の友人のためにアイスキャンディー）をカスタマイズし、受信者と共有するURLを取得できます。それだけです、あなたは彼らの日を照らしました。これより良いものは何ですか？

従来、いくつかのサーバー側のスクリプトを使用してフォーム送信を処理し、データベースに新しいLollipops（ユーザー生成コンテンツ）を追加し、一意のURLを生成します。次に、より多くのサーバー側のロジックを使用して、これらのページにリクエストを解析し、データベースを照会してページビューを入力し、適切なテンプレートをレンダリングし、ユーザーに返すために必要なデータを取得します。

これは理にかなっているようです。

しかし、拡大するのにいくらかかりますか？

技術的なアーキテクトと技術監督者は、プロジェクトの範囲を評価する際にこの問題に遭遇することがよくあります。彼らは、成功した状況に対処するのに十分なリソースを計画、支払い、配分する必要があります。

この仮想LollipopのWebサイトは、普通の装飾ではありません。私たちは皆、お互いに肯定的なメッセージを送りたいので、このサイトは私を億万長者にします！ニュースが広がるにつれて、交通レベルは舞い上がります。サーバーが重い負荷を処理できるようにするための良い戦略が必要です。いくつかのキャッシュティア、いくつかのロードバランサーを追加するかもしれませんし、データベースサーバーとデータベースサーバーを設計して、これらすべてのロリポップを作成して提供する必要性に圧倒されることなく負荷を共有できるようにします。

しかし…私はこれらのことをする方法がわかりません。

そして、これらのインフラストラクチャを追加して実行し続けるのにどれくらいの費用がかかるかわかりません。これは複雑です。

だから、私は事前レンダリングでできるだけホスティングを簡素化するのが好きです。

静的ページを提供することは、各訪問者のビューをデマンドで生成するためにロジックを必要とするWebサーバーからページを動的に提供するよりもはるかにシンプルで安価です。

私たちは多くのユーザー生成コンテンツに取り組んでいるので、データベースを使用することはまだ理にかなっていますが、私はそれを自分で管理しません。代わりに、サービスとして使用できる多くのデータベースオプションのいずれかを選択します。 APIを介してやり取りします。

Firebase、Mongodb、またはその他のデータベースを選択する場合があります。クリスは、サーバーレスリソースに関する優れたWebサイトでこれらのリソースの一部をまとめました。これは、探索する価値があります。

この場合、ファウナをデータストアとして選択します。 Faunaは、データを保存およびクエリするための優れたAPIを提供します。それは非SQLスタイルのデータストアであり、まさに私に必要なものです。

重要なことに、Faunaはデータベースサービスを提供するための完全なビジネスになりました。彼らは私が決して持っていない深いドメインの知識を持っています。このようなデータベースAs-a-Serviceプロバイダーを使用することで、高可用性のインフラストラクチャ、容量とコンプライアンスのセキュリティ、熟練したサポートエンジニア、広範なドキュメントなど、プロジェクトの専門家データサービスチームを継承しました。

自分でやるのではなく、そのようなサードパーティサービスを使用してください。

アーキテクチャTL; dr

概念実証に対処するとき、私はしばしばいくつかの論理的なフローを落書きします。これが私がこのウェブサイトのために作った落書きです：

そしていくつかの説明：

1. ユーザーは、通常のHTMLフォームに記入して、新しいLollipopを作成します。
2. 新しいコンテンツはデータベースに保存され、その提出は新しいサイトの生成と展開をトリガーします。
3. サイトが展開されると、新しいLollipopは一意のURLを介してアクセスできます。これは、データベースクエリやサーバーに依存することなく、CDNからすばやく提供される静的ページになります。
4. サイトの生成が完了するまで、静的ページとして新しいLollipopにアクセスできません。 Lollipopページへのリクエストが失敗した場合、動的クエリデータベースAPIを介してLollipopページを動的に生成するページに戻ります。

このアプローチでは、最初に静的/事前に生成されたリソースを想定し、その後、静的ビューが利用できない場合に動的なレンダリングに戻ります。これは「静的ファースト」と呼ばれます。

より詳細な説明

ウェブサイトのコードを直接掘り下げることができます（オープンソースであり、好きなだけ探索できます）、さらに説明することができます。

より深く掘り下げて、この例の実装を探求したいですか？わかりました、私はより詳細に説明します：

• データベースからデータを取得して、各ページを生成します
• サーバーレス関数を使用してデータベースAPIにデータを公開します
• 完全なサイト再生をトリガーします
• ページが生成されていない場合は、オンデマンドをレンダリングします

データベースからページを生成します

後でデータベースにデータを公開する方法について説明しますが、最初に、データベースにすでにいくつかのエントリがあると仮定しましょう。各エントリのページを含むWebサイトを生成します。

静的なウェブサイトジェネレーターはこれに非常に優れています。データを処理し、テンプレートに適用し、提供する準備ができているHTMLファイルを出力します。この例には、任意のジェネレーターを使用できます。比較的単純で、サイトの生成が速いため、私は30を選びました。

いくつかのデータを110に提供するために、多くのオプションがあります。 1つの方法は、構造化されたデータを返すJavaScriptを提供することです。これは、データベースAPIのクエリに最適です。

私たちの110のデータファイルは次のようになります：

 <code>// 设置与Fauna 数据库的连接。 // 使用环境变量进行身份验证// 并访问数据库。 const faunadb = require('faunadb'); const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); module.exports = () => { return new Promise((resolve, reject) => { // 获取最新的100,000 个条目（为了我们的示例） client.query( q.Paginate(q.Match(q.Ref("indexes/all_lollies")),{size:100000}) ).then((response) => { // 获取每个条目的所有数据const lollies = response.data; const getAllDataQuery = lollies.map((ref) => { return q.Get(ref); }); return client.query(getAllDataQuery).then((ret) => { // 将数据发送回Eleventy 以用于站点构建resolve(ret); }); }).catch((error) => { console.log("error", error); reject(error); }); }) }</code>

私はこのファイルをlollies.jsと名付けました。それは、ロリーズという名前のコレクションで、返されるすべてのデータを110で利用できるようにします。

このデータをテンプレートで使用できるようになりました。そのデータを取得して各プロジェクトのページを生成するコードを表示する場合は、コードリポジトリで表示できます。

サーバーなしでデータを送信して保存します

新しいLollipopページを作成するときは、ユーザーコンテンツをデータベースにキャプチャして、将来特定のURLのページに入力できるようにする必要があります。これを行うには、従来のHTMLフォームを使用して、適切なフォームハンドラーにデータを公開します。

フォームはこのように見えます（または、リポジトリの完全なコードを参照してください）：

<code></code>

受信者は、送信者がホスティングスキームにWebサーバーを持っていない良いことを言うため、このフォームから送信されたHTTPの投稿リクエストを処理する場所を設計する必要があります。これは、サーバーレス機能に最適なユースケースです。これにはnetlify関数を使用しています。必要に応じて、AWS Lambda、Google Cloud、またはAzure機能を使用できますが、Netlify機能ワークフローのシンプルさと、サーバーレスAPIとUIを同じコードリポジトリに保持するという事実が気に入っています。

フロントエンドにバックエンドの実装の詳細が漏れないようにするのは良い習慣です。明確な分離は、物事が移植や整頓を容易にするのに役立ちます。上記のフォーム要素のアクションプロパティをご覧ください。それは私のウェブサイトで /newというパスへのデータを公開しますが、これはどのサービスと通信するかを示唆していません。

リダイレクトを使用するのが好きなサービスにルーティングできます。このプロジェクトで構成するサーバーレス関数に送信しますが、必要に応じて他の場所にデータを送信するために簡単にカスタマイズできます。 Netlifyは、ユーザーが適切な場所に非常に迅速にルーティングできるように、CDNレベルでトラフィックを向けるシンプルで高度に最適化されたリダイレクトエンジンを提供します。

次のリダイレクトルール（私のプロジェクトのnetlify.tomlファイルにあります）は、netlify関数によってホストされているnewlolly.jsというサーバーレス関数のリクエストをプロキシをプロキシします。

 <code># 将“new”URL 解析为函数[[redirects]] from = "/new" to = "/.netlify/functions/newLolly" status = 200</code>

そのサーバーレス関数を見てみましょう：

• 新しいデータをデータベースに保存し、
• 新しいページの新しいURLを作成します
• ユーザーを新しく作成したページにリダイレクトして、結果を確認できます。

まず、フォームデータを解析し、Faunaデータベースに接続し、新しいLollipopの短く読みやすいIDを作成するために、さまざまなユーティリティが必要になります。

 <code>const faunadb = require('faunadb'); // 用于访问FaunaDB const shortid = require('shortid'); // 生成短唯一URL const querystring = require('querystring'); // 帮助我们解析表单数据// 首先，我们使用我们的数据库设置一个新的连接。 // 环境变量帮助我们安全地连接// 到正确的数据库。 const q = faunadb.query const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET })</code>

次に、サーバーレス関数を処理するためのコードをリクエストに追加します。ハンドラー関数は、フォーム送信から必要なデータを取得するリクエストを解析し、新しいLollipopの一意のIDを生成し、新しいレコードとしてデータベースに作成します。

 <code>// 处理对无服务器函数的请求exports.handler = (event, context, callback) => { // 获取表单数据const data = querystring.parse(event.body); // 添加一个唯一的路径ID。并记下它- 我们稍后会将用户发送到它const uniquePath = shortid.generate(); data.lollyPath = uniquePath; // 组装准备发送到数据库的数据const lolly = { data: data }; // 在fauna db 中创建棒棒糖条目client.query(q.Create(q.Ref('classes/lollies'), lolly)) .then((response) => { // 成功！将用户重定向到此新棒棒糖页面的唯一URL return callback(null, { statusCode: 302, headers: { Location: `/lolly/${uniquePath}`, } }); }).catch((error) => { console.log('error', error); // 错误！返回带有statusCode 400 的错误return callback(null, { statusCode: 400, body: JSON.stringify(error) }); }); }</code>

進捗状況を確認しましょう。データベースに新しいLollipopページを作成する方法があります。また、ロリポップごとにページを生成する自動ビルドもあります。

ロリポップごとに事前に生成されたページの完全なセットがあることを確認するには、新しいエントリがデータベースに正常に追加されるたびに再構築をトリガーする必要があります。これはとても簡単です。静的なWebサイトジェネレーターのおかげで、ビルドは自動化されています。トリガーする方法は1つだけです。 netlifyを使用すると、任意の数のビルドフックを定義できます。それらはWebhookであり、HTTPの投稿リクエストを受け取った場合、サイトを再構築して展開します。これは、Netlifyのサイト管理コンソールで作成したものです。

データベースに記録された各ロリポップのページを含むサイトを再生するために、新しいデータをデータベースに保存した直後にこのビルドフックにHTTP POSTリクエストを発行できます。

これを行うコードは次のとおりです。

 <code>const axios = require('axios'); // 简化发出HTTP POST 请求// 触发新的构建以永久冻结此棒棒糖axios.post('https://api.netlify.com/build_hooks/5d46fa20da4a1b70XXXXXXXXX') .then(function (response) { // 在无服务器函数的日志中报告console.log(response); }) .catch(function (error) { // 描述无服务器函数日志中的任何错误console.log(error); });</code>

データベース挿入のために成功したハンドラーに追加された完全なコードでそれを見ることができます。

新しいLollipopのURLを受信者と共有する前に、ビルドと展開が完了するのを待つことをいとわない場合、これはすべて良いことです。しかし、私たちは忍耐強くなく、作成したばかりのLollipopの新しいURLを取得したときにすぐに共有したいと考えています。

残念ながら、サイトが再生を完了する前にURLにアクセスして新しいページを含めると、404を取得します。しかし、この404を利用することは喜びです。

楽観的なURLルーティングとサーバーレスバックアップシナリオ

カスタム404ルーティングを使用して、Lollipopページに故障した各リクエストをページに送信するオプションがあり、データベース内のLollipopデータを直接検索できます。必要に応じて、クライアントJavaScriptでこれを行うことができますが、より良い方法は、サーバーレス機能から表示できるページを動的に生成することです。

この方法は次のとおりです。

まず、Lollipopページ（これらのリクエストは空に戻る）にアクセスしたいすべてのリクエストを伝える必要があります。 Netlify Redirect構成に別のルールを追加することにより、これを行います。

 <code># 未找到的棒棒糖应该直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302</code>

このルールは、Lollipopページのリクエストが静的ページを提供できない場合にのみ適用されます。サーバーレス機能に一時的なリダイレクト（HTTP 302）を作成します。これは次のようになります。

 <code>const faunadb = require('faunadb'); // 用于访问FaunaDB const pageTemplate = require('./lollyTemplate.js'); // JS 模板文字// 设置和授权Fauna DB 客户端const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); exports.handler = (event, context, callback) => { // 从请求中获取棒棒糖ID const path = event.queryStringParameters.id.replace("/", ""); // 在DB 中查找棒棒糖数据client.query( q.Get(q.Match(q.Index("lolly_by_path"), path)) ).then((response) => { // 如果找到，则返回视图return callback(null, { statusCode: 200, body: pageTemplate(response.data) }); }).catch((error) => { // 未找到或发生错误，将悲伤的用户发送到通用错误页面console.log('Error:', error); return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); }</code>

他のページ（サイトの /ロリー /パス内ではない）のリクエストが404を返した場合、そのリクエストはサーバーレス関数に送信してロリポップをチェックしません。ユーザーを404ページに直接送信できます。 netlify.toml構成により、ファイルにフォールバックルールを追加することにより、任意の数の404ルーティングレベルを定義できます。ファイルでの最初の成功した試合が採用されます。

 <code># 未找到的棒棒糖应该直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302 # 真正的404 可以直接转到这里： [[redirects]] from = "/*" to = "/melted/index.html" status = 404</code>

終わった！これで、URLが静的ファイルで生成されていない場合、サーバーレス関数を使用してコンテンツを動的にレンダリングしようとする「静的な最初の」サイトがあります。

とても速い！

大規模なサポート

新しいエントリが作成されるたびにロリポップページを再生するためにビルドをトリガーする手法は、必ずしも最良ではないかもしれません。ビルドの自動化は、サイトの再配置が非常に簡単であることを意味しますが、非常に人気を博し始めたら、物事を制限して最適化し始めたいと思うかもしれません。 （時間の問題ですよね？）

それは問題ではありません。多くのページを作成し、データベースでより頻繁にコンテンツを追加するときに考慮すべきことをいくつか紹介します。

• 新しいエントリごとに再構築をトリガーする代わりに、サイトをスケジュールされたジョブに再構築できます。たぶん、これは毎時または1日に1回発生する可能性があります。
• 1日に1回構築された場合、過去1日に提出された新しいLollipopsのみのページを生成し、将来の使用のために毎日生成されたページをキャッシュすることを決定する場合があります。ビルド内のこのロジックは、ビルドをあまり長くすることなく、多数のロリポップページをサポートするのに役立ちます。しかし、ここではビルド内キャッシュについては話しません。興味がある場合は、Netlifyコミュニティフォーラムで尋ねることができます。

静的な事前に生成されたリソースを動的なレンダリングを提供するサーバーレスバックアップソリューションと組み合わせることで、多数の動的インフラストラクチャを構成および維持する必要性を回避しながら、驚くほど幅広いユースケースを満たすことができます。

この「Static First」アプローチを使用して満たすことができる他のユースケースは何ですか？

以上が静的ファースト：サーバーレスレンダリングを備えた事前に生成されたジャムスタックサイトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。