見出し画像

KUSANAGI × WEXAL のWordPress高速化を Google Cloud Platform で試してみた

前回の「KUSANAGI × WEXAL ハンズオンに行ってみた」記事からだいぶ時間が経ってしまいましたが、自分の遊び用ブログをGoogle Cloud Platform (GCP)に移転し、WordPress高速化&最適化のKUSANAGI × WEXALを試してみました。

KUSANAGIを利用できるプラットフォームは数ありますがGCPを選んだ理由は特にありません。一度使ってみたかったというぐらいです。なんとなく、GCP。結局ね、ブランドに弱いんだよね。
詳しくは一覧をどうぞ

実際に試した時期は1月頃、だいぶ前のことを思い出しながら書いています。
その間にKUSANAGIとWEXALの両方がアップデートされたため、当時と現在とで操作が異なる可能性がありますが、気になる方になんとなく「こんな感じかー」と流れをご覧いただければ幸いです…!

GCPに初めて触れる私でも公開まで行けましたので、コンソールを操作したことがあるぐらいの方が趣味で楽しむ分にはそれほど難しくないと思います。

Google Cloud Platformへ登録

まずはGoogle Cloud Platformに登録します。
GCPに新規登録する際、登録から一年間使用できる $300 分のクレジットが付与されました。

Kusanagi for GCPを起動

Google Cloud Platformマーケットプレイスから、「Kusanagi for GCP」を起動します。
※ここでKusanagi for GCP」ではなく「KUSANAGI for GCP Premium Edition」を選んでしまうと、別途料金がかかりますのでご注意ください。

スクリーンショット 2019-11-21 18.14.44

初めてCompute Engineを使用するからか、「課金を有効にする必要があります」とダイアログが出ましたので、そのまま有効にしました。KUSANAGI for GCP自体には料金がかかりませんが、Compute Engineの利用に課金されます。

マシンスペックを選びます。
選ぶ内容によって、料金の見積もりが変わりますが、だいたい月に3千円くらいでした。新規登録であれば、料金は登録から一年間使用できる $300分のクレジットから差し引かれ、しばらくの間は実質無料で利用できます。

せっかくなので(?)東京リージョンの「asia-northeast1-b」を選択、マシンタイプはそのまま「n1-standard-1(vCPU x 1、メモリ 3.75 GB)」、ブートディスクサイズは30GBに変更しました。

これだけでCompute EngineのVMインスタンスが立ち上がりました。

IPアドレスの割り当て

外部からVMインスタンスにアクセスできるように、IPアドレスを割り当てます。

画像2

GCPのメニューから「VPC ネットワーク」→「外部IPアドレス」と進みます。

「静的アドレスを予約」リンクをクリックすると新規作成画面に移ります。適当な名前をつけ、リージョンを「asia-northeast1」に変更し、接続先に先ほど作成したVMインスタンスを選びます。

ここで作成されたIPアドレスをブラウザのアドレスバーに入力すると何やらnginxのウェルカムメッセージが表示されるはずです。

ドメインの紐付け

ブログのドメインを、先ほど作成したIPアドレスに紐付けて、アクセスできるようにします。この手順は一般的なレンタルサーバと同じですね。
ドメインのコントロールパネルを開き、適宜Aレコードを設定します。

コンソールを立ち上げる

いよいよKUSANAGIの設定です。
GCPのメニューから「Compute Engine」→「VMインスタンス」と進みます。
画像3

作成したVMインスタンスの接続「SSH」をクリックすると、コンソールが立ち上がります。

画像4

立ち上がったら、「sudo su -」と入力し、なんでもできるえらいひと(super user)になっておきます。再起動した後も「sudo su -」を忘れないようにしましょう。

KUSANAGIの初期設定

ここからは公式の「KUSANAGIの初期設定」資料をお読みいただくのが良いと思います(アップデートによって変わる可能性があります)。

kusanagi init」コマンドを入力し、対話式にタイムゾーンや言語設定、KUSANAGIのユーザー&パスワードの設定を行っていきます。

KUSANAGIのプロビジョニング

初期設定が終わったら、KUSANAGIでWordPressを利用するための設定に移ります。
詳しくは公式の「KUSANAGIのプロビジョニング」資料をご確認ください。

kusanagi provision kusanagi_html

上記のコマンドを入力し、またまた対話式で、言語、ドメイン名、メールアドレス、データベース名、そしてデータベースのユーザー名&パスワードの設定を行います。

手順の中でLet’s Encryptを設定してくれるので、この手順が終わり次第ブログにSSLでアクセスできるようになります。

WordPressのインストール

設定したドメインにブラウザでアクセスすると、おなじみのWordPressのインストール画面が開きます。
先ほど設定した内容をもとに、日頃と同様にWordPressを設定します。公式の設定資料もあります。

私はこの時点で記事のインポートなどを行いました。
VM インスタンスにFTPで接続する際は、FTPソフトの設定にて、ホスト名にドメイン名を入力し、ユーザー名とパスワードはKUSANAGIのインストール時に設定したものを入力します。
※データベースやWordPressのユーザーではなく、「KUSANAGIの初期設定」で入力したものです

さて、ここまででKUSANAGIを利用できるようになりました。続けてWEXALを利用できるように、設定を進めます。
WEXALを使うには、KUSANAGI Premium Editionにアップグレードする必要があります。

KUSANAGI Premium Editionの導入

KUSANAGIのライセンス購入サイト「KUSANAGI Marketplace」にアクセスし、ライセンス要件を確認して、OKであればエディション「Premium」を選択して購入します。
パーソナルライセンス」であれば無償で利用できます。

購入後、KUSANAGI Marketplaceのマイアカウントにアクセスし、サブスクリプションキーを確認します。

Premium Editionへのアップグレード

VM インスタンスのコンソールから、下記のように入力してアップグレードを行います。

kusanagi update kusanagi —edition premium —use personalkey サブスクリプションキー

WEXALの設定

次にWEXALを有効にします
ここまでWEXALと書いてきましたが、正確には「WEXAL® Page Speed Technology」という名称のため、公式ドキュメントではPSTと表記されています。

公式の「WEXAL® Page Speed Technologyの有効化」資料をご確認いただきたいのですが、ざっくりと、「pst init」でPSTの初期設定を行い、「pst on」でWEXALを有効化し、「pst opt」でリソースを最適化します。

WEXALの管理画面を有効にする

これまでWEXALの設定はコンソールから行う必要がありましたが、先日、ブラウザからアクセスできる管理画面機能「WEXAL PST Manager」がリリースされました。

まず「pst passwd」コマンドで管理画面のBasic認証用のID&パスワードを設定します。

PST Managerにアクセスするためには、指定のポート「61000」に外部からアクセスできるようにGCP側で設定を変更する必要があります。

設定にあたり「【GCP】任意ポートの開放/確認手順」がとても参考になりました。

上記の記事の「8888」の部分を「61000」に書き換えて作業し、「http://IPアドレス:61000/」にアクセスすれば、PST Managerを開けます。

画像5

果たして結果は?

自作テーマはもともと手動で高速化してあったので(笑)テーマを編集して編集してそれらを無効にしてからWEXALを試したところ、確かに点数はアップしました。
モバイルの点数が32点から95点になりました。

スクリーンショット 2019-11-21 17.20.38

画像6


さらに、上記とは異なるテーマでも試したところ、
WEXALをオフにした状態だと17点、WEXAL(自動最適化)を有効にした場合は92でした。

画像8

画像10

ちなみにテーマはSnow Monkeyで、テーマ側のページ速度最適化設定で「Snow MonkeyのJavaScript読み込みを最適化する」「jQueryの読み込みを最適化する」「CSSをheadに出力する」「画像の非同期読み込み」「軽量な FontAwesome を使用する」をONにしてあります。

…ただし、そもそもPageSpeed Insightsはアクセスするタイミング次第で、何もしなくてもコロコロ点数が変わってしまいますので、ゲーム感覚で楽しんだり、参考程度にするのが良いと思います。

また、PageSpeed Insightsに最適化することが高速化なのか、という部分に関してもノーコメントでお許しください…私はもう疲れました…。

超蛇足のひとりごと

KUSANAGIやWEXALとは離れますが、今回初めてCompute Engineを利用してみて、やっぱり細々と書いている趣味ブログに月3000円を出すのはもったいないなと感じました…。もっと力を活かせるジャンルの流行りものブログなら良いと思うのですが、単純にもったいない。

残念ながらWEXALともお別れになってしまいますが、GCPのクレジットが尽つきる頃には、月数百円の格安レンタルサーバに戻そうと思っています。

「負荷を減らすことで速くする」が目的であれば、ジャンルによってはWordPressではなく、静的サイトジェネレーターでも良いと思います。
実は今回のブログも、移転前はWordPressではなくJekyll + GitHub Pagesの組み合わせでした。
そして今では、利便性を加えたmicroCMS + Jekyll + Netlify 推しです。
もし、特別速くなくても良い、ちょっとしたページならSTUDIOもいいな、と。ちなみにSTUDIOのパブリッシュはNuxtのようです。
NuxtとJekyllは目的からして全然違いますし、個人的にはJekyllの方が好きなんですけど他の人には色んな意味でオススメはできないけどどうしてもJekyllの方が好きなどと意味不明な供述(略

何を使って構築するかは、サイトの方向性と、扱う人の利便性を重視して決めるのがベストだと思うので、一概に「○○がオススメ」ということはできないなあと改めて感じています。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

スキスキスー❤︎ ありがとうございます!
4
本名:佐藤あゆみ 屋号:PentaPROgram 東京都・駒込にてウェブ制作屋を営んでいます。 https://pentaprogram.tokyo/ 座右の銘:できるまでやればできる
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。