XSERVERブログにCloudflare設定したら404エラーになった件

2021-10-31

Cloudflare設定したつもりがTOPページ以外404になった…

ブログへのアクセスを肩代わりしてくれてサイトの高速化に役立つCloudflare。

そのCloudflare設定したらいつの間にかTOPページ以外404になってしまった。

どうやって修正すればいいのか。

そこで今回はXSERVERブログにCloudflare設定したら404エラーになった件について解説する。

この記事を書いている人

システムエンジニア、AIエンジニアと、IT業界で10年以上働いている中堅。HTMLとネットワークもチョットデキル。

記事を読むメリット

XSERVERブログにCloudflare設定したら404エラーになった件の原因がわかり、同じトラブルにあってもすぐに修正できるようになる。

XSERVERブログにCloudflare設定したら404エラーになった件

XSERVERブログにCloudflare設定したら404エラーになった件。

流れとしてはこうだ。

トラブル発生までの流れ

ブログの高速化をしようと決意
↓
EWWW Image Optimizerで画像の最適化
↓
CloudflareをCDNとして設定し、ドメインのネームサーバーを変更
↓
WordPressのプラグインの設定を変えながらPageSpeed InsightsでTOPページを見てサイト速度を確認
↓
速度改善に満足していざ他のページを確認したら404 not found

404 Not Found

現象としては以下の通り。

エラーの現象

TOPページはエラーになっていない

記事ページやカテゴリページは404エラーになる

記事を編集するダッシュボードはエラーになっていない

気持ちはこれ。

Cloudflare設定したつもりがTOPページ以外404になった…

404 not foundの原因

では一体何故404エラーになってしまったのか。

原因はCloudflareの設定内容・・・ではない。

実は原因はその前のコレ。

EWWW Image Optimizerで画像の最適化

画像を最適化する際にサイトの画像をWebP形式に対応させており、表示する為に .htaceess の変更をしていた。

その際にSSL(https)化対応部分を消してしまった為、記事や他のページが見つからず404になってしまっていた。

解決方法

WordPressブログ高速化試行で404になってしまったエラーの解決方法だが、 .htaceess に以下の記述を戻すことで解決した。

<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>
# 常時SSL化
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode

一時はどうなることかと思ったけど…