WEXAL® Page Speed Technology®を使ってみよう ~インストール&セットアップ編~

福田拓朗

WEXAL Page Speed Technologyを使うとフロントエンドの最適化ができます。ここでは導入方法を解説しています。

WEXAL® Page Speed Technology® を使うためにエディションの選定をする

KUSANAGIをインストールしたあと、機能を最大限活用してみたいと思ったらフロントエンドの最適化を有効化してみましょう。フロントエンド最適化のプロダクトの名前はWEXAL® Page Speed Technology® (以下PST)といいます。

VPS/クラウドには3種類のエディションでPSTが利用可能です。それは、KUSANAGI 8 Premium Edition、KUSANAGI 9 Premium Edition、およびKUSANAGI Reverse Proxy Limited Editionです。
共用(レンタル)サーバでは、日本国内においてはGMOインターネットグループが提供するお名前.com レンタルサーバー、もしくはConoHa WINGにおいて利用可能です。

以下ではKUSANAGI 9 Premium Editionにおいて、すでにインストールされているWordPressのプロファイルに対してPSTをインストール・セットアップし、動作していることを確認するまでの手順を説明します。

PSTの初期セットアップをする

まず、PSTはkusanagi-prem3というパッケージに同梱されています。KUSANAGIのPremium Editionにすでにアップグレードされている場合はデフォルトでインストールされています。以下のコマンドを実行し、念のため確認しましょう。

rpm -qi kusanagi-prem3

もし「package kusanagi-prem3 is not installed」と表示がされた場合は、KUSANAGI Premium Editionでないことが考えられますので、アップグレードを実行後再度確認してください。

次に、PSTの初回セットアップを行います。なお、一部コマンドラインの操作が必要ですので、SSHやクラウド上のコンソールでログインしてsudoが使える権限を持った状態にしておいてください。

PST Managerのユーザ作成方法

PST Managerというウェブブラウザのインタフェースにログインするために、まずはユーザを作成します。以下のコマンドを実行してください。

[username@hostname~]$ sudo pst passwd add --user (ユーザ名)--pass (パスワード)
passwd completed.

PSTのプロファイルのセットアップ方法

また、合わせて初期設定も行ってください。以下のコマンドでできます。

[username@hostname~]$ sudo pst init (プロファイル名)
Start create nginx conf.
Finished create nginx conf.
pst watch stopped.
pst watch started.
Info: open PST Manager form http://(グローバルIP):61000
initdb completed.
opt completed.
init completed.

なお、Premium EditionをWebからセットアップした場合は初期のプロファイル名はkusanagi_htmlとなっています。もし、CLIからセットアップしたあとに対象のプロファイル名を忘れてしまった場合や、念のためプロファイル名を確認したい場合は

sudo kusanagi list

で確認できます。

ここまで実行すれば、あとはPST ManagerというWebブラウザ経由での設定変更が可能となっています。

PSTを有効化する方法

ここからはウェブ経由でPSTを有効化する作業の続きをしましょう。

サーバのグローバルIP:61000にアクセスし(事前にファイアウォールの許可設定はクラウド側で行っておいてください)、先程pst passwd addで追加したユーザ名でログインします。

PST ログイン画面

そうしたら、先程pst initを実行したプロファイルの名前が出てきますので、そのプロファイル名をクリックしてください。

PST ダッシュボード

そのあと、以下のような設定ページが出てきますので、PSTステータスのトグルの部分をクリックしてOFFからONに変更してください。

PST 設定画面

PSTが適用されているか確認するには

たったこれだけのステップでPSTを有効することができたために本当に動いているのか不安な場合は、以下で示す手順でPSTがウェブサイトにきちんと適用されているかチェックできます。

まずは、シークレットモード(もしくはWordPressの管理画面にログインしていない状態)で、F12キーを押して開発者コンソールを確認したあと、そのプロファイルが適用されたウェブサイトのURLをタイプしてアクセスしてください。そして、Chromeであれば開発者コンソールの「ネットワーク」の通常一番上にあるものをクリックすると、リクエストの詳細が表示されます。その中にある「ヘッダー」をクリックしてからX-Pst-Dynamicというヘッダーがあるかどうか確認してください。参考までに、以下に画像を添付しておきます。

値がHITなどと表示されていればPSTの戦略が適用され、フロントエンドの高速化がされています。

それ以外の値(たとえばCREATEなど)の場合は、まだPSTの戦略が生成されていない状態です。少し待ってからリロードして再度確認してみてください。

もし、その他の値が出た場合、または値について詳しく知りたい場合は公式ドキュメントの当該ページを参照してください。

そしてもし上で示したヘッダーおよびX-Pst-Versionのヘッダー、その両方が存在しなければ、PSTが有効化されていないか、ないしは一時的に無効にされている状態です。

その他の便利な機能として、KUSANAGIのfcacheやbcache、ratelimitもPST Managerの基本設定ページから有効・無効の変更ができますし、kusanagi sslコマンドに相当する、SSL(TLS)のLet’s Encryptによる自動取得の設定や購入した証明書の適用も「SSL設定」のページから可能となっています。

さらに、不具合が発生した場合の原因調査や分析に便利なアクセスログも、SSHでログインする必要なく、「ログ」ページから閲覧が可能となっています。

バックエンドのみならずフロントエンドも高速化し、さらにはコマンド操作の手間を減らす管理画面までついたWEXAL、およびKUSANAGI Premium Editionをどうぞご利用ください。

参考文献

https://www.wexal.jp/document-3-0-0/setting/initial-setting-manager/

WEXALのウェブページ検証機能「インスペクター」を解説 >>

関連記事

Webサイト運用の課題解決事例100選 プレゼント

Webサイト運用の課題を弊社プロダクトで解決したお客様にインタビュー取材を行い、100の事例を108ページに及ぶ事例集としてまとめました。

・100事例のWebサイト運用の課題と解決手法、解決後の直接、間接的効果がわかる

・情報通信、 IT、金融、メディア、官公庁、学校などの業種ごとに事例を確認できる

・特集では1社の事例を3ページに渡り背景からシステム構成まで詳解