Jamstack：より速く、安全でスケーラブルなWebサイトのために近代的なアーキテクチャを構(gòu)築する

寫真が提供する寫真：netlify

近年、毎日Web開発技術(shù)が変化しています。この記事では、Jamstackアーキテクチャを紹介し、その概念と利點(diǎn)を明確にします。

過去に、ランプアーキテクチャは動的なWebサイトの開発を支配していました。その後、平均アーキテクチャは、新世代のWebアプリケーションの基礎(chǔ)を築きました。今日、APIと再利用可能なコンポーネントの臺頭により、靜的なWebサイトが再びトレンドになりました。これは「基本に戻る」方法ですが、正確ではありません。

コアポイント：

• Jamstackは、より速く、より安全で、よりスケーラブルなWebサイトを作成するのに役立つ最新のWeb開発アーキテクチャです。これは、JavaScript（J）、API（A）、およびMarkup（M）の組み合わせを表しており、その作業(yè)スタイルは世界中の多くの開発者に影響を與えています。
• Jamstackは動的なWebサイトを靜的Webサイトに変換します。これにより、速度が大幅に向上し、セキュリティが向上し、SEOが改善されます。これは、靜的サイトジェネレーターを使用して記事とページを作成し、靜的コンテンツをコードリポジトリと同期し、展開プロセスを自動化することで実行できます。
• Jamstackは、従來のフルスタック開発と比較して、グローバル展開、自動パイプライン、事前にレンダリングされたページにCDNを使用して、速度を向上させます。また、APIとマイクロサービスを介したフロントエンドとバックエンドのデカップリングを許可し、単一のテクノロジースタック-JavaScriptを使用します。

ジャムスタックとは何ですか？

Jamstackは、最新のWebを再定義して、より高速でより安全なWebサイトを構(gòu)築するアーキテクチャです。これらのサイトはよりスケーラブルであり、適切なツールセットで開発および保守が簡単になります（より楽しい）。 この用語を分解しましょう：

jはJavaScriptの略です。
• Netscapeが1995年にJavaScriptを発売してから成長しました。レスポンシブでプログレッシブライブラリを使用すると、モバイルアプリケーションとほぼ同じ動作するWebアプリケーションを設(shè)計(jì)できます。
AはAPIの略です。すべての機(jī)能を自分で書く代わりに、サードパーティに頼って多數(shù)のタスクを処理することができます。
• mはマークアップの略です。
開発されたコンポーネントを再利用したり、メンテナンスが容易な新しいコンポーネントを作成したりできます。
• これはただの誇大広告ですか？

はい、ある程度。 「Jamstack」（元々Jamstackとして様式化されていた）という用語は、Netlifyによって造られ、「最新のWebプロジェクトを自動化するためのオールラウンドプラットフォーム」を促進(jìn)しました。 WebコンポーネントとAPIがしばらくの間存在しているため、Jamstackの背後にある原則はまったく新しいものではありません。

しかし、Ajax（非同期JavaScriptとXML）がその年の別の會社、Adaptive Pathによって作成されたものと非常に似ていますが、Xmlhttprequest（XHR）APIはAjaxとJamstackの両方でしばらく存在していましたが、既存の哲學(xué)に対するさわやかな改善であり、コミュニティに迅速に採用された正當(dāng)な目的を持っています。この誇大広告は當(dāng)然のことです。この働き方は、世界中の多くの開発者に影響を與えました。

靜的ウェブサイト？

「靜的ウェブサイト」は「ダイナミックウェブサイト」の反対ですよね？それでは、単純なHTMLファイルのみを使用して、リッチで動的な相互作用をどのように提供できますか？答えはJavaScriptです。

JavaScriptは、最初のブラウザ戦爭以來、node.jsの出現(xiàn)とReact、Angular、Vue.jsなどのライブラリの出現(xiàn)により、普遍的なプログラミング言語ステータスとして統(tǒng)合されました。高度なユーザーインターフェイス（UIS）を設(shè)計(jì)する可能性は無限です。

もちろん、JavaScriptは萬能薬ではありません。おそらく、データ分析やAIには使用しないでしょう。しかし、Web開発の場合、JavaScriptメソッドとは関係ないAPIとはほとんど関係ありません。なぜなら、誰かがこのためにマイクロサービスを作成した可能性が非常に高いからです。

そして、これらのすべてのプロセスとマークアップを再利用可能なコンポーネントにカプセル化できる場合（特定の機(jī)能が必要なときにいつでもプラグインすることができます）、毎回1時間の労働時間を節(jié)約できます。

これはj?a?m stack：javascript、api、タグです。

デカップリング、ヘッドレス、マイクロサービス、サーバーレス...ごめんなさい、これは何ですか？

これらはすべて、Web開発のホットトピックであり、密接に関連していますが、まったく同じではありません。これらの用語は頻繁に聞くので、最初からそれらのいくつかを明確にしましょう。

カップリングとデカップリング、ヘッドレス

coupledは、Webサイトのバックエンド（WordPress管理パネルなどのデータベースがある場所）に作成、管理、保存されているWebサイトのコンテンツを指します。このコンテンツは、バックエンドから抽出され、フロントエンドインターフェイス（WordPressテンプレートなど）を介してブラウザで表現(xiàn)されます。ある程度、「結(jié)合した」アプリケーションは伝統(tǒng)的に「フルスタック」アプリケーションであり、バックエンドとフロントエンドは同じアプリケーションの異なる側(cè)面です。 対照的に、

デカップリング

は、バックエンドとフロントエンドが個別に管理されていることを意味します。これは、データベースと管理ツールが1つのサーバーに配置され、フロントエンドは別のサーバーに配置されることを意味します。 。もちろん、両方、通常はAPIを接続するには媒體が必要です。さらに、バックエンドは実際にはフロントエンドとは別に別のため、実際には異なる場所に複數(shù)のフロントエンドがある可能性があります。 （Shopifyなど、同じエンジンを使用しているさまざまな店頭について考えてみてください。） 要するに、ヘッドレス

ソフトウェア

には、フロントエンドまたはプレゼンテーションレイヤーがまったくありません。たとえば、ヘッドレスCMSは靜的コンテンツを生成し、モバイルアプリケーション、IoTデバイス、靜的Webサイトのどこにでもプッシュできます。確かに、これは「分離」の狀況でもありますが、ここではAPIさえ必要ないかもしれません。投稿をサービス用の靜的HTMLファイルとしてエクスポートするWordPressエンジンを考えてみてください：これはヘッドレスです。実際、この方法で生成されたページに載っています。

モノボディ（しっかりと結(jié)合）およびマイクロサービス（ゆるく結(jié)合）

単純に言えば、モノタイプは、全體として構(gòu)築されたソフトウェアとして定義できます。例には、モバイルアプリケーション、コンピューターにインストールできるほとんどのアプリケーション、およびWordPressなどのWebアプリケーションが含まれます。これらのアプリケーションにはまだ內(nèi)部の「モジュール」または「コンポーネント」がありますが、アプリケーションの不可欠な部分であるため、これらはアプリケーションが機(jī)能しないため、これらは緊密に結(jié)合されていると言います。 一方、ゆるく結(jié)合されたソフトウェアコンポーネントは、削除または交換できるプラグインのように機(jī)能し、機(jī)能が変更される可能性がありますが、アプリケーションのコアは機(jī)能します。この原則により、サードパーティAPI（一般に「マイクロサービス」と呼ばれる）を介した「アウトソーシング」機(jī)能が可能になります。これは、アプリケーションに本質(zhì)的に不可欠ではないアクセシビリティ機(jī)能（畫像サイズ、ログイン、ストレージ）を提供するためです。 サーバーレスおよび従來のコンピューティング

本物の「サーバーレス」は少し誤った名聲です。どんな種類のコンピューティング作業(yè)を行っていても、サーバーが関與します。ただし、サーバーにアクセスして管理する方法は非常に異なる場合があります。 従來のモデルでは、実際の物理サーバー（ベアメタルと呼ばれることもあります）、または物理サーバー上にリソースが割り當(dāng)てられ、他のユーザーにリソースが割り當(dāng)てられる仮想プライベートサーバーがある場合があります。リソースは限られており、100％のリソースを使用するかどうかにかかわらず、まるでそれらを使用しているかのように支払う必要があります。

サーバーレスモデル

では、多くのサーバーが互いに接続されており、リソースの膨大なプールを提供しています。必要に応じて必要なリソースを抽出し、必要に応じて（上下）スケーリングするだけです。物理サーバーが自分のものであることを確信することはできません - リソースがどこから來たのかを知っているだけです。

従來のモデル

サーバーレスモデル

限られたリソースを備えた物理サーバー

無制限のリソースプール 障害が発生しやす（ハードディスク障害など） より信頼性の高いアーキテクチャ*

制限されたスケーラビリティ 無制限のスケーラビリティ アイドルサービスを含むすべての料金を支払います 使用時に支払います（オンデマンドペイ） シンプルで使いやすい を?qū)Wび、実裝する必要があります **ハードディスク、CPU、メモリチップの障害が引き続き発生することに注意してください。ただし、リソースは透過的に割り當(dāng)てられているため、ハードウェアが失敗して交換しても、気付くことはありません。 Jamstackの実用的な例 特にこれらの概念に精通していない場合は、多くのことがあります。それでは、理論から休憩を取り、実際の生活におけるJamstackの実際のアプリケーションのいくつかを見てみましょう。

ケーススタディ1：WordPressを10倍の速度で靜的Webサイトに変換

Staticが最良の選択である場合、動的なWordPress（WP）ブログを靜的ブログに変換するよりも良いことは何ですか？そうすることで、ページの読み込み速度と遅延を少なくとも數(shù)桁削減し、セキュリティを大幅に強(qiáng)化し、同時にSEOを改善します。 要するに、プロセスは次のとおりです

靜的サイトジェネレーター（SSG）を使用してWPから記事とページを作成しますが、靜的形式（Text、MarkDown、HTML）。

GitHub、Gitlab、またはBitbucketのリポジトリを使用した靜的コンテンツを同期します。

展開プロセスを自動化して、コードリポジトリが変更されるたびに、変更はすぐにグローバルCDNにオンラインになります。
リラックスして、無料のホスティングを楽しんで、安全で高速なWebサイトと自動展開をお楽しみください。 ？
3. 管理パネルはどうすればよいですか？

カテゴリとRSSフィードはどうすればよいですか？

今すぐコンテンツを管理するにはどうすればよいですか？

コメントセクションとニュースレターをどうするか？

この時點(diǎn)で、WP管理パネルに別れを告げることができます。これからは、SSGを使用してコンテンツを生成するからです。実際、JekyllのようなSSGはブログを構(gòu)築するように特別に設(shè)計(jì)されていますが、gatsby.jsのようなSSGにはすでにすべての機(jī)能が含まれています。
コンテンツの管理（既存の投稿の変更など）は、ヘッドレスCMSが出てくる場所です。コメントやニュースレターについては、すでに外部API（DisqusやMailChimpなど）を使用していますか？
実際にどうやってやったの？
ここでは、SSGとヘッドレスのCMSの內(nèi)外をカバーすることはできませんが、このシリーズのフォローアップに注意してください。 WordPressのWebサイトを移行するための段階的なガイドを提供します。

ケーススタディ2：自動パイプラインを使用して靜的Webサイトを無料でホストする

Jamstackコミュニティでは、「無料」を聞くことがよくあります。ありがたいことに、無料ではありません。

要するに、プロセスは次のとおりです この場合、靜的Webサイト（例：ケーススタディ1で移行したブログ）を取り上げ、オンラインで掲載します：

Github、Gitlab、またはBitbucketリポジトリをセットアップします。

deploy Netlify、gitlabページ、またはgithubページに展開します。

この時點(diǎn)で、リポジトリへの各変更は、（Webhook経由で）新しい展開を自動的にトリガーし、何かがうまくいかない場合は非常に優(yōu)雅に戻すことができます。

なぜ企業(yè)はこれらのサービスを無料で提供するのですか？ 展開されたCDNにHTMLファイルを置くオーバーヘッドは小さいです。実際の計(jì)算は含まれておらず、PHPレンダリングは関係していないことを忘れないでください。多くの帯域幅を消費(fèi)する非常に人気のあるウェブサイトをホストしない限り、企業(yè)はホスティングサービスを提供することを気にしません。そうすることで、彼らに良い宣伝をもたらすことができます。

會社は、たくさんの景品を渡すことであなたを閉じ込めます。高度なサービスが必要な場合（ビジネスが成長した場合は必要になります）、すでにそれらと一緒に働いています。それは公平です - そして、その時點(diǎn)で、あなたはあなたの問題を解決するために一時的なソリューションを開発するか、有給時間にサービスを使用する必要があります。

実際にどうやってやったの？

netlifyまたはgithub/gitlabはどちらも非常に単純で、最小限の労力が必要です。 （それにもかかわらず、次の記事で詳細(xì)にプロセスに進(jìn)みます。）

Jamstackとフルスタック開発の比較

この新しいアプローチがランプまたは平均スタックとどのように比較されるかを見てみましょう：

ランプ/平均スタック jamstack

Webサイトを?qū)g行しているWebサーバー cdnへのグローバル展開 ftp/sshアップロード、サーバー再起動 自動化アセンブリライン 実行ページ 速度を上げるためにページをプレレンダー モノボディアプリケーション（WordPressなど） APIおよびマイクロサービス（フロントエンド/バックエンドデカップリング） フルスタック（フロントおよびバックエンド言語） シングルテックスタック（ "JavaScript Everywhere"）

ジャムスタックで他に何ができますか？

現(xiàn)時點(diǎn)でウェブサイトを作成することの利點(diǎn)を?qū)Wんだことを願っています。ただし、ユーザーのログインやリレーショナルデータベース（RDBMS）のない動的コンテンツの管理または保存など、バックエンド処理なしで最も基本的な操作を?qū)g行する方法については、まだ懐疑的かもしれません。

Jamstackでできる他の例をいくつか紹介します。

靜的Webサイトを使用してServerLessデータベースを?qū)g裝してください

サービスとしてのアイデンティティ（Idaas）：Stateless Authentication
ヘッドレスコンテンツ管理システム
• 靜的Webサイトでサーバーレス関數(shù)を使用している
• 多目的フォームの管理
• マルチプラットフォーム通知の処理
• ヘッドレスショッピングカート
• レスポンシブ検索
結(jié)論
物事の発展は、特にIT分野では避けられません。以前はランプスタック、次に平均スタックでした。今ではジャムスタックであり、5?10年後には他のものになります。これらの変更を受け入れ、それらを私たち自身のものにする方が良いです！

物事を行う新しい方法を?qū)Wぶことは面倒に聞こえるかもしれませんが、開発への情熱を再活性化することもできます。サーバーの維持とセキュリティの問題について心配する時間が少なくなります。開発には少ない労力が必要であり、顧客がより満足していることがわかります。このため、より競爭力がある（そして昇給を求めることができる）ことさえあります。 ？

jamstack basics

このトピックに関する記事をもっとフォローしてください。私たちは長年にわたってJamstackを?qū)毪筏皮蓼筏郡ⅳ饯欷溪?dú)立した規(guī)律と実踐になりました。 Jamstack Professionalになるために必要なチュートリアルを提供し、このページのインデックスで更新します。また、RSSフィードやソーシャルメディアを最新の狀態(tài)に保つこともできます。

jamstack basics

• Jamstackの紹介：安全で高性能のWebサイトを構(gòu)築します
• ジャムスタックツール、API、およびサービス：包括的な比較
• 自動パイプラインを使用して靜的Webサイトを無料でホストする方法
• WordPressから靜的サイトジェネレーターに移行する方法

ジャムスタックツール

• Gatsbyは始めましょう：最初の靜的Webサイトを構(gòu)築します
• eleventy
の初心者

およびより継続的な作業(yè)。

Jamstack

についてのよくある質(zhì)問

ジャムスタックとは何ですか？ Jamstackは、「JavaScript、API、およびTags」の略です。これは、WebサイトとWebアプリケーションを構(gòu)築するためのアーキテクチャであり、パフォーマンス、セキュリティ、および開発者エクスペリエンスを向上させるために、バックエンドからフロントエンドをデカップすることを強(qiáng)調(diào)しています。

JamessTackは従來のWeb開発とどう違うのですか？従來のWeb開発では、サーバーは各リクエストでHTMLを動的に生成する責(zé)任があります。一方、Jamstackはビルドプロセス中にページを事前に構(gòu)築し、クライアントに靜的資産を直接提供し、APIを使用して動的関數(shù)を?qū)g裝します。

ジャムスタックアーキテクチャの重要な原則は何ですか？ Jamstackの主要な原則には、事前レンダリング、API中心の開発、グローバルコンテンツ配信ネットワーク（CDN）の使用が含まれます。プレレンダリングには、ビルドフェーズ中に靜的HTMLを生成し、APIは動的機(jī)能を処理します。

Jamstackを使用することの利點(diǎn)は何ですか？ Jamstackは、靜的サイトの生成によるパフォーマンスの向上、サーバーの攻撃面を削減することによりセキュリティの強(qiáng)化、CDNによるスケーラビリティを簡素化するなど、多くの利點(diǎn)を提供します。さらに、多くの場合、開発者エクスペリエンスが向上します。

Jamstackアプリケーションでサーバー側(cè)の機(jī)能を使用できますか？はい、Jamstackアプリケーションは、サーバーレス関數(shù)またはAPIを介してサーバー側(cè)の機(jī)能を活用できます。サーバーレス関數(shù)を使用すると、イベントに応じてサーバー側(cè)のコードを?qū)g行し、靜的サイト配信の利點(diǎn)を維持しながら動的な機(jī)能を提供します。

JamstackはすべてのタイプのWebサイトに適していますか？ Jamstackは、シンプルなブログやマーケティングサイトから複雑なWebアプリケーションまで、さまざまなWebサイトに適しています。ただし、その適用性は、プロジェクトの特定の要件と、リアルタイムサーバー側(cè)の処理の要件に依存します。

以上がJamstackの紹介：安全で高性能サイトを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。