search
LoginSignup
7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

■概要

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

Untitled Diagram.png

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

FireShot Capture 009 - js-sequence-diagrams by bramp - bramp.github.io.png

■環境

・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

以上。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7
Help us understand the problem. What are the problem?