Lightsail + WordPress (bitnami) WebP対応でのトラブルシュート

先の投稿でLightsailでWordPressを立ち上げWebP対応を進めたところ、.htaccessとPageSpeedでハマったので備忘のため記載。

この2年後にイメージを更新した記事はこちら：

.htaccessが効かないのでhtaccess.confに記載する必要あり
PageSpeedキャッシュを適宜クリアする必要あり

.htaccessが効かないのでhtaccess.confに記載する必要あり

画像のWebP対応を行うためにEWWW Image Optimizerというプラグインを使うことにしました。

プラグインを導入した後、WebPに対応するブラウザに対して「*.jpgや*.pngファイルにアクセスがあったら代わりにwebpファイルを返答する」旨のRewriteRuleをApacheで設定する必要があるのですが、プラグインは自動でWordPressの.htaccessファイルに追記してくれます。実際、そのファイルは /opt/bitnami/apps/wordpress/htdocs 以下に置かれており、

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます
。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress



# BEGIN EWWWIO
# "BEGIN EWWWIO" から "END EWWWIO" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp
# END EWWWIO

きちんと追記されているのですが、これが効きません。

bitnamiのドキュメントを覗いてみると、Understand Default .Htaccess File Configurationという記事に

One of our main goals is to configure Bitnami applications in the most secure way. For this reason, we moved the configuration in the .htaccess files to the main application configuration files and set the AllowOverride option to None by default, if supported by the application.
Bitnami WordPress Stack For AWS Cloud

という記述が見つかりました。つまるところ、.htaccessはデフォルトでは無効にしてあるとの由。.htaccessを有効にしてもいいんでしょうが、まぁbitnamiの方針を尊重すると、Approach Bに記載がある通り、上記の.htaccessにEWWW Image Optimizerが追記したものを /opt/bitnami/apps/wordpress/conf/htaccess.conf に転記するのが良さそうです（<Directory>で制限かけた方が良いので、WordPressのメディア置き場 /wp-content を指定）。

<Directory "/opt/bitnami/wordpress/wp-content">
        RewriteEngine On
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
        RewriteCond %{REQUEST_FILENAME}\.webp -f
        RewriteCond %{QUERY_STRING} !type=original
        RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
        <FilesMatch "\.(jpe?g|png|gif)$">
                Header append Vary Accept
        </FilesMatch>
        AddType image/webp .webp
</Directory>

PageSpeedキャッシュを適宜クリアする必要あり

上記の通り、EWWW Image Optimizer とRewriteRuleの組み合わせでは、ブラウザから*.jpgファイルや*.pngファイルにアクセスすると、その代わりにwebpファイルを返すという代物。WebPファイルであっても見かけ上jpgやpngの拡張子のままということもあり、元々のjpgファイルやpngファイルがキャッシュに残っていると具合が悪いようです。

ブラウザのキャッシュは消せばいいのですが、bitnamiのパッケージには最初から Apache PageSpeedモジュールが組み込まれており、そいつのキャッシュも消さないといけないとのこと。ちょこっとネットで探すと日本語のサイトでは「開発時にはPageSpeedモジュールを切っておくのが吉」との記載が多いようですが、どうもモヤっとする…。

本家bitnamiのドキュメントを覗くと、やっぱりUse PageSpeed With Apacheという記事がありました。Disable PageSpeedという部分は日本語サイトと同様ですが、最後に記載されているFlush the PageSpeed cacheがそのものズバリでした。

Execute this command:
sudo touch /opt/bitnami/apache2/var/cache/mod_pagespeed/cache.flush

Restart Apache:
sudo /opt/bitnami/ctlscript.sh restart apache
Bitnami WordPress Stack For AWS Cloud

これによってwebpファイルが正しく読み込まれるようになりました。めでたしめでたし。