Shifterを使用したWordPressサイトのJamstack化

はじめに

株式会社BuySell Technologiesテクノロジー戦略本部　開発3部　Tech MK（テックマーケティング）グループ　マネージャーの黒沢です。 Tech MKグループではBUYSELL公式サイトなど当社で運営しているWebサイトの制作、更新を担当しております。 TechMKグループで担当している運用フェーズにあるWebサイトはWordPressで制作しております。

WordPressは圧倒的なシェアを持っているオープンソースCMSですが、使いこなすのは難しく、当社でも運用上の課題がいくつかありました。この記事では、それらの改善のためにTech MKグループで行った取り組みについてまとめます。

当社運営サイトのWordPress運用における課題

Tech MKグループで担当しているWebサイトは全部で11サイトあり、全てWordPressで構築されているのですが、以下の問題がありました。

• サイト毎に関係する事業部が違ったり、リリース時期も異なる為、WordPress並びにプラグインのバージョン統一がされていない
• サイト数の多さに加えて、バージョンが統一されていないので脆弱性情報の収集まで手が回らない
• WordPressやプラグインの継続的なアップデートが出来ていない

セキュリティ上の問題点

上記以外の問題点としては以下の基本的な問題点がありました。

• IPアドレス制限ができていない
• WordPressのアカウント管理方法

アカウント管理については、Microsoft Entra IDでのSSOに変更することによってグループごとに権限を振り分けるようにしました。

Jamstack化方法の検討

前述のセキュリティ対策をしても、WordPress自体はインターネット上にありセキュリティリスクが残ります。そのため、根本的な解決策としてJamstack化する方法の1つであるWordPressからヘッドレスCMSへのリプレイスを検討しました。

Jamstackとは

JamstackとはJavaScript、API、Markupの頭文字を取って名付けられた、事前に生成された静的なHTMLを使用して非常に高速な配信が可能なシステムです。動的なコンテンツはJavaScriptで情報を通じて取得して表示します。 コンテンツを管理するCMS部分が完全に分離されている為にセキュリティ面で有利で高速な配信が出来ます。

ヘッドレスCMSとは

WordPressはコンテンツ表示部分とコンテンツを管理するシステムで出来ている一般的なCMSです。バックエンドと一体になっていることによって攻撃を受けやすく、また動的にページを生成する為、ページ表示速度の問題があります。

それに対してヘッドレスCMSではフロントエンド部分の存在しないコンテンツを管理する為のCMSです。静的化されたものを配信する為に表示スピードが速くバックエンド部分も切り離されている為、攻撃をうけにくい仕組みになっています。

当社では当初、WordPressからヘッドレスCMSへのリプレイスに当たり、microCMSのテストを実施しました。 microCMSは投稿画面も細かくカスタマイズが出来て非常に優秀なヘッドレスCMSでした。

ただ、当社で運用しているサイトでは記事の投稿などはビジネス側の複数の事業部で行っており、WordPresから別のCMSに移行した場合、CMSの使い方を0から覚える必要が出てしまい、学習コストの高さから現実的ではありませんでした。

Shifterについて

WordPressからヘッドレスCMSへのリプレイスが現実的ではなく困っていたところ、株式会社デジタルキューブ様のShifterというサービスに出会いました。

Shifterは、WordPress サイトをワンクリックで静的な HTML に変換し、ホスティングするクラウドサービス（ SaaS ）です。 使い慣れたWordPressを使用しながら静的サイトを生成して公開するため、遅延・停止などといったソフトウェアやサーバー保守にかかる負担、セキュリティの不安を排除します。

• コンテンツの管理にはこれまで通りWordPressを使用出来る
• 記事の更新など必要な時だけWordPressを立ち上げる
• コンテンツを静的HTMLとしてS3に配置
• CloudFrontを使用してコンテンツを配信

以上がShifterの特徴です。必要な時だけWordPressを立ち上げれば済む為、WordPressを常時稼働させるよりも大きくリスクを下げられます。 また、当社運用サイトにおける問題点としては以下があります。

• サイト毎に関係する事業部が違っており、リリース時期も異なる為にWordPress並びにプラグインのバージョン統一されていない
• サイト数が多いことに加えて、バージョン統一されていなので脆弱性情報の収集まで手が回らない
• WordPressやプラグインの継続的なアップデートが出来ていない

WordPress本体やプラグインの継続的なアップデートを実施しないと攻撃されるリスクが高くなります。ですが、Shifterは必要な時だけWordPressを立ち上げる為、常時稼働させるよりも大きくリスクを下げることが出来ます。

Shifterへの移行について

当社ではこれまで - 株式会社 BuySell Linkのコーポレートサイト - 株式会社BuySell Technologiesリクルートサイト の2サイトでShifterに移行完了しております。 また、直近であと2サイトほどShifterへの移行を予定しています。 Shifterでのサイトの立ち上げはShifter公式ドキュメントに従えば簡単に出来ます。

1. 「サイト新規作成」ボタンをクリックする Shifter ダッシュボードにログインしたら「サイト新規作成」ボタンをクリックします。

2. サイト情報を入力する サイト名を入力したら「確認」ボタンをクリックします。

3. プランを選択する 参考：無料トライアルの登録方法（公式サイト）

4. Shifterでサイトが作成される プランを選択した後、オプション選択とお支払い情報を入力するとShifterでサイトが作成されます。

5. デプロイする Shifterでは「ジェネレート」という作業でサイト全体を静的化します。ジェネレートの作業を開始するには「デプロイする」ボタンをクリックします。

6. アーティファクトを構築する 作成された静的バージョンである「アーティファクト」を構築します。WordPressが起動しているとアーティファクトの生成が出来ないので停止します。

7. ビルドを実行する 「デプロイする」ボタンをクリックして、アーティファクトの生成が開始されると「デプロイをビルド中」の表示に切り替わります。

8. ジェネレートの完了 ジェネレートが完了すると公開用URLで静的化されたサイトを開くことが出来ます。

ShifterではSSHでの接続やデータベースを直接操作することは出来ない為、既存サイトからのデータ移行はAll-in-One WP Migrationを使用してデータ移行します。

Shifterへの移行自体は手順に従えば特に問題なく出来るのですが、静的HTMLとしてS3に配置される為、PHPでの動的な処理が一切動かなくなります。 今回移行を進めているサイトではお問い合わせフォームにContact Form 7を使用していたので、iFrameでお問い合わせフォームを静的ページに埋め込みが出来るformrunというサービスを使用しました。

デプロイ時間について

Shifterでサイト全体を静的化するデプロイにはある程度時間がかかります

• 株式会社 BuySell Linkのコーポレートサイト ページ数10ページ（お知らせ除く）

• 株式会社BuySell Technologiesリクルートサイト ページ数1ページ

こちらの2サイトはいずれも2分程度でデプロイ完了します。 ただ、当社で一番規模が大きい BUYSELL公式サイトではコラム記事があるので数千ページの規模なのですが、 Shifter構築を試したところデプロイだけで1時間以上かかってしまいました。 規模が大きいサイトをShifterを使ってJamstackにするのは現実的ではない為、他の方法を検討しています。

まとめ

いかがでしたでしょうか。 Shifterはかなり規模が大きいサイト以外であれば、簡単にJamstack化することが出来ることがお分かり頂けたかと思います。 今後BUYSELL公式サイト のJamstack化を検討していますので、また改めてTech Blogで紹介できればと思います。