GCP に WEXAL KUSANAGI をインストールする手順

アイキャッチ

WordPress の高速環境 KUSANAGI をさらにパワーアップさせるのが Wexal (ウェクサル) Page Speed Technology です。

Wexal を利用するにあたって手順を踏む必要があります。今回は導入しやすい Google Cloud Platform を使って KUSANAGI 上で Wexal を利用する方法を紹介します。

ConoHa VPS で利用する方法はこちらからどうぞ。

WEXAL アイキャッチ ConoHa VPS でWEXAL KUSANAGI を導入する手順

Wexal ってなんなの?

出典:DHT
Wexal
  • 戦略AI David
  • 最適なリソースへ置き換え (.jpg > .webp)
  • CSS、JavaScript の最適化
  • PSI、Lighthouse のスコアの向上

ごく簡単に言うと、KUSANAGIが内部(サーバー)の高速化、Wexalが外部(ブラウザレンダリング)の最適化を行います。

KUSANAGI だけでも十分高速化はされるのですが、Wexalを使うことでPage Speed Insight のスコアの改善が可能です。

https://tabikumo.com/img/2018/09/face-icon-boy.png

オリジナルの要素には手を加えないのが特徴です。コマンド一つで Wexal のオンオフできるのでビフォーアフターの計測もしやすいです。

つまり、せっかくKUSANAGI が使えるなら Wexal を使ってみよう!ということです。

Wexal が使えるサーバー

KUSANAGI ライセンス

まず、Wexal を利用するにはKUSANAGI ライセンスの切り替えが必要です。

KUSANAGI Premium または Business

といっても、KUSANAGI Marketplaceで個人であれば無償(0円)で購入・利用できますので安心して下さい。

KUSANAGI Wexal が利用できる主なサーバー

参考:KUSANAGIのエディションとアップグレード

  • Google Cloud Platform
  • Microsoft Azure
  • Amaozon Web Service
  • ConoHa VPS
  • さくらのVPS ( 調整中 )

ほかに、Vagrant、VMWareでも実行可能です。

KUSANAGI Premium ライセンスを取得

参考 KUSANAGIパーソナルライセンスKUSANAGI Marketplace

KUSANAGI Marketplace に移動して、パーソナルライセンス エディション「Premium」を購入します。金額は0円でクレジットカードなどの支払い情報入力はありません。

パーソナルライセンス

カートに入れたら、お支払いへ進みます。

お支払へ

名前、住所、電話番号、メールアドレスを入力したら、利用規約にチェックして注文します。

支払情報

登録したメールアドレスにユーザー名とパスワードが書かれたメールが届くのでチェックしましょう。

そのままマイアカウントへ移動すると、プレミアムエディションのサブスクリプションキーが表示されるので確認しましょう。

KUSANAGI Marketplace マイアカウント

サブスクリプションキー

GCPでKUSANAGI

GCP = Google Computing Platformは初登録であれば1年で300ドル(約32000円)分無料で利用できます。ただし、利用開始するには本人確認のためクレジットカードの登録が必要です。

https://tabikumo.com/img/2018/09/face-icon-boy.png

本番環境前にテストするのに最適です。

参考 Google Cloud Platfotm ログインGoogle

GCPの登録方法は本旨ではないので、ググッて調べてみましょう。

参考 GCE すべての料金GCP

1年間で300ドル以内であれば支払いは発生しませんが、継続する利用する場合は頭に入れておくとよいでしょう。

GCPはレンタルサーバーやConoHa のように定額ではありません。

GCPの料金はインスタンス(サーバー)料金 + データ転送料金です。データ転送量はアクセス数が増えるほど当然多くなります。

無料枠もあるのですがスペックが低いのでKUSANAGI運営は不可能です。

ここでは東京リージョンでインスタンスを作成した場合の料金になります。(アメリカのほうが料金は安い)

インスタンスにかかる料金 (東京リージョン)

CPU 1CPU1コア あたり 20.76ドル = 2,272円

メモリ 1GB あたり 2.77ドル = 303円

SSD 1GB あたり 0.062ドル = 6.7円

1CPU メモリ4GB、SSD 30GB で運用すると約3,685円となります。

加えてデータ転送料金が発生します。

転送料金 (東京リージョン)

1GB あたり 0.14ドル = 15.3円 (2TBまで)

サイトの運営規模にもよりますが、月1TBの転送量が発生すると約15,300円となります。(月100万PV程度)

ちなみにGCPのインスタンスへのアップロード料金は無料です。

KUSANAGI インスタンスを作成

一番上のメニューに表示されている検索バーに「kusanagi」と入力します。すると、「KUSANAGI for GCP」があるのでこちらを選択します。(ここではPremium Editionを選ばないで下さい。 )

kusanagi market

「COMPUTE ENGINE上で起動」をクリック

GCPで起動

新しいKUSANAGI インスタンスを作成します。

インスタンスの作成
  • Deployment name = インスタンスの名前
  • Zone = asia-northeast1-x を選択 (東京リージョン)
  • Machine type = そのままでOK、あとで変更可能
  • Boot disk size = 30GB (自由に)

これだけ入力したら一番下の「デプロイ」をクリックします。インスタンスが作成されるまで少し待ちましょう。

KUSANAGI インスタンス初期設定

インスタンスがデプロイされたら、右の「SSH」をクリックしてターミナル画面を起動します。別ウインドウが開いてインスタンスへ接続が開始されます。

kusanagi-ssh

SSHで初期設定

まずはパッケージのアップデートをします。これは少し時間がかかります。

SSH

sudo su
yum update

次にKUSANAGIの初期設定を行います。

SSH

kusanagi init

タイムゾーンの設定

キーボードで「tokyo」と打って「Asia/Tokyo」を選択します。

タイムゾーン

利用する言語を選択

KUSANAGIのコンソールで利用する言語を選択します。英語・日本語どちらでもOKです。日本語の場合は「2」を押してEnterしてください。

kusanagiの言語

キーボードレイアウトの言語を選択

日本語キーボードか英語キーボード配置を選択します。Macなどで英字キーボードを利用している場合は英語にしておきます。

キーボードレイアウト

kusanagi ユーザーのパスワード

ユーザー名 「kusanagi 」はKUSANAGIの管理に利用するユーザーです。

WordPressのプラグイン自動更新などの設定などにも利用するので、推測しにくい複雑なパスワードを設定しておきましょう。確認のためもう一度入力します。

kusanagiパスワード

認証鍵のパスワードを設定

認証鍵にパスワードを設定しておくとより安全です。SSH接続時に設定したパスワードの入力が求められます。ここは空でEnterにしてパスワードなしにすることも可能です。

認証鍵パスワード

nginxかApacheを選択

ここは何も入力せず Enter

サーバーの選択

PHPのバージョン

同様に 何も入力せず Enter

PHPバージョン

MariaDB か PostgreSQLを選択

特にこだわりがなければ Enter

DB選択

MySQL のroot ユーザーのパスワードを設定

データベースのrootパスワードを8文字以上で入力します。確認のため2回入力が必要です。

これで KUSANAGI の初期設定が完了です!

一行で設定する場合

kusanagi init はコマンドでまとめて設定することも出来ます。

SSH

kusanagi init --tz tokyo --lang ja --keyboard ja --passwd 【kusanagiのパスワード】  --nophrase --dbsystem mariadb --dbrootpass 【rootのDBパスワード】 --nginx --php7 --ruby24

SSHクライアントで接続する方法

ここでのユーザー名は@gmail.com の前のアカウント名になります。

SSH

cat /home/ユーザー名/kusanagi.pem

# もしくは
cat ~/kusanagi.pem
kusanagi.pem

別のSSHクライアントで利用する場合は、/home/kusanagi/ユーザー名/kusanagi.pem をコピーして秘密鍵として利用します。SSHログインのユーザー名は「kusanagi」

セキュリティの強化

ここでは割愛しますが、SSHポートを変更したりして外部からアクセスできないようにしておきましょう(別途GCPでファイアウォールの設定が必要)。もしくはfail2banを入れておきます。

KUSANAGI Wexal を利用する

最初に取得したサブスプリプションキーを入力してPremiumライセンスに更新しましょう。

SSH

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

WordPressの言語

ドメインがある場合は、「xxxx.com」をここに入力します。

ドメイン名
IPアドレスで登録しておいてもOK

まだドメインがない場合は、インスタンスのIPアドレスで登録しておくことも可能です。あとからでもドメイン名とSSLを適用できます。IPアドレスは GCPの左上のメニューアイコン > Cumputing Engine > VMインスタンス > 外部IP で確認できます。

続いてLet’s Encrypt で利用するメールアドレスを指定します。入力をスキップするとSSL証明書の取得がされません。

WordPressで利用するデータベース名、DBユーザー名、DBパスワードを設定します。

パスワードは8文字以上です。

DBの設定

問題なければ、SSL取得に成功してWordPressの構築が完了します。

SSL取得完了
一行でWordPress プロビジョン

kusanagi init はコマンドでまとめて設定することも出来ます。

SSH

kusanagi provision --wplang ja --email 【メールアドレス】 --fqdn 【ドメイン名】 --dbname 【データベース名】 --dbuser 【データベースユーザー名】 --dbpass 【データベースパスワード】 【プロファイル名】

WordPressのセットアップ

https://xxx.com にアクセス

表示できない場合は、ドメイン名が間違っていないか、DNSが適切に設定できているか確認してください。

セットアップ

設定したデータベース名、ユーザー名、パスワードを入力します。

データベース

サイト名、管理ユーザー名とパスワードを設定してWordPressの構築完了です。

サイト設定

あとは通常通りの管理ができます。

Wexal Page Speed Technologyの使い方

Wexal のマニュアルが公開されています。こちらをチェックしましょう。

参考 WEXAL® Page Speed Technologyに関するドキュメントWEXAL

SSH

sudo su
cd /home/kusanagi/プロファイル名

pst init

pst on

# pst の状態を確認
pst status

# 画像・リソースの最適化
pst opt

wexal/optdir/wp-content/uploads/2020/x

のディレクトリを見るとしっかり.webpが生成されているのが分かります。

webp生成

あとWexal のマニュアル に沿って設定しておけばOKです。

SSH

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

記事数によって時間がかかりますのでしばらく待ちましょう。

AI David

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 の拡張機能を使って計測できます。

参考 Lighthouse Chrome拡張Google ウェブストア

たびくも内の同ページをビフォーアフターで計測してみました。大きくスコアがアップしています。

Wexal前
Wexal オフ
Wexal適用後
Wexal オン

Wexalは日々進化中

まだまだ使いこなせていないので、記事の内容をブラッシュアップしていきます。設定の間違いなどもあると思うので修正予定です。とりいそぎ、Wexalの効果を実感できました。

ここでは書ききれない仕様がたくさんあります。マニュアルなどを見ながら試行錯誤してみましょう。

SSH

pst --help

参考URL

KUSANAGIの高速化とフロント側の高速化(穂苅智哉氏)

Googleの「速度バッジ」とKUSANAGI・フロント側最適化

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です