AWS ELB WordPress SSL https ロードバランサーを使用した構成

AWS
ELB(ロードバランサー)
SSL
Apache 2.4.39
Wordpress 5.1

■通信環境
クライアントPC

(port:443)

ELB[SSL証明書設定][ELBルールで外部からの80アクセスは443へリダイレクト]

(port:80)

EC2(EC2内は80設定のみでOK)

■事象
・ブラウザからメインhttps(443)へアクセス
・EC2内は80環境として設定しているのでWordpressはhtml生成時にcssなどheader内URLをhttp(80)とする
・ブラウザがheader内URLにメインURLと違うhttp(80)が存在するとセキュリティエラーとして読み込みストップ
・ブラウザ上に正しくhtmlが表示されない

■.htaccessのrewriteのみパターン

# BEGIN K.Miyakoshi

# AWS ELBからのアクセスをHTTPSへ変更する
SetEnvIf X-Forwarded-Proto ^https$ HTTPS=on

# httpアクセスをhttpsへリダイレクトする
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

# END K.Miyakoshi

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

■「conf.d」などvhost.confなどでガッツリパターン

#============================================
# ELB 共通ログ対応 K.Miyakoshi
#============================================
# AWS ELB 対応 クライアントIP取得のため[%{X-Forwarded-For}i]追加
LogFormat "%{X-Forwarded-For}i:%{X-Forwarded-Port}i %h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" elb-accesslog
ErrorLogFormat "[%{u}t] [%-m:%l] [pid %P:tid %T] %7F: %E: [client\ %{X-Forwarded-For}i:%{X-Forwarded-Port}i %a] %M% ,\ referer\ %{Referer}i"

# AWS ELB 対応 ヘルスチェックアクセスを通常ログから除外
SetEnvIf User-Agent "ELB-HealthChecker.*" nolog
# AWS ELB 対応 ヘルスチェックアクセスを別ログファイルに出力する設定
SetEnvIf User-Agent "ELB-HealthChecker.*" elb-log
# imgやjsなどログから除外
SetEnvIf Request_URI "\.(gif|jpg|png|ico|jpeg|js|css)$" nolog

# 通常のログ設定
CustomLog logs/access_log elb-accesslog env=!nolog
ErrorLog logs/error_log

#============================================
# ELB WordPress 対策 https(443)→http(80)リダイレクト問題
#============================================
# AWS ELBがhttpsで受けている場合はHTTPSを有効にする
SetEnvIf X-Forwarded-Proto ^https$ HTTPS=on

# httpアクセスはhttpsにリダイレクトする
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
	RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

#============================================
# default
# ELBのヘルスチェックに使用(Aliasでも良い)
#============================================
<VirtualHost _default_:80>
	ServerName _default_:80
	ServerAdmin admin@hoge.com

	DocumentRoot "/opt/lampp/htdocs"
	<Directory "/opt/lampp/htdocs">
		AllowOverride All
		Options FollowSymLinks
		Require all granted

		Options +IncludesNoExec
		AddOutputFilter INCLUDES html
	</Directory>

	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/htdocs/access_%Y%m%d.log 86400 540" elb-accesslog env=!nolog
	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/htdocs/elb_%Y%m%d.log 86400 540" elb-accesslog env=elb-log
	ErrorLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/htdocs/error_%Y%m%d.log 86400 540"

</VirtualHost>

#============================================
# taro.hoge.com
#============================================
<VirtualHost *:80>
	ServerName taro.hoge.com
	ServerAdmin admin@hoge.com

	DocumentRoot "/opt/lampp/taro"
	<Directory "/opt/lampp/taro">
		AllowOverride All
		Options FollowSymLinks
		Require all granted
	</Directory>

	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/taro/access_%Y%m%d.log 86400 540" elb-accesslog env=!nolog
	# AWS ELB に[taro.hoge.com]DNSに紐づいて設定せれていればログ出力される
	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/taro/elb_%Y%m%d.log 86400 540" elb-accesslog env=elb-log
	ErrorLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/taro/error_%Y%m%d.log 86400 540"

</VirtualHost>

#============================================
# jiro.hoge.com
#============================================
<VirtualHost *:80>
	ServerName jiro.hoge.com
	ServerAdmin admin@hoge.com

	DocumentRoot "/opt/lampp/jiro"
	<Directory "/opt/lampp/jiro">
		AllowOverride All
		Options FollowSymLinks
		Require all granted
	</Directory>

	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/jiro/access_%Y%m%d.log 86400 540" elb-accesslog env=!nolog
	# AWS ELB に[jiro.hoge.com]DNSに紐づいて設定せれていればログ出力される
	CustomLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/jiro/elb_%Y%m%d.log 86400 540" elb-accesslog env=elb-log
	ErrorLog "| /opt/lampp/bin/rotatelogs /opt/lampp/logs/jiro/error_%Y%m%d.log 86400 540"

</VirtualHost>

#============================================

コメントは受け付けていません。