[AWS] EC2 + WordPress(Bitnami) + ALB + CloudfrontをSSL化する方法(Elastic IP未使用)
EC2 + WordPress(Bitnami) + ALB + CloudfrontをSSL化する方法は以下の通り
リージョンでのElastic IPアドレスを使い切ってしまったが、別途申請するのもめんどくさかったので、CloudfrontとWordpressの間にALBを挟んだ
これでEC2インスタンスに固定IP(static IP)のElastic IPを使わなくてすむので、Elastic IP上限問題も解決
目次
前提条件
wordpress(Bitnami)はAMIを使用してEC2上に構築済みで、ドメインも独自ドメインをRoute53に登録済みとする
ここでのドメインは仮でwww.xxxx.comとする
Application Load Balancer (ALB)を作成
HTTPとHTTPSを扱うことができるApplication Load Balancer (ALB)を作成する
ロードバランサタイプは、Application Load Balancer (ALB)を指定
ロードバランサ設定
- 名前は適当に
- Internet側で設定
- リスナーは80番と443番ポート
- アベイラビリティゾーンはEC2ホストが存在するゾーンを指定
- 次へ
セキュリティ設定画面＋ACM証明書リクエスト
- SSL通信させるのでACMを指定→「新しい証明書をACMでリクエスト」
- ACMでSSL証明書を作成→ドメインは「www.xxxx.com」
- ドメインを持っている証明はRoute53連携にすると楽
- しばらくするとロードバランサのセキュリティ設定画面の証明書一覧に先程リクエストした証明書が出てくるので指定する
- 次へ
セキュリティグループ設定
新しいセキュリティグループを作成し、80番と443番、22番を許可しておく
＊すでにあるのであれば、既定のセキュリティグループでも良い
ルーティング設定
- ターゲットは80番ポート
- ターゲットプロトコルはHTTP
- ターゲットタイプはインスタンス
- ヘルスチェックは80番で / でよい
ターゲットの登録
WordPress(bitnami)が乗っているEC2インスタンスをグループに追加
OKで登録完了
ロードバランサのDNS名でWordpressのサイトが開けるか確認
Bitnami wordpress設定の変更
SSLリクエストを扱えるように以下の設定を行う
/opt/bitnami/apps/wordpress/conf/httpd-prefix.conf
の一番上に書きコードを貼り付け
SetEnvIf x-forwarded-proto https HTTPS=on
/opt/bitnami/apps/wordpress/htdocs/wp-config.php
のWP_HOME と WP_SITEURLの定義の前部分に追記（前であればどこでもよい）
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) $_SERVER['HTTPS']='on';
DNSテスト
Route53のwww.xxxx.comのAレコードを先程作成したロードバランサのエイリアスに変更して、https://www.xxxx.comでサイトが開けるか確認
ただサイト上のリンクがhttp://www.xxxx.comになっているので、後ほど修正
Cloudfrontの設定
大量アクセスをさばくためとレスポンススピードを向上させるためにCDNサービスであるCloudfrontの設定を行う
- WebのCloudfrontを作成
- Origin Domain NameとOrigin IDをALBのDNS名に設定
- Viewer Protocol Policy をRedirect HTTP to HTTPSに変更
- Allowed HTTP MethodsをGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを選択
- Forward Cookiesに下記アイテムを追加
- Accept
- CloudFront-Forwarded-Proto
- CloudFront-Is-Desktop-Viewer
- CloudFront-Is-Mobile-Viewer
- CloudFront-Is-SmartTV-Viewer
- CloudFront-Is-Tablet-Viewer
- Host
- ＊Hostを追加しないとサイト上のリンクがすべてALBのDNS名になってしまう
- Forward CookiesをWhitelistに設定
- Whitelist Cookiesに
- wordpress_logged_in*
- wp-settings*
- Query String Forwarding and CachingにForward all, cache based on allを設定
- Alternate Domain Names(CNAMEs)に独自ドメインであるwww.xxxx.comを設定
- SSL証明書はCustom SSL Certificateを指定し、ACMに証明書をリクエストする
- 証明書がリストに出てきたら指定
- Commentにわかりやすい文字を入れておくと後で便利
- OKで作成
Behaviorsを追加
Behaviorsを追加して管理ページはキャッシュしないように設定しておく
- /wp-login.php
- /wp-admin/*
- Cache Based on Selected Request HeadersをALLに
- Forward CookiesをALLに
- Query String Forwarding and CachingをForward all, cache based on allに
Route53の変更
StatusがDeployedになったらRoute53のAレコードをCloudFrontのエイリアスに変更
ただサイト上のリンクがhttp://www.xxxx.comになっているのでWordpressのPluginを追加する
SSL Insecure Content Fixer Pluginの有効化
wordpressの管理画面にログインして、Plugin→SSL Insecure Content Fixerを有効化する
＊Bitnamiには予めSSL Insecure Content Fixerがインストールされている。なければPluginを追加する
設定→SSL Insecure ContentでHTTPS の検出方法をHTTP_CLOUDFRONT_FORWARDED_PROTO (Amazon CloudFront HTTPS キャッシュ済みコンテンツ)に変更
＊Pluginが勝手に構成を解釈して推奨の項目にマークを付けておいてくれている
これで、独自ドメインにアクセスするとCloudfront→ALB→EC2(wordpress bitnami)とトラフィックが流れる
AMIMOTOのWordpressをSSL化したい場合はこちら
参考
https://docs.bitnami.com/aws/how-to/configure-elb-ssl-aws/
https://dev.classmethod.jp/cloud/aws/cloudfront_elb_ssl_traffic/
https://dev.classmethod.jp/cloud/cloudfront-elb-ec2-apache-directoryname-redirect/
