サーバ再起動後にWordPressでCSSが反映されない問題の解決策

Blog-Thumbnail_WordPress-01 WordPress

はじめに

こんにちは、KUDs です。
今回の記事では、サーバ (EC2) 上で WordPress を運用している人が、サーバ再起動後に以下のような症状が発生した場合の原因と解決策について解説します。

  • WordPress サイトで CSS が反映されない
    • テキスト・ボタンが質素になってしまう
  • WordPress 管理画面にアクセスできない
    • 応答なし・タイムアウトが発生してしまう

また、開発者ツールでログを確認すると、以下のようにリソースのロード時にタイムアウトが発生していることが確認できます。

       Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
style.min.css:1

では、まず問題の原因から確認していきましょう。

問題の原因について

結論、「EC2 パブリック IP アドレスの変更とデータベースパラメータとの不一致」です。

以下の章では、原因について詳細に解説します。

EC2 パブリック IP アドレスの変更とデータベースパラメータとの不一致

パブリックIPアドレスの変更

EC2 インスタンスは、停止して再起動すると新しいパブリック IP アドレスが割り当てられることがあります。
※ パブリック IP アドレスの自動付与が有効であり、かつ EIP が割り当てられていない場合

これは、EC2のデフォルトの挙動です。

データベースパラメータとの不一致

WordPressサイトでは以下のパラメータがデータベース内に保存されています。

  • サイトのURL（siteurl）
  • ホームURL（home）

これらの値は、サイトの静的リソースへのリンクや内部リンクの生成、管理画面へのアクセス等で利用されます

EC2 インスタンスの再起動後にパブリック IP アドレスが変更された場合、これらのデータベース内のパラメータが古い IP アドレスを指していると、サイトへのアクセスやサイト内のリソースの読み込みに問題が生じます。

具体的には、ブラウザが CSS ファイルや JavaScript ファイルを正しく見つけられなかったり、管理画面へのログインリクエストが正しいエンドポイントに到達しなかったりします。

問題の解決策

ここでは、主要な解決策を解説します。

wp-config.php での動的オーバーライド

wp-config.php は WordPress の設定ファイルです。
このファイル内で以下のパラメータ値を動的に設定します。

  • WP_HOME
  • WP_SITEURL

具体的には、以下のコードを wp-config.php に追記します。

define('WP_HOME','http://' . $_SERVER['HTTP_HOST']);
define('WP_SITEURL','http://' . $_SERVER['HTTP_HOST']);

これによって、サイト URL を、訪問者がアクセスした際のホスト名に基づいて動的に設定できます。
そのため、IP アドレスが変更された場合でも、サイトの URL 設定を手動で更新する必要がなくなります。

データベース値の更新と IP アドレスの固定

データベース値の更新

WordPress DB 内の以下パラメータ値を直接更新することでも対処可能です。

  • siteurl
  • home

これによって、サイトの URL 設定を正確に保持できます。
wp-config.php での動的オーバーライドが嫌な方はこちらを検討しましょう。

UPDATE wp_options SET option_value='http://新しいIPアドレス' WHERE option_name='siteurl';
UPDATE wp_options SET option_value='http://新しいIPアドレス' WHERE option_name='home';

上記の SQL クエリを実行するだけです。
MySQL プロンプトや phpMyAdmin 等の DB 管理ツールを使用しましょう。

ちなみに、現状のパラメータが正しいか否かは事前にチェックしておきましょう。
実行例は以下です。

MariaDB [wordpress-database]> SELECT option_name, option_value FROM wp_options WHERE option_name='siteurl' OR option_name='home';
+-------------+----------------------+
| option_name | option_value         |
+-------------+----------------------+
| home        | http://111.111.111.111 |
| siteurl     | http://111.111.111.111 |
+-------------+----------------------+
2 rows in set (0.00 sec)

IP アドレスの固定: Elastic IP の利用

これは、対処というよりは予防です。
前述の、「データベース値の更新」を行ったとしても、再度サーバを再起動すれば IP アドレスは変わってしまいますし、その度に「データベース値の更新」を行うのは面倒ですよね。
そのため、IP アドレスを固定し、次回に発生しないように予防する必要があります。

EIP は EC2 インスタンスに静的な IP アドレスを割り当てるサービスです。
EIP を使用すれば、インスタンスを再起動しても IP アドレスは不変になります。

これによって、当障害が発生しなくなります。

どの対策をすべきか

正直どちらの対応でも良いのですが、以下の観点で選んでも良いかもしれません。

  • wp-config.php での動的オーバーライドを推奨する場合
    • IP アドレスが頻繁に変更される環境で運用している場合
    • 開発環境と本番環境を頻繁に切り替える場合
  • データベースの直接更新を推奨する場合
    • IP アドレスの変更 (サーバ再起動の頻度) が少ない場合
    • EIP 等で既に IP アドレスを固定済みの場合
    • ドメインを使用する場合

さいごに

この記事では、サーバ再起動後に WordPress で CSS が読み込めなくなったり、ログイン画面が表示されなくなる場合の原因と解決策を解説しました。

参考ドキュメント

サイト URL の変更については、公式のサポートフォーラムにしっかりと記述されてるので是非読んでみてください。

サイト URL の変更
WordPress のシングルインストールでは、「設定 → 一般設定」画面に「WordPress アドレス (…
ja.wordpress.org

以上です。

コメント