Smashing Magazineがコンテンツを管理する方法:WordPressからJAMstackへの移行
公開: 2022-03-10この記事は、最新のWebプロジェクトを自動化するためのオールインワンプラットフォームであるNetlifyの親愛なる友人たちによって親切にサポートされています。 ありがとう!
開発者がWordPressについて話すたびに、市場シェアの割合が変化します。 「すべてのサイトの20%がWordPressを使用しています。 」「すべてのサイトの40%がWordPress上にあります! パーセンテージが何であれ、メッセージは同じです。採用に関しては、WordPressは大規模です。
では、なぜそのような採用で、WordPressを使用しているサイトがJAMstackへの移行を検討するのでしょうか? この2部構成の記事シリーズでは、現在読んでいるサイトそのもののケーススタディを使用して、実際のWordPressの移行がどのように見えるかについて説明します。
利益と損失、以前に知っておいてほしいこと、そして驚いたことについて話します。 次に、WordPressから完全に離れたわけではなく、1つの可能な移行パスの技術的なデモンストレーションを行いますが、分離されたWordPressを提供して、両方の長所を活用する方法を説明します。ダッシュボードと機能のパワー、パフォーマンスとセキュリティの向上。
掘り下げましょう!
なんで?
2015年、Netlifyの共同創設者であるMathiasBiilmannとSmashingの創設者であるVitalyFriedmanがショップについて話しました。 JAMstackアーキテクチャがラウンドを開始するにつれて、Smashingはスタックのアイデアにさらに関心を持つようになりました。 VitalyとMarkus(Smashingの元マネージングディレクター)は、Smashingが従来のWordPress / LAMPstackサイトからJAMstackアーキテクチャに移行した場合にどうなるかをMattに尋ねました。
実験として、MattはSmashingからすべてのHTMLを取得し、Netlifyでホストして、CDNから静的にコンテンツを配信しました。 結果は説得力がありました—静的バージョンは平均して6倍以上高速です!
このタイプのアーキテクチャは、ページにアクセスしたときにページがオンデマンドでコンパイルされていないため、非常にうまく機能します。 事前に作成されたコンテンツをコンテンツ配信ネットワークから直接提供しているため、サイトはすでに「そこに」あり、ユーザーが利用できるようになっています。
CDNを介してサービスを提供しているため、潜在的な訪問者の近くでコンテンツを世界中に配信することもできます。 すべての読者のために速くなりたいオンライン出版物の場合に不可欠である中心的な原点はありません。
それで舞台が整いました。 Smashing MagazineはJAMstackに移行しました—特にプラットフォームとしてNetlifyに移行しました。 Smashingは、その10年間の運営で、小さなオンライン出版物から大規模なWordPressブログに成長し、本、会議チケット、ワークショップなどを販売していました。
このサイトにはいくつかの部分がありました:
- WordPressブログ
- Railsジョブボード
- Shopifyストア
- 会議サイト用の別のCMS
Netlifyが最初に移行を開始したとき、サイトはいくつかのパフォーマンスの問題に悩まされていました。 Smashingは、新しいサブスクリプションプランの一部としての認証と、よりモダンな外観への再設計にも関心を持っていました。
信頼性
スマッシングは、他のプラットフォームが夢見ていることを定期的に達成します。巨大なコミュニティを通じて広く共有されている記事です。 ただし、投稿のトラフィックの転換点に達したとき、Smashingは定期的に停止の問題を抱えていました。 これを軽減するために、WordPressプラグインの多用がスタックに導入されましたが、それでも良好な稼働時間メトリックを維持するのに苦労していました。
Netlifyに移行することで、Smashingチームはデータベース接続エラーの発生を回避し、記事に大量のトラフィックが発生した場合でもダウンタイムを心配する必要がなくなりました。 なんで? サーバーなしで提供する場合、事前に作成されたコンテンツを生成して提供する必要がないため、コンテンツはすでに存在し、表示する準備ができています。 静的なページ全体を除いて、その場で何も要求されていません。
CDNを介してサービスを提供することで、セキュリティの観点からSmashingのスリープを少し簡単にすることもできました。 wp-login.php
は、長い間セキュリティホールと攻撃ベクトルの原因となってきました。 事前に作成されたコンテンツに同じ方法でアクセスすることはできず、セキュリティホールはどこにでもありません。
キャッシュの無効化
スマッシングはすべてのWordPressキャッシングプラグインを循環し、さまざまな結果と多くの問題が発生しました。 スマッシングのヴィタリー・フリードマンは、
「私たちが抱えていた主な問題は、隔週で発生し続けていた「データベース接続の確立エラー」に関連しており、文字通りすべてのWordPressキャッシングプラグインを試しました。 パフォーマンスは(全体的に)かなりOKでしたが、さらに改善することを目指していました。 さらに、メンバーシップを立ち上げ、会議、求人情報、記事、書籍、電子書籍など、さまざまなサービスを1つのプラットフォームに接続したかったので、WordPressを使用して実現するのは非常に困難でした。」
Netlifyに移行することで、Smashingチームは、追加のオーバーヘッドなしで、キャッシュされたパフォーマンスの高いコンテンツを提供しながら、キャッシュの即時無効化を確認できました。
サイトをデプロイすると、HTMLファイルはNetlifyのCDNでホストされます。 キャッシュヒット率が高く、最初のバイトまでの時間が短いように最適化されていると同時に、変更されたすべてのHTMLファイルを即座に無効にすることができます。 Netlifyはまた、CSSファイル、画像、フォント、JSファイルなどのアセットへのすべてのリンクをフィンガープリントし、それらを永久にキャッシュするキャッシュヘッダーを使用してSmashingを提供します。 フィンガープリントは、それらが一意であることを保証し、新しいバージョンを更新すると、代わりに新しいバージョンが提供されることを保証します。
ワークフロー
既存の設定を見ると、移行の大きな理由の1つは、単に既存のプロパティを統合することでした。 これらのさまざまな技術スタックとセットアップのすべての間でコンテキストをシフトする必要があることは、エンジニアに課せられた難しいメンテナンスの問題になりました。
以前はインフラストラクチャが非常に多くの異なるシステムに分割されていましたが、この移行プロセスではすべてが統合され、メインサイト、会議サイト、サブスクリプション、eコマースセクションが、異なるスタックで個別に維持されるのではなく、すべて連携して機能していました。 これにより、開発コストを低く抑え、開発者の経験をすべてのプロパティで一貫して行うことができました。
WordPressの移行部分は、最大かつ最も繊細であることが証明されました。 Netlifyは、WPエクスポーターからデータをエクスポートしようとしましたが、コンテンツに保存が必要な埋め込みが含まれているか、プラグインによって変更されていることがわかりました。 サイトにあるものとの同等性を維持するために、一連のスクレーパーが作成され、記事、アセット、コメント、およびホームページごとに分類されました。
それが書き込まれて変換されると、GitHubの新しいリポジトリに読み込まれ、代わりにNetlifyCMSが使用されました。 Netlify CMSのユニークな点は、軽量であり、コンテンツエディターをGitワークフローに統合していることです。つまり、データベースではなくgitリポジトリから文字通りマークダウンファイルをプルして提供します。 さらに、Netlify CMSはプラットフォームに依存せず、(ほぼ)すべての静的サイトジェネレーターとGitHubに保存されているサイトで動作します。
当時、Sara Soueidanは、フリーランスのフロントエンド開発者としてSmashingで再設計に携わっていました。 彼女は、フロントエンドアーキテクチャを構築するためのコンポーネントのライブラリを作成し、CMSを使用している場合でも、gitで直接作業しているため、操作がはるかに簡単であると述べました。
「リポジトリにプッシュしたものはすべてパターンライブラリに直接適用されます。つまり、2つの異なるコンポーネントのセットを維持する必要はありません...このタイプの連続性は素晴らしかったです。 HTML、CSS、JavaScriptを記述してリポジトリにプッシュするだけで、すべてが魔法のように機能します。 ワークフローは素晴らしかったです。」
とはいえ、Netlify CMSは、このような高トラフィックおよび大規模なユースケースには軽量すぎる場合があります。 Smashingには、定期的にゲスト著者と完全な編集スタッフがいます。 WordPressが提供する豊富な機能のいくつかは、このような高度なコラボレーション環境に非常に役立ちます。
そのため、次のチュートリアルでは、ヘッドレスモデルについて説明します。このモデルでは、コンテンツ作成者がWordPressダッシュボードのメリットを享受できますが、APIを介してWordPressを使用し、開発をgit中心のワークフローに依存させることができます。開発者も維持するために。 乞うご期待!
フレームワークの選択
Matt Biilmannが作成した最初のプロトタイプでは、パフォーマンスに非常に重点を置いていたため、Hugoと組み合わせて最小限のPreactですべてを作成しました。 彼は小道具を使用し、すべてを非常に軽量に保ちました。 Smashingの開発者であるIlyaPukhalskiが維持するためにプロジェクトを引き継いだとき、彼はPreactにReactのエコシステムを利用するために欠けていたいくつかの機能が欠けていることに気づきました。 最終的に、Reduxや他のライブラリのメリットがコストを上回りました。
今を振り返って、マットは、当時市場シェアがあまりなかったVueを使用しただろうと言います(私は彼にそう言うように促しなかったことを誓います)。 私は明白な質問をしました:なぜSvelteではないのですか? パフォーマンス志向の人々はそのライブラリに手を伸ばす傾向があるので。 彼は、SvelteにはVueがまだ持っているエコシステムがまったくないことを述べました。
マットがまだHugoを使用していたかどうかを振り返ると、Hugoが大好きだと言いますが、特にこのプロジェクトで難しいと感じたのは、プラグインシステムが十分になかったことです。バナー広告などを作成しました。その性質はHugoで十分にプログラム可能ではなく、彼はそれを達成するためにスクリプトを挿入する必要がありました。 これらのスクリプトは、ビルドプロセスを遅くする傾向がありました。 とは言うものの、私たちはまだnetlify.comの自分のサイトにHugoを使用しており、それを気に入っています。この警告は、特にSmashingのサイトのニーズに非常に特有です。
彼が再びそれを行うことができれば、彼はプラグインや他の拡張可能なスクリプトの作成に関して豊富な機能を備えたEleventyのいずれかを選択するかもしれません。 または、Vueを使用している場合、Nuxtは、サーバー側のレンダリング、ルーティング、静的生成を提供する、そのフレームワークに適した選択を可能にしながら、いくつかの優れたプラグイン機能を提供していました。
大規模なサイトの構築
Smashingと同じくらい大きなサイトで作業する際に発生した問題があり、それが何であるかをすでに理解しているかもしれません。私たちはそれに触れました。 確かに、CDNで提供されるビルド済みページの大規模なサイトでは、ユーザーのためにオンザフライで何も構築していないため、パフォーマンスは依然として優れています。
ただし、そのメリットは、サイトが事前に構築されている場合にのみ発生する可能性があり、そのプロセスには時間がかかる可能性があります。 従来のサイトでは、リクエストするとページが作成されますが、ユーザーが必要とする場合に備えて、文字通りすべてのページを事前に作成しています。 パフォーマンスが超高速になります! しかし、その時間は現在、開発と公開の時間にオフロードされています。すべてのページの作成には時間がかかる可能性があります。
これは小規模なサイトではそれほど問題にはなりませんが、Smashing Magazineの規模では、特に人々が毎日積極的にコンテンツを作成しながら高い生産性を維持できるように、その時間をもう少し考える必要があります。
Netlifyが行ったことは、すでにホストしている何千もの記事の大部分を運ぶ大きな/production-articles
フォルダーを作成することでした。 次に、アクティブに作成および編集されている記事を配置できるcontent/articles
という別の作業ディレクトリを作成しました。
このビルドプロセスは、サイトで作業していたすべての人が、ビルド全体を待つことによって妨げられることなく、ローカル開発用の記事のより小さなバッチで作業していたことを意味しました。 このプロセスは、制作記事を準備するためのgulpタスクによって管理され、Hugoを解放して、アクティブに作業されているものだけを処理できるようにしました。
このアプローチの短所の1つは、ビルド全体を実行する必要があり、プロセスが遅くなることです。 小規模なパブリケーションでは、これはそれほど重要ではない可能性がありますが、Smashingの規模では、パブリケーションプロセスが遅くなります。
オープンソースAPI
最初に、Smashingは、既存のeコマースソリューションの移行、WordPressの外部でのコメントの処理、認証機能の追加に関心があることを述べました。 これらの機能はすべて、Netlifyが維持しているオープンソースソリューションを使用して構築されており、ステートレスAPIに分割されています。
- GoTell
大量のコメントを処理するためのAPIおよびビルドツール。 - GoCommerce
注文と支払いを処理するeコマースサイト用の小さなGoベースのAPI。 - GoTrue
プロジェクトのユーザー登録と認証を処理するための自立型APIサービスとして機能できるGolangで記述された小さなオープンソースAPI。 これはOAuth2とJWTに基づいており、ユーザーのサインアップ、認証、およびカスタムユーザーデータを処理します。
これらの各部分には、移行と独自の固有の要素が必要でした。これらはこの記事の範囲外ですが、Mattが共同執筆した「 JAMstackでの最新のWeb開発」という無料の本ですべて取り上げられています。 また、このようないくつかの詳細な説明を、使用可能な例とともに、後続の投稿で検索と認証について行います。
結論
移行は順調に進んだ。 ひどく? えーと…うまくいきました。 スマッシングは、それ自体の成功に対してペナルティを課されることはありませんでした。人気のある記事が登場したとき、それらはコンテンツを一貫して提供でき、大きな負荷をかけずに済みました。 これに伴い、JAMstackインフラストラクチャへの移行により、パフォーマンスとセキュリティが向上しました。
SmashingMagazineの前CEOであるMarkusSeyfferthは、次のように述べています。
「最初の読み込みにかかる時間は以前よりもはるかに速くなっています…HTMLファイルが800ミリ秒で提供されるのを待たなければならなかったのですが、今では80ミリ秒です。」
このプロセスは成功し、他の優れたエンジニアリングプロジェクトと同様に、その過程で教訓が得られました。 このシリーズの次の記事では、私たちが学んだことを踏まえて、私たちが推奨するもののチュートリアルとデモを実行します。 WordPress開発を最新化し、JAMstackのパフォーマンスとセキュリティのメリットを享受したい場合は、このまま読み進めてください。