#WordPress で高速&安全なサイトを作成する方法
May 4th, 2019
知り合いと趣味を兼ねて簡単なメディアを作ることになったので、CMSどうしようかと悩んでいたらWordPress(以降、WP)で最高のサイト構成ができたので紹介します。
自分だけだったらこのブログと同じ構成でも良かったのですが、ITにそこまで強くない人もいるのでWordPress使えないかなと模索した結果になります。
まずは成果物から
(2019年5月4日現在まだ本格運用してません…)
私はテキーラマエストロでもあるのでテキーラのメディア作ることに。
Tequila Mezcal Network
テキーラとメスカルの情報をお届けします！
スコア
WIP
やりたかったこと
今回やりたかったことは次の6つです。
- WPを使う
- 静的なHTMLにしたい
- PWA対応
- JS, CSSは最適化したい
- https化したい
- 独自ドメイン使いたい
WP使うけど静的なHTMLにしたいっていうのが1番の難点で、ほかはプラグインでカバーできそうです。(https化はnetlifyにホスティングすれば解決できる。)
検討したけど採用に至らなかったサービス
ShiterというServerless-Static WordPressというまさに！なサービスがあったのですが、Freeプランでは独自ドメイン使えず、月に$20も払えないな〜と思って見送りさせていただきました。
(他にも似たようなサービスが1つありましたが、そちらは$20よりも高かったかな。。。)
後に紹介するWP2Staticというプラグインがなければこちらを利用していました。
実現方法
Basic認証をつけたWP(http://wp.example.com) からhtmlを生成し、Netlifyにホスティング(http:/example.com)しています。
WPと本番は別ドメインになっています。Basic認証つけているので普通にはWPにはアクセスできません。
今回調査にあたり、ホスティング管理するの面倒だしセキュリティ怖いしWPもう使いたくねぇな〜と思っていましたが、WP2Staticという最高のプラグインがありこちらを利用しております。
WP2Static - Security. Performance. Cost. - One plugin to solve WordPress's biggest problems.
Other methods can optimize your site to run faster. Only going static gives you the option to get your whole site distributed globally, so users from any country get the fastest possible pageloads.
WP2Staticの紹介
最高なので紹介しておきます。はじめに言っておくと無料です。 公式サイトを見ると有料プランとか書いてありますが無料で使用しています。
WP2StaticはWPサイトをクロールしてhtmlを生成し、Netlifyなどにアップロードしてくれます。サポートしてるアップロード先はNetlify, S3, GitHub, GitLabなどなど詳しくは公式サイトを参照ください。
クローリングからアップロードも管理画面からワンクリックで行ってくれます。
その他プラグイン
簡単に今回使用している他のプラグインを紹介したいと思います。
一般的にプラグインを増やすとWPの動作が遅くなるためあまり入れないほうがいいのですが、今回の構成だとどんなに遅くてもクローリングの時間が長くなるだけなのでバンバンプラグイン入れても平気なのが嬉しいですね。(ほんとに？笑)
Autoptimize
JS, CSS, HTMLを最適化してくれるプラグイン。JSを1つにまとめたり、CSSをインライン化したりしています。
Head, Footer and Post Injections
<head> や <body> 直後や </body> 直前などに自前のコードを組み込めるプラグイン。
Google Tag Managerのタグを埋め込みたかったので利用。
Simple Author Box
記事末に著者(ライター)の情報をいい感じに表示してくれるプラグイン。
入れたかったので追加。
Super Progressive Web Apps
PWA対応してくれるプラグイン。便利。というか、Workbox便利。
Super Socializer
SNS周りをやってくれるプラグイン。
記事末にソーシャルボタン設置したのと、管理画面にTwitterアカウントでログインできるようにしたかったので追加。
UpdraftPlus - Backup/Restore
WPまるっとバックアップしてくれるプラグイン。
怖いからバックアップしますよね。S3にまるっと保存するようにしました。
WP User Avatar
Gravatarではなく、自前でアップロードしたプロフィール画像を使えるようにするプラグイン。
Gravatar縛りはいやだったので追加。やってない人も多いしね。
Yoast SEO
SEO頑張ってくれるプラグイン。All in One SEOにいいイメージないからこっちにしてみた。気分。
WP2Static使うにあたってのTips
いろいろと地雷を踏んだ気がするので備忘録がてらTipsとして残しておきます。何か役に立てば幸いです。
めっちゃ力技も含んでます。
1. インストールディレクトリが /wp 問題
今回安くすませようとして使ったのがCoreServer 月200円ぐらいでWPが複数個運用できます。クローリングでしかアクセスされない想定なのでどんなに貧弱サーバーでもWPが動けばいいのです。
インストール先が http://example.m42.coreserver.jp/wp となってしまいました。(exampleはサンプル)
本番は https://tequilamezcal.network なので /wp が邪魔です。
WP2Staticを使うとすぐに解決できます。 WP2Static > Processing に Rewrite Links in source codeと Rename Exported Directories という項目があり、こちらに下記を追加します。
wp/,/Rewriteではソースコード中のwp/を/に置き換え、Renameではエクスポートするディレクトリをwp/を/に変えてくれます。便利！
2. ドメインが PLACEHOLDER.wpsho になる問題
こちらは全員なるのか不明ですが、今回発生したので残しておきます。
PLACEHOLDER.wpshoはおそらくドメインが正しい形で置き換えられるはずのものが、置き換えられなかったものと推測されます。なので、Rewriteしてしまえばいいと下記のようにRewrite Links in source codeに追加しました。
PLACEHOLDER.wpsho/,tequilamezcal.network/※WP2Staticでドメインを変更のPLACEHOLDERとして該当ドメインに一旦置き換えてるようです。後々のアップデート解消されるかもしれません。
3. WPのドメインが残る問題
WPのドメイン http://example.m42.coreserver.jp/wp がソースコード内に残ってしまう場所があったのでRewriteしてしまえばいいと下記のようにRewrite Links in source codeに追加しました。
tmnetwork.m42.coreserver.jp/,tequilamezcal.network/4. ソーシャルプラグインのシェアURLがWPのドメインになる問題
シェアURLはURLエンコードされていたのでソースコード内に残ってしったのでRewriteしてしまえばいいと下記のようにRewrite Links in source codeに追加しました。(http->httpsも含みます)
http%3A%2F%2Fexample.m42.coreserver.jp%2Fwp%2F,https%3A%2F%2Ftequilamezcal.network%2F5. PWAに必要なファイルが本番に反映されない問題
普通にクローリングするだけだと、Super Progressive Web Appsで作成したmanifestやservice workerファイルが本番に反映されませんでした。PWAのプラグインで生成されるファイルはsuperpwa-manifest.jsonとsuperpwa-sw.jsです。
クローリングの一覧は WP2Static > Initial crawl list で確認できます。入っていませんでした。
手動で追加してあげる必要があります。同じタブの Include additional URLs に追加してあげましょう。(/wpは今回の環境で必要なだけです)
/wp/superpwa-manifest.json
/wp/superpwa-sw.js6. PWAのstart_url, scopeが /wp になってしまう問題
PWAで重要な役割をするのがService Workerです。一般的にService Workerはトップドメインしたに置き、scopeも/だけになっているのが望ましいです。
しかし、今回はインストールディレクトリが /wp となっているため、 /wpに設定されてしまいます。本来は正しいのですが、今回のケースだとどちらも/にしたいのです。
これは力技で修正してますw
プラグインを直接いじり固定で / が入るようにしました。他にいい方法があったら教えて欲しい。。。
ユースケースとしては稀なので対応してなくて当たり前なのです。。。
7. PWAのsuperpwa-sw.jsが/wp/superpwa-sw.jsになる問題
manifestを正しく読み込んでくれたのはいいのですが、Service WorkerのJSファイルをどうしても/wp/superpwa-sw.jsに読みに行くのです。本来は/superpwa-sw.jsにいってほしい。
こちらも力技。プラグイン直接いじりました。/superpwa-sw.jsを固定で見に行くようにしました。
ユースケースとしては稀なので対応してなくて当たり前なのです。。。
8. 目的の画像が404になるケース
何故かわかりませんが、/wp-includes/js/thickbox/loadingAnimation.gifのファイルが読み込まれません。5の対応と同じくInclude additional URLsに追加したのですが、本番には反映されず。
こちらも力技で解決。
同じ画像をダウンロードし、昔の画像ディレクトリ(2019/01など)に追加しました。ここで重要なのは該当ファイル以外は同じ月に無いこと…。1つだけ置くようにします。なので、2019/01にある画像はloadingAnimation.gifのみ。今回はFTPでwp-content/uploads/2019/01/を作りそこにGIFファイルをアップロードしました。
そうすると5で確認したInitial crawl listに乗ってきます。
そして、WP2Static > Processing > Rename Exported Directories に次を追加します。悔しいのがDirectoriesとあるようにディレクトリしか指定できないところファイルまで指定できれば、このような面倒なことをしなくても良かったのですが。。。
wp-content/uploads/2019/01/,wp-includes/js/thickbox/これでディレクトリが代わりちゃんとアクセスできるようになりました。パズルみたいでしたが解決できました。
8. 管理画面にはBasic認証、APIにはJWT認証をかけたい
管理画面(coreserver)にはBasic認証、APIにはJWT認証を利用するようにしました。 APIをCookie認証で利用したかったのですが、うまく行かなかたのでJWT認証を追加しました。
JWT認証にはJWT Authentication for WP REST APIプラグインを利用しています。
そのまま利用するとBasic認証とJWT認証でHTTP Headerが重複してしまい利用できません。
こちらは.htaccessに追加で対応しました。
# JWT ->
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
</IfModule>
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
# <- JWT
# Basci Auth ->
SetEnvIf Request_URI ^.*/wp-json/.* jsonapi=1
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName MembersOnly
AuthType Basic
Order Deny,Allow
Satisfy any
Deny from all
Require valid-user
Allow from env=jsonapi
# <- Basci AuthSetEnvIf Request_URI ^.*/wp-json/.* jsonapi=1 でリクエストURIと正規表現に応じて変数化しています。/wp-json/.*のリクエストの場合は jsonapi=1とフラグが立ちます。
そのフラグに対してAllow from env=jsonapi と許可する設定をいれています。
こちらで、/wp-json/ 以下のリクエストにはBasic認証は適用されなくなりました。
0円で運用する方法
今回は複数人アクセスする状況で作成しましたが1人であればレンタルサーバーを借りる必要はありません。
Local by Flywheelなどを使って必要なときにローカルにサーバーを立ててアップロードすればいいのです。Netlifyへのホスティングは0円、無料SSLなどもついてくるので、超高速サイトが0円で運用できます。管理画面にはローカルからしかアクセスできないのでセキュリティも安心です。
Local by Flywheel | Local WordPress development made simple
Local by Flywheel is a free local development environment designed to simplify the workflow of WordPress developers and designers. Download it for free today!
まとめ
WordPressの素晴らしいコミュニティやプラグインを利用でき、高速かつ安全にサイト運用ができるこの構成は最高だと思います。 静的サイトジェネレーターにお疲れの皆さんは古き良きWordPressで静的サイトを作ってみてはいかがでしょうか。
Share
©MERCURY MAEDA