こんにちは！サービスGの山内です！

以前、
下記のような環境で、https化を行った際にWordPressで作成したWebサイトがMix Contentとなり、レイアウトが崩れてしまいました。
解決がかなり大変だったため、その時のナレッジを共有しようと思い執筆することとしました！

構成図

インターネットとALB間の通信はHTTPS化し、ALBとEC2間はHTTPとなっている。

先に結論

次の手順で解決することが出来ました。

・wp-cli コマンドを使用してWordPressをSSL化するプラグインをインストール
・wp-config.phpにHTTPS化するための設定を記載

なぜMixed Contentになったか

ALBとクライアント間の経路をHTTPS化に加えて、WordPressもHTTPS化を行う必要があるようです。
そのことを知らずに、通信経路のみHTTPS化してしまったため、Mixed Contentとなってしまいました。

WP-CLIとは

WordPressを管理するためのコマンドラインインターフェース。
今回の構成で、経路をHTTPS化してしまうと、ブラウザ経由でのアクセスが出来なくなるため、WP-CLIを使ってEC2上からWordPressの操作が必要になります。

手順詳細

WP-CLIのインストール

下記コマンドを実行して、カレントディレクトリにwp-cliの実態である、wp-cli.pharファイルをダウンロードします。

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

次に、ダウンロードしたwp-cli.pharファイルに対する実行権を与え、wpというコマンドでwp-cliを使えるようにします。

chmod +x wp-cli.phar

sudo mv wp-cli.phar /usr/local/bin/wp

SSL用のプラグインのダウンロードと有効化

下記コマンドを実行し、SSL用のプラグインであるReally Simple SSLをダウンロードし、
有効化します。
--activateオプションを付与することで、有効化できます。
私の場合はwordpress配下のファイルの所有者はapacheだったため、
apacheユーザとして実行するようにしています。

sudo -u apache wp plugin install really-simple-ssl --activate

wp-config.phpの編集

下記を/* That's all, stop editing! Happy publishing. */の記載がある箇所よりも上に記載します。

$_SERVER['HTTPS']='on';
define('FORCE_SSL_ADMIN', true);

画像のように記載すれば大丈夫です。

これでWordPressのHTTPS化は完了です！

まとめ

今回私が遭遇した事象は、
ロードバランサー配下のWordPressをHTTPS化する際は、よくはまってしまう事象なのではないかと感じました。
WP-CLIについて知ることもできて良かったです。

この記事は私が書きました

山内 宏紀