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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アーキテクチャTL; dr

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

そしていくつかの説明：

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

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

より詳細な説明

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

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

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

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

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

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

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

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

 <code>// 設置與Fauna 數(shù)據(jù)庫的連接。 // 使用環(huán)境變量進行身份驗證// 并訪問數(shù)據(jù)庫。 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) => { // 獲取每個條目的所有數(shù)據(jù)const lollies = response.data; const getAllDataQuery = lollies.map((ref) => { return q.Get(ref); }); return client.query(getAllDataQuery).then((ret) => { // 將數(shù)據(jù)發(fā)送回Eleventy 以用于站點構建resolve(ret); }); }).catch((error) => { console.log("error", error); reject(error); }); }) }</code>

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

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

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

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

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

<code></code>

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

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

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

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

 <code># 將“new”URL 解析為函數(shù)[[redirects]] from = "/new" to = "/.netlify/functions/newLolly" status = 200</code>

そのサーバーレス関數(shù)を見てみましょう：

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

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

 <code>const faunadb = require('faunadb'); // 用于訪問FaunaDB const shortid = require('shortid'); // 生成短唯一URL const querystring = require('querystring'); // 幫助我們解析表單數(shù)據(jù)// 首先，我們使用我們的數(shù)據(jù)庫設置一個新的連接。 // 環(huán)境變量幫助我們安全地連接// 到正確的數(shù)據(jù)庫。 const q = faunadb.query const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET })</code>

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

 <code>// 處理對無服務器函數(shù)的請求exports.handler = (event, context, callback) => { // 獲取表單數(shù)據(jù)const data = querystring.parse(event.body); // 添加一個唯一的路徑ID。并記下它- 我們稍后會將用戶發(fā)送到它const uniquePath = shortid.generate(); data.lollyPath = uniquePath; // 組裝準備發(fā)送到數(shù)據(jù)庫的數(shù)據(jù)const lolly = { data: data }; // 在fauna db 中創(chuàng)建棒棒糖條目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を使用すると、任意の數(shù)のビルドフックを定義できます。それらはWebhookであり、HTTPの投稿リクエストを受け取った場合、サイトを再構築して展開します。これは、Netlifyのサイト管理コンソールで作成したものです。

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

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

 <code>const axios = require('axios'); // 簡化發(fā)出HTTP POST 請求// 觸發(fā)新的構建以永久凍結此棒棒糖axios.post('https://api.netlify.com/build_hooks/5d46fa20da4a1b70XXXXXXXXX') .then(function (response) { // 在無服務器函數(shù)的日志中報告console.log(response); }) .catch(function (error) { // 描述無服務器函數(shù)日志中的任何錯誤console.log(error); });</code>

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

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

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

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

カスタム404ルーティングを使用して、Lollipopページに故障した各リクエストをページに送信するオプションがあり、データベース內(nèi)の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 中查找棒棒糖數(shù)據(jù)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) => { // 未找到或發(fā)生錯誤，將悲傷的用戶發(fā)送到通用錯誤頁面console.log('Error:', error); return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); }</code>

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

 <code># 未找到的棒棒糖應該直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302 # 真正的404 可以直接轉(zhuǎn)到這里： [[redirects]] from = "/*" to = "/melted/index.html" status = 404</code>

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

とても速い！

大規(guī)模なサポート

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

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

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

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

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

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