Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
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

以上。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?