ConoHa VPS でWEXAL KUSANAGI を導入する手順

WEXAL アイキャッチ

2020年初旬より、ConoHa VPS で WEXAL® Page Speed Technology が利用できるようになります。現段階では動作の保証などはできませんのでご注意下さい。

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

ConoHa VPS には かんたんKUSANAGI というコマンド不要でKUSANAGIをインストールできるテンプレートがあります。WEXALを導入するにはコマンド入力が不可欠ですが慣れない方でも比較的かんたんにKUSANAGIでWordPressを使うことができます。

もちろん、すでにConoHa VPSでKUSANAGIを使っている場合でもWEXALを導入することが可能です。個人なら無償で利用できるので試してみましょう。

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

黒いコマンド画面を見なくてもWeb上でKUSANAGIをインストールできちゃいます。ただWEXALを導入するにはコマンド必須ですよ。

いまなら700円分のクーポンがつきます。いち早くWEXALを体験してみましょう!

ConoHa VPSの特徴
  • 初期費用なし
  • 料金は1時間単位で使った分だけ
  • かんたんKUSANAGI

700円クーポン付き

KUSANAGIがすぐ使える

ConoHaでWEXAL 導入するまでの手順

WEXAL を利用するにあたって手順を踏む必要があります。

ConoHa VPS を契約

アカウントを作成、支払情報を入力

独自ドメインを用意

ConoHa VPSではConoHa WINGや他のレンタルサーバーのような無料で使えるサブドメインは用意されていません。独自ドメインをまだ持っていない場合は、お名前.comムームードメインなどでドメインを入手しておきましょう。

移転する場合は独自ドメインをそのまま使えます!

サーバー追加・KUSANAGI インストール

新規サーバーを追加します。メモリ4GB以上推奨です。

KUSANAGIのインストールはWeb上でガイドに沿っていくだけで完了します。

WEXALインストール

KUSANAGI Premium ライセンスを取得後、WEXALをVPSにインストールします。

ここからはコマンド入力が必要です。

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 のオンオフできるのでビフォーアフターの効果測定もしやすいです。

ConoHa VPS のアカウントを作成

すでにKUSANAGIを導入している場合はここを飛ばして下さい。

参考 ConoHa VPSに登録ConoHa

ConoHa VPSは初期費用がかかりません。なのでアカウントを作るだけなら費用は発生しないので安心して下さい。

支払いには以下のような方法を選択可能です。

  • クレジットカード
  • ConoHa カード
  • ConoHa チャージ (銀行振込、コンビニ払い、Amazon Payなど)

ConoHa カードは10%の学割が適用できるのでお得です。

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

クレジットカード、ConoHaカード、Amazon Payで支払った場合は即時使い始めることができます。他の支払いの場合は1営業日以内になります。

こちらの記事でConoHa の登録方法を紹介していますので登録方法が分からない場合は参考にして下さい。

KUSANAGI アイキャッチ ConoHa VPSでKUSANAGI を導入する手順【極限までWordpPress高速化】

KUSANAGI サーバーを追加

ConoHa VPSのアカウントの作成が完了したら、ログイン後コントロールパネルに移動します。

さっそく新規サーバーを追加しましょう。コントロールパネル左上の「サーバー追加」をクリックします。

サーバー追加
  • VPS > メモリ 4GB
  • イメージタイプ > かんたんKUSANAGI

サーバーのスペックを選択します。WEXALを利用する場合はメモリ4GB以上にしておきましょう。メモリ容量はあとからでも変更可能です。

イメージタイプ > アプリケーションをクリックして、「かんたんKUSANAGI」を選択します。

そして、VPSの rootパスワード をここで設定します。重要なパスワードなので英数字記号を含めた複雑なものを設定しておきましょう。

ネームタグは分かりやすい名前に変更するかそのままでもOKです。

ConoHa スペック
メモリは4GB以上推奨

メモリを大きく消費するのでKUSANAGIでは4GB以上にしておきましょう。

以下の画像は平常時でメモリを2GBを使っている状態です。WEXALが作動するとCPU使用率とともにメモリ使用量がアップするので余裕を持たせておきます。

Mackerel

つづいてSSHキーを登録しておきます。これはサーバーの管理に必要となるのでここで作っておきましょう。下の「オプションを見る」を展開して、SSHキーを新規作成します。

SSHキー追加

ネームタグには任意の名前を付けて、「+追加」をクリックします。

自動作成

自動的にSSH秘密鍵のダウンロードが開始されます。

キーダウンロード
SSHキー

SSHで接続する場合に必須になるので、なくさない場所に保存しておきます。Macなら「~/.ssh/」

インストール直後に実行する「スタートアップスクリプト」を設定できます。不正アクセスを制限する「Fail2ban」をインストールしておくとセキュリティが向上します。

fail2ban

これでサーバーの構成は完了です。右の「追加」をクリックしてサーバーを追加しましょう。

サーバー追加

700円クーポン付き

KUSANAGIがすぐ使える

KUSANAGI をインストール

少し待つとサーバーのインストールが完了します。

ここで、ネームタグをクリックすると「KUSANAGI manager」のウインドウが開きます。

KUSANAGIリスト

このウィンドウは閉じでOKです。

KUSANAGIマネージャーウインドウ

VPSのサーバー情報が表示されます。サーバーのIPアドレスはメモしておきましょう。

KUSANAGI を作成するため、一番左のアイコン「KUSANAGI管理」をクリックします。

  • ユーザー名 「root」
  • パスワード 「サーバー構成時に設定したもの」
ログイン

所有しているドメイン名「hogehoge.com」 > 取得がまだならお名前.comの格安ドメイン(.work .xyzなど)

メールアドレスを入力します。

ドメイン

取得したドメインをVPSのIPアドレスと紐付けておきましょう。

ここではお名前.comで取得した場合です。ムームードメインや、CloudFlareなどで管理している場合でも同様の作業が必要です。

お名前.com Navi へログイン

ドメイン設定 > DNS設定/転送設定 > 対象のドメインを選択

DNSお名前

DNSレコード設定を利用する をクリック

レコード設定

さきほど確認したVPSサーバーのIPアドレスを入力します。ホスト名は「xxxxx.com」であれば空欄でOKです。サブドメイン「hoge.xxxxx.com」にする場合は「hoge」と入れておきましょう。

最後にページ一番下の「確認画面へ進む」をクリック、「設定する」を押してDNSの設定は完了です。

DNS追加完了

DNSをVPSに向けたら続いて設定していきましょう。

DNSの設定

これで自動的にKUSANAGIの構築が完了します。

DNS完了

WordPressの設定を確認・SSL化

KUSANAGI WP設定

WordPress のデータベース名、DBユーザー名、DBパスワードをここで確認できます。

「サイト設定 > SSL化」 をオンにしてSSL(https)を有効にしましょう。DNS Aレコードが問題なく設定されていればすぐにSSL化されます。

WordPressの初期設定

https://xxxxx.com

にアクセスしましょう。DBなどの設定は不要でサイト名や管理ユーザーを設定するだけです。

WP設定

あとは通常のWordPressと同じように投稿、管理ができます。

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

ここからが本番です。WEXALを導入していきましょう。

KUSANAGI Premium ライセンスを取得

KUSANAGI ライセンス

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

KUSANAGI Premium または Business

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

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

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

パーソナルライセンス

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

お支払へ

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

支払情報

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

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

KUSANAGI Marketplace マイアカウント

サブスクリプションキー

KUSANAGI WEXAL を利用する

ここからは SSHでのコンソール作業が必要になります。

ConoHa VPSのコントロールパネルに戻ってサーバーを選択した後、「コンソール」アイコンをクリックしましょう。

VPSコンソール

別ウインドウが開きます。ここにユーザー名「root」、パスワードは「サーバー構築時設定したrootパスワード」を入力します。

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

文字化けしてしまう場合は、一度このウインドウ以外の場所をクリックしてから戻ると直るかもしれません。

ログインできました。kusanagiユーザーのパスワードやMySQLのrootパスワードを確認できます。メモを取ったら書いてあるコマンドを入力して消しておきましょう。

通常はkusanagiユーザー

SSHを利用するときに常時rootユーザーを使うのは好ましくありません。通常の管理はkusanagiユーザーで行います。一度「exit」でログアウトしてユーザー名「kusanagi」、パスワードはコンソールに表示されていたものでログインできます。

コピペしたい場合は、上の「テキスト送信」でコピーした文章を貼り付けることが出来ます。

KUSANAGIログイン

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

ConoHa VPSのコンソールはコピペがしにくかったりして使いにくいです。

記事の最初の方でサーバー構成時にダウンロードしたSSHプライベートキー(秘密鍵)を使って別のSSHクライアントからSSH接続をしたほうが楽です。

SSH接続にはWindowsならTeraTermPuTTY、MacならターミナルやiTermが使われます。私は管理しやすいので、Termius を利用しています。使いやすいものでOKです。

Premium ライセンスキーに更新

アップデート

まずは、パッケージを更新しておきます。

SSH

yum update -y

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

SSH

su -

# 取得したキーを入力してライセンスを切り替え
kusanagi upgrade kusanagi --edition premium --use personal --key XXXX-XXXX-XXXX-XXXX

yum install kusanagi-prem -y

プレミアムへアップデート

Wexalのインストールが始まるのでしばらく待ちます。

Wexal Page Speed Technologyの使い方

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

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

SSH

su -
cd /home/kusanagi/プロファイル名(ドメイン名)

pst init

pst on

# pst の状態を確認
pst status

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

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

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

webp生成

あとWexal のマニュアル に沿って設定していきます。

WordPressの場合は、「wp」「worker」ディレクティブを編集します。

.yaml形式で、値を入れるときは「 [ ] 」を忘れず消しておきます。

SSH

pst edit

# 以下を修正・追加
pst: "on"

wp:
  wexal_init:
  - cmd: remove meta
  wexal_flush:
  - cmd: shorten url

# 本番環境へ適用
pst make

shorten url 適用前

shorten url 適用前

shorten url を適用

shorten url 適用

CSSのURLが「/_wt/〜」に置換されました。

本番用のファイルはこちらですが基本的に直接編集はしません。

pst edit > pst make を使います。

/home/kusanagi/プロファイル名/wexal/pst.config.yaml

下は編集例です。このままだとあまり効果はありませんでした。lazy loadなどは適用されているようですがスコアはほぼ変わりません。

 

worker:
  img:
    "":
    - cmd: auto
      args:
        quality: 60
        resize: 1920x1080
        strip: true
        jpegtran: ab
        pngquant: true
        optipng: o3
      exclude:
      - .png
    .webp:
    - cmd: auto
      args:
        quality: 60
        m: 6
        mt: true
      exclude:
      - .png
    - cmd: fast
      args:
        quality: 60
        m: 4
        mt: true
      apply:
      - .
  css:
  - cmd: auto
    args:
      compiler: cssnano,cleancss
      level: WHITESPACE_ONLY
      ab: true
      ie11: true
      ie11_ab: true
  - cmd: fast
    args:
      compiler: cssnano
      level: WHITESPACE_ONLY
      ab: false
      ie11: false
      ie11_ab: false
    apply:
    - .
  js:
  - cmd: auto
    args:
      compiler: gcc,terser
      level: WHITESPACE_ONLY
      ab: true
      ie11: true
      ie11_cp: babel
      ie11_ab: true
  - cmd: fast
    args:
      compiler: terser
      level: WHITESPACE_ONLY
      ab: false
      ie11: false
      ie11_cp: babel
      ie11_ab: false
    apply:
    - .
lua:
  fcache:
    enable: 1
    exptime: 60
  header_filter: []
  body_filter: []
wp:
  wexal_init:
  - cmd: remove meta
  wexal_head: []
  wexal_enqueue_opt:
  - cmd: remove css
  wexal_footer: []
  wexal_flush:
  - cmd: shorten url
  - cmd: repair jquery
  - cmd: reduce script
    args:
      apply_script: jquery
  - cmd: lazy load
    args:
    - element: picture
      skip: 2
    - element: img
      skip: 3
    - element: iframe
      disable: true

AI を使った設定方法

戦略AI David (デイビッド)を使うと、手入力で設定を編集する必要もなく自動で最適なレンダリングされるように設定ファイルを作ってくれます。

ここからはまだ検証中です。ConoHa VPS のWEXAL正式対応は2020年初旬からです。

 

cd /home/kusanagi/プロファイル名
pst ai config

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

AI

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 

Lighthouseで計測

Chrome の拡張機能を使って計測できます。

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

同ページをビフォーアフターで計測してみました。

  • プラグインなし
  • 記事内には写真5枚と1,300文字程度

KUSANAGI インストール直後

2020テーマ

twenty-twentyテーマでは当然のようにスコアは100になります。

SANGO テーマの場合

SANGO + Poripu テーマを入れて計測。設定はいじらずそのままです。

WEXAL 適用後

AI を使わずに、WEXALのマニュアル通りに設定ファイルを作って適用してみました。もともとスコアが高いからかはほとんど変わってませんね。

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

テーマによっては、Lighthouseのアドバイスを見ながら子テーマを手動で編集するだけでもスコアは改善します。またメタディスクリプションや画像にALTをつけるようにしましょう。

autoptimized

ここで、pst on 、 pst off を切り替えるとWEXALの効果が実感できます。明らかに First Contentful Paint の速度が上がるのが確認できました。

700円クーポン付き

KUSANAGIがすぐ使える

関連する記事

KUSANAGI移転 アイキャッチ 他サーバーからKUSANAGIへ引っ越す場合の手順 【ダウンタイム最小限】 アイキャッチ KUSANAGI 高速WordPress環境 全自動インストール 【稼働まで15分】 KUSANAGI アイキャッチ ConoHa VPSでKUSANAGI を導入する手順【極限までWordpPress高速化】 アイキャッチ GCP に WEXAL KUSANAGI をインストールする手順

コメントを残す

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