Jamstackの紹介：安全で高性能サイトを構築します

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

写真が提供する写真：netlify

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

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

コアポイント：

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

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

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

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

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

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

静的ウェブサイト？

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

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

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

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

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

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

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

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

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

デカップリング

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

ソフトウェア

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

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

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

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

サーバーレスモデル

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

従来のモデル

サーバーレスモデル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ランプ/平均スタック jamstack

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

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

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

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

静的Webサイトを使用してServerLessデータベースを実装してください

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

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

jamstack basics

このトピックに関する記事をもっとフォローしてください。私たちは長年にわたってJamstackを導入してきましたが、それは独立した規律と実践になりました。 Jamstack Professionalになるために必要なチュートリアルを提供し、このページのインデックスで更新します。また、RSSフィードやソーシャルメディアを最新の状態に保つこともできます。

jamstack basics

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

ジャムスタックツール

• Gatsbyは始めましょう：最初の静的Webサイトを構築します
• eleventy
の初心者

およびより継続的な作業。

Jamstack

についてのよくある質問

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

JamessTackは従来のWeb開発とどう違うのですか？従来のWeb開発では、サーバーは各リクエストでHTMLを動的に生成する責任があります。一方、Jamstackはビルドプロセス中にページを事前に構築し、クライアントに静的資産を直接提供し、APIを使用して動的関数を実装します。

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

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

Jamstackアプリケーションでサーバー側の機能を使用できますか？はい、Jamstackアプリケーションは、サーバーレス関数またはAPIを介してサーバー側の機能を活用できます。サーバーレス関数を使用すると、イベントに応じてサーバー側のコードを実行し、静的サイト配信の利点を維持しながら動的な機能を提供します。

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

以上がJamstackの紹介：安全で高性能サイトを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。