話題のサーバレスWordPressと言われる「Shifter」触ってみた

WordPress構築歴10年位以上、インフラもそこそこやれるPHPエンジニアが最近話題の「Shifter」を実際に触ってみました。
この記事はどちらかというと業界向けです。視点がエンジニアなので一般の方には向かないかもしれませんが、できるだけ細かく解説します。
今回は「Shifter」の紹介と簡単な使い方、最後に「検索」は動くのか？というお話まで。

サーバレスWordPress「Shifter」とは

そもそもWordPressなのに「サーバーレス」ってどうゆこと？？
Shifterのサイトにはこう書いてあります。(Chrome翻訳機能にて翻訳したものです)

常にオンになっている静的ページを無制限のスケーラビリティでホストし、必要なときだけオンになる完全管理のコンテナ環境でWordPressを実行します。

https://www.getshifter.io/

さらに

静的サイト生成とサーバーレスアーキテクチャを組み合わせて、WordPressサイトにエンドツーエンドのデータ暗号化と無制限の拡張性を提供し、世界中どこでも超高速でサービスを提供します。

https://www.getshifter.io/

日本語版のページもありましたので共有しておきます。（2019.07.31追記）
ただLPなのでこのページだけですけど。

Shifter(日本語版)

WordPressが使える静的サイト生成サービス

まだちょっと分かりにくいかもしれませんが、簡単にまとめてしまうと「サイトの情報更新にはWordPressの管理画面が使えるけど、表側（一般の人が見る情報）は静的なHTMLとして提供できるサービス」ということになります。

そもそもWordPressは動的サイト向けのCMSです。
この「Shifter」と似た動作としては「MovaleType」というCMSがあり、これも管理画面でページの作成を行い、「生成」という作業、記事の一覧を含めた表用のHTMLを生成して、それをみんなに見せるタイプです。

じゃあMovaleTypeでいいんじゃないの？今さらなんでShifter?

という疑問が出てきますが、そこは「これまでのWordPressの資産が活用できる」という１点で今注目を浴びているものと思います。

Shifterが話題になっている理由

WordPressは全世界的にシェアを拡大したことで、そのノウハウがネット上に溢れています。ちょっと調べれば大体のやりたい事は、そのやり方を解説したページが見つかります。（言い過ぎですか？）
ただ、それでも問題視されている点が２つ。それは安全性と表示速度について。

安全性について

WordPressは動的サイトを運用する仕組みで、この「動的サイト」の場合、閲覧者からの要求に応じてサイトの表示を変更したり、様々な機能を提供できます。※ここが「動的」と言われる所以です。

逆に「静的サイト」はすでに完成しているHTMLやCSS、JavaScriptの組み合わせをブラウザで計算、表示するだけなので、閲覧者からの要求を受け付けません。

この違いにより「動的サイト」では悪意ある閲覧者が、不正な要求をした場合に、それを拒否、排除する仕組みが必要になるのですが、そこに「抜け穴（＝セキュリティーホール）」があると、悪意を持って侵入し、害を及ぼされる可能性が出てしまいます。

さらに有名なサイト（あのアメリカ合衆国のホワイトハウスのサイトもWordPressです。）でも利用されていることと、オープンソースということが合間って、ハッキング、クラッキングのターゲットになってしまいました。
WordPress自体はオープンソースですから無料で利用できますが、そのセキュリティ対策に費用がかかり、リスクと費用を考えると割りに合わないのでは？という意見も出ています。

表示速度について

「Shifter」は静的サイトを作ってくれるサービスです。「静的サイト」は「動的サイト」より表示速度において優れています。
動的サイトでも表示速度を早くする方法はいくつかありますが、最終的には静的サイトと同じような構成に近づきます。

さらに「Shifter」はCDN（Contents Delivery Network.詳しい内容はこの辺り参照してください。CDN（コンテンツ・デリバリ・ネットワーク）とは／What is CDN）も自動でセットアップしてくれるそうなので、表示速度にはかなり期待ができます。

WordPressのいいところを残して問題を解決したのがShifter?

WordPressの資産を活かして、安全性と表示速度という問題が改善されるってことはShifter最強じゃないですか！？

て思いますよね？？
でもこの時点で私個人はすでに「？？」
「そんな都合よく行くか？」
「そもそもサーバーレスでしょ？」

「動的サイト」と「静的サイト」の違いを、その仕組みじゃなく、性質として理解していれば私と同じように「？？」な状態になると思います。

「Shifter」を使ってみる

前置きが長くなりましたが、実際に使ってみましょう。
お試しなら無料で始められます。
サイトは英語版しかないので、英語読めない人はChrome翻訳などで頑張って。

まずはアカウントの作成

https://go.getshifter.io/register

まずはここからアカウントを作成します。
名前、ユーザー名（ログインに使用、あとで変更できません）、メールアドレス、パスワードを入力して「Continue」をクリック。
すぐにメールが届きます。
が、私の場合迷惑メールに分類されてしまって、しばらく気づきませんでした。

サイトを立ち上げる

メール記載のURLをクリックすると、アカウント作成が完了しますので、先ほど登録したユーザー名かメールアドレスでログインできます。

ログインするとこんなメッセージが。
「ハッカーからも安全で早くて完全な静的サイトをWordPressで作りますよ。まずは最初のサイトを作ってね」と言ったところでしょうか。

メッセージの通りログイン直後はこの様にサイトがないので、「Create New」から新しいサイトの登録から始めます。

サイトの登録はサイトの名称（Shifter内ので管理用）入力と管理するチームを選択するだけ。フリーアカウントなので有料プランや独自ドメインのやり方はここでは書いてありません。

フリーアカウントの場合、新しく作成したサイトは７日間のみ有効で、その後自動で削除されてしまう様です。

新しいサイトが作成されると「Sites」画面にて登録したサイトが選択できますので、サイト毎の管理画面に移動します。

サイト閲覧用のURLとサイトのキャプチャ、状態、アーティファクトの状態が確認できます。（「アーティファクト」の解説は後述）

このサイトの場合、公開URLは「https://evil-swartz4817.on.getshifter.io」
ステータスは「Running」
アーティファクトは「まだない」
という状態です。

この時点で「WordPress」が起動した状態になっています。
右上のサーモンピンクのボタンに「Stop WordPress」と表示されているのが、起動している状態です。逆に「WordPress」が停止している場合はのボタンが表示されます。

いざWordPressの管理画面へ

隣の「Dashboard」ボタンをクリックしてみます。

見慣れたWordPressのダッシュボードが表示されました！

（初期状態では「英語」表記になっていますので、お好みで「Settings」から他の言語に変更してください。）

この状態になると一般的なWordPressと全く変わりありません。
「サイトを表示」するとそのままいつも通りサイトの表側が表示されます。

「Shifter」は静的サイトなので、上記画面（投稿）にも書いてありますが、「検索」は動くのか？という疑問が浮かびますが、この画面では動きました。ちゃんと検索されます。
ただ、この画面は一般に公開されていません。
この状態のURLを見てください。(一部マスクしています。マスク部分には「Site ID」と呼ばれる一意の値が割り当てされています)

URLが公開URLとは別物です。またポート番号も一般的なHTTPSではありません。
これが「Shifter」の肝となる部分。

常にオンになっている静的ページを無制限のスケーラビリティでホストし、必要なときだけオンになる完全管理のコンテナ環境でWordPressを実行します。

https://www.getshifter.io/

この部分です。
この状態はWordPressを一時的な仮想環境で実行しているだけですので、この後「公開」作業が必要になります。

静的サイトデータ（アーティファクト）生成

WordPressでの記事作成、公開作業は割愛し、作業が完了したらShifterの画面に戻ります。

一般公開のためにはここで「アーティファクト」を作成する必要があります。

アーティファクトとは？

Artifacts on Shifter are static versions (or builds) of your WordPress site. They are an entire copy of your site as HTML, CSS, and assets.

ShifterのアーティファクトはあなたのWordPressサイトの静的バージョン（またはビルド）です。
それらはHTML、CSS、そして資産としてのあなたのサイトの全体のコピーです。

https://support.getshifter.io/en/articles/1055220-creating-an-artifact

「Artifact Title」に生成するアーティファクトの名称を入力します。
これはバージョン名です。「初回記事公開」とか「20190725Shifterの記事アップ版」とか、どの記事が公開されたいつのバージョンか分かる名称が良いです。

生成するアーティファクトは履歴として残り、ロールバック（元に戻すこと）もできますので「バージョン１」とか「バージョン20190725」とか何が更新されたのか分からない物はオススメしません。

「Generate」ボタンをクリックすると、アーティファクトは生成が始まります。

この時WordPressが起動したままだと「アーティファクト生成中はWordPressにアクセスできませんよ」と注意メッセージが出ますが、共同編集などしていない場合は、そのままもう一度「Generate」ボタンクリックで大丈夫です。

WordPressが停止し、生成が始まります。

「Generate Artifact」の下「Artifact」の欄に生成中のアーティファクトが表示され「Generating」と表示されますので、ここが「View Site」になるまで待ちます。

静的サイトの表示確認

アーティファクトの生成が完了したら「View Site」をクリックしてみましょう。

公開URLにて、先ほどWordPressの画面で見たものと同じ状態が確認できます。
テーマがデフォルト「」ですが、さすが静的サイト。データの払い出し速度がTTFBが48.02msと速いですね。

ちなみにWordPress版の場合
TTFBが268.63ms
静的サイトの５倍ほど時間が掛かっています。

さて、ここまでは簡単な「Shifter」の使い方でした。
で、途中「この画面では動きました」と書いた「検索」について。
静的サイト版でも試してみます。

結果：動きません。

まぁ予想通りですね。静的サイトなので閲覧者からの要求は受け付けていませんから。

「なぁんだ。結局使えないじゃん！」と言うにはまだ早い！！！

検索機能に関してはちゃんと開発元が解決策を提供しています。

WP Serverless Search

静的検索プラグインです。Shifterを使った静的WordPressサイトでサイト内検索が可能となりました。

https://www.digitalcube.jp/products/

プラグインという形で解決策を提供しています。
詳細はGithubへのリンクになっていますが、プラグインとしてZipをダウンロード後、WordPressへインストール。検索フォームのHTMLを修正することで機能する様です。
さわりだけコードを覗いてみましたが、検索用のxmlフィードを生成して、それをJavaScriptで検索している様ですね。

今回の記事はここまで。
次回は、もう少し突っ込んだ「Shifter」の使い方と、この「WP Serverless Search」プラグインも試したいと思います。

今回の感想

• 「Shifter」自体は面白い取り組みだと思う
• 動的機能が必要な場合に、色々未知数
• サイトの要件次第だけど、あまりお客様に勧められる状態ではない
• 結局AWS S3とかで同じ様な状況が作れるのでは？

といったところで、今の時点では「自分のスキルやお客様の要望次第で、可能性があるかな？」といった印象でした。