[AWS]ALB +ACM + EC2でWordPressをSSL化した際の勘所

####■概要
AWS上に構築したWordPress環境をSSL化しました。
構成は下記となりALBで終端してALBから先はHTTP通信となります。
ALBのリダイレクト機能とx-forwarded-protoを利用して構築したので
WordPressサーバの.htaccessにリダイレクト設定を入れる必要がありません。
また、ACMを利用したのでSSL証明書費用を抑えることができました。

通信プロトコルのシーケンス図は下記です。
ユーザからのアクセスがHTTPでもHTTPSのいずれでもALBとEC2間はHTTP通信となり
ユーザへの応答はHTTPSに統一されます。

####■環境
・WordPress:5.3.x
・MW:apache httpd2.4,php7.x
・OS:Amazon Linux 2

####■やったこと
AWSリソースの作成・環境構築、WordPressのインストールは割愛しています。
以下、実施内容となります。

・ALBのリスナー設定
①HTTP用のターゲットグループを作成します。

②HTTPのリスナーを作成し、HTTPSへのリダイレクト設定を入れます。
　リダイレクト設定の詳細は下記を参考にしました。
　参考:[新機能]Webサーバでの実装不要！ALBだけでリダイレクト出来るようになりました！

③HTTPSのリスナーを作成し、転送先のターゲットグループをHTTPにします。

④HTTPとHTTPSのリスナー設定がある状態です。

・EC2
ALBの設定だけだとWebアクセス時にcssが崩れており
確認するとHTTPで読み込んでいました。
参考：ELB + SSL + WordPressについて
サーバがHTTPSで認識できるようリクエストヘッダー：x-forwarded-protoを利用して、ユーザがALBの接続に使用したプロトコル (HTTP または HTTPS) を識別して、HTTPSの場合はPHPの環境変数にHTTPSを設定するよう記述しました。

wp-config.php

if($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
  $_SERVER['HTTPS'] = 'on';
  $_ENV['HTTPS'] = 'on';
}

これで、cssが崩れることなくWordPressのSSL化が実現できました。

参考記事
https://qiita.com/snoguchi/items/f5ccb67592f87942480d

以上。