WordPress の高速環境 KUSANAGI をさらにパワーアップさせるのが Wexal (ウェクサル) Page Speed Technology です。
Wexal を利用するにあたって手順を踏む必要があります。今回は導入しやすい Google Cloud Platform を使って KUSANAGI 上で Wexal を利用する方法を紹介します。
ConoHa VPS で利用する方法はこちらからどうぞ。
Wexal ってなんなの？
- 最適なリソースへ置き換え (.jpg から .webp へ)
- CSS、JavaScript の最適化
- PSI、Lighthouse のスコアの向上
ごく簡単に言うと、KUSANAGIが内部(サーバー)の高速化、Wexalが外部(ブラウザレンダリング)の最適化を行います。
KUSANAGI だけでも十分高速化はされるのですが、Wexalを使うことでPage Speed Insight のスコアの改善が可能です。
オリジナルの要素には手を加えないのが特徴です。コマンド一つで Wexal のオンオフできるのでビフォーアフターの計測もしやすいです。
つまり、せっかくKUSANAGI が使えるなら Wexal を使ってみよう！ということです。
Wexal が使えるサーバー
まず、Wexal を利用するにはKUSANAGI ライセンスの切り替えが必要です。
KUSANAGI Premium または Business
といっても、KUSANAGI Marketplaceで個人であれば無償(0円)で購入・利用できますので安心して下さい。
KUSANAGI Wexal が利用できる主なサーバー
- Google Cloud Platform
- Microsoft Azure
- Amaozon Web Service
- ConoHa VPS
- さくらのVPS
ほかに、Vagrant、VMWareでも実行可能です。
KUSANAGI Premium ライセンスを取得
KUSANAGI Marketplace に移動して、パーソナルライセンス エディション「Premium」を購入します。金額は0円でクレジットカードなどの支払い情報入力はありません。
カートに入れたら、お支払いへ進みます。
名前、住所、電話番号、メールアドレスを入力したら、利用規約にチェックして注文します。
登録したメールアドレスにユーザー名とパスワードが書かれたメールが届くのでチェックしましょう。
そのままマイアカウントへ移動すると、プレミアムエディションのサブスクリプションキーが表示されるので確認しましょう。
GCPでKUSANAGI
GCP = Google Computing Platformは初登録であれば1年で300ドル(約32000円)分無料で利用できます。ただし、利用開始するには本人確認のためクレジットカードの登録が必要です。
本番環境前にテストするのに最適です。
GCPの登録方法は本旨ではないので、ググッて調べてみましょう。
KUSANAGI インスタンスを作成
一番上のメニューに表示されている検索バーに「kusanagi」と入力します。すると、「KUSANAGI for GCP」があるのでこちらを選択します。(ここではPremium Editionを選ばないで下さい。 )
「COMPUTE ENGINE上で起動」をクリック
新しいKUSANAGI インスタンスを作成します。
- Deployment name = インスタンスの名前
- Zone = asia-northeast1-x を選択 (東京リージョン)
- Machine type = そのままでOK、あとで変更可能
- Boot disk size = 30GB (自由に)
これだけ入力したら一番下の「デプロイ」をクリックします。インスタンスが作成されるまで少し待ちましょう。
KUSANAGI インスタンス初期設定
インスタンスがデプロイされたら、右の「SSH」をクリックしてターミナル画面を起動します。別ウインドウが開いてインスタンスへ接続が開始されます。
SSHで初期設定
まずはパッケージのアップデートをします。これは少し時間がかかります。
sudo su
yum update次にKUSANAGIの初期設定を行います。
kusanagi initタイムゾーンの設定
キーボードで「tokyo」と打って「Asia/Tokyo」を選択します。
利用する言語を選択
KUSANAGIのコンソールで利用する言語を選択します。英語・日本語どちらでもOKです。日本語の場合は「2」を押してEnterしてください。
キーボードレイアウトの言語を選択
日本語キーボードか英語キーボード配置を選択します。Macなどで英字キーボードを利用している場合は英語にしておきます。
kusanagi ユーザーのパスワード
ユーザー名 「kusanagi 」はKUSANAGIの管理に利用するユーザーです。
WordPressのプラグイン自動更新などの設定などにも利用するので、推測しにくい複雑なパスワードを設定しておきましょう。確認のためもう一度入力します。
認証鍵のパスワードを設定
認証鍵にパスワードを設定しておくとより安全です。SSH接続時に設定したパスワードの入力が求められます。ここは空でEnterにしてパスワードなしにすることも可能です。
nginxかApacheを選択
ここは何も入力せず Enter
PHPのバージョン
同様に 何も入力せず Enter
MariaDB か PostgreSQLを選択
特にこだわりがなければ Enter
MySQL のroot ユーザーのパスワードを設定
データベースのrootパスワードを8文字以上で入力します。確認のため2回入力が必要です。
これで KUSANAGI の初期設定が完了です！
kusanagi init はコマンドでまとめて設定することも出来ます。一行で設定する場合は以下のようにします。
kusanagi init --tz tokyo --lang ja --keyboard ja --passwd 【kusanagiのパスワード】 --nophrase --dbsystem mariadb --dbrootpass 【rootのDBパスワード】 --nginx --php7 --ruby24SSHクライアントで接続する方法
ここでのユーザー名は@gmail.com の前のアカウント名になります。
cat /home/ユーザー名/kusanagi.pem
# もしくは
cat ~/kusanagi.pem
別のSSHクライアントで利用する場合は、/home/kusanagi/ユーザー名/kusanagi.pem をコピーして秘密鍵として利用します。SSHログインのユーザー名は「kusanagi」
セキュリティの強化
ここでは割愛しますが、SSHポートを変更したりして外部からアクセスできないようにしておきましょう(別途GCPでファイアウォールの設定が必要)。もしくはfail2banを入れておきます。
KUSANAGI Wexal を利用する
最初に取得したサブスプリプションキーを入力してPremiumライセンスに更新しましょう。
sudo su
# 取得したキーを入力してライセンスを切り替え
kusanagi upgrade kusanagi --edition premium --use personal --key XXXX-XXXX-XXXX-XXXX
yum install kusanagi-prem -y
Wexalのインストールが始まるのでしばらく待ちます。
WordPress のプロビジョン
freenom やお名前.comの格安ドメインなどを取得しておきましょう。試験的に運用するなら既存ドメインのサブドメインを利用してもかまいません。
ドメイン取得後はドメインのDNS AレコードをGCPのインスタンスへ向けておきます。
kusanagi provision 任意のプロファイル名プロファイル名はそのまま 「/home/kusanagi/プロファイル名/ 」のようになるのでドメイン名など分かりやすい名前にしておくといいですね。
次に、WordPress で利用する言語を選択します。日本語の場合は「2」を入力して Enter
ドメインがある場合は、「xxxx.com」をここに入力します。
まだドメインがない場合は、インスタンスのIPアドレスで登録しておくことも可能です。あとからでもドメイン名とSSLを適用できます。IPアドレスは GCPの左上のメニューアイコン > Cumputing Engine > VMインスタンス > 外部IP で確認できます。
続いてLet’s Encrypt で利用するメールアドレスを指定します。入力をスキップするとSSL証明書の取得がされません。
WordPressで利用するデータベース名、DBユーザー名、DBパスワードを設定します。
パスワードは8文字以上です。
問題なければ、SSL取得に成功してWordPressの構築が完了します。
一行でWordPress プロビジョン
kusanagi provision --wplang ja --email 【メールアドレス】 --fqdn 【ドメイン名】 --dbname 【データベース名】 --dbuser 【データベースユーザー名】 --dbpass 【データベースパスワード】 【プロファイル名】WordPressのセットアップ
https://xxx.com にアクセス
表示できない場合は、ドメイン名が間違っていないか、DNSが適切に設定できているか確認してください。
設定したデータベース名、ユーザー名、パスワードを入力します。
サイト名、管理ユーザー名とパスワードを設定してWordPressの構築完了です。
あとは通常通りの管理ができます。
Wexal Page Speed Technologyの使い方
Wexal のマニュアルが公開されています。こちらをチェックしましょう。
sudo su
cd /home/kusanagi/プロファイル名
pst init
pst on
# pst の状態を確認
pst status
# 画像・リソースの最適化
pst optwexal/optdir/wp-content/uploads/2020/x
のディレクトリを見るとしっかり.webpが生成されているのが分かります。
あとWexal のマニュアル に沿って設定しておけばOKです。
pst edit
# 以下を修正・追加
pst: "on"
wp:
wexal_init:
- cmd: remove meta
wexal_flush:
- cmd: shorten url本番用のファイルはこちらですが基本的に直接編集はしません。
/home/kusanagi/プロファイル名/wexal/pst.config.yaml
AI を使った設定方法
cd /home/kusanagi/プロファイル名
pst ai config記事数によって時間がかかりますのでしばらく待ちましょう。
wexal/David.config.yaml というファイルができるので、pst.config.yamlと入れ替えます。
ただし、表示ができなくなる場合があるので、必ずバックアップをしておきます。
mv wexal/pst.config.yaml wexal/pst.config.yaml.bak
cp wexal/David.config.yaml wexal/pst.config.yaml CloudFlare を利用してアクセス制御
ここは飛ばしてOKです。
- CDNでデータ転送量の節約
- アクセス制御
- リバースプロキシ
- GCP インスタンスのエフェメラルIPを自動更新
GCPでは中国・オーストラリアへの下り回線は料金が高くなるので、CloudFlareを使って2国からのアクセスを遮断しておきます。GCPのFirewall rulesを使う方法もありますが結構手間です。
Lighthouseで計測
Chrome の拡張機能を使って計測できます。
たびくも内の同ページをビフォーアフターで計測してみました。大きくスコアがアップしています。
Wexalは日々進化中
まだまだ使いこなせていないので、記事の内容をブラッシュアップしていきます。設定の間違いなどもあると思うので修正予定です。とりいそぎ、Wexalの効果を実感できました。
ここでは書ききれない仕様がたくさんあります。マニュアルなどを見ながら試行錯誤してみましょう。
pst --help
