WordPress + AWS S3サイトを独自ドメインでHTTPS対応

WordPressのメディアをAWSのS3で配信するウェブサイトで、
HTTPSに対応してみました。（備忘録）

参考にさせていただきました。感謝。m(..)m
WordPressサイトをCloudFrontで配信する
Dot TKで取得した無料ドメインをRoute 53でホストする
【無料&超簡単】S3と独自ドメインで公開しているサイトをSSL(https)化する
AWS CloudFrontを使ってWordPressのメディアファイルだけS3に配置する
案外簡単なAWS上のWordPressのSSL化

以下、AWSのEC2+RDS+S3でWordPressが動いている前提です。
example.comを独自ドメインに読みかえてください。

作業の途中でWordPressのサイトが見えなくなったり、ダッシュボードにログインできなくなったりすることがあります。sshでec2インスタンスにログインして、wp-config.phpが編集できる状態にしておくと良いと思います。

Route 53の設定

Route 53コンソールを開く。

「Create Hosted Zone」
Domain Name: example.com<br /> Comment: （適宜入力）<br /> Type: Public Hosted Zone（デフォルト）

「Create」して表示されるNSレコードを、独自ドメイン（契約サービス）のDNSとして設定する。

CloudFrontの設定

CloudFrontコンソールを開く。

「Create Distribution」
Webで「Get Started」

Alternate Domain Names(CNAMEs): example.com
と入力して、
「Request or Import a Certificate with ACM」をクリックすると、
AWS Certificate Manager のページが開くので、
「証明書のリクエスト」からドメイン名を追加します。

ドメイン名: example.com
と入力して「次へ」
「DNSの検証」を選択して「確認」を押すと検証のページに遷移します。

ドメインのDNS設定にCNAMEレコードを追加

「Route 53 でのレコードの作成」をクリックするとCNAMEが追加されます。

オリジンの設定 – 独自ドメイン

Origin Settings
Origin Domain Name: example.com
Origin Protocol Policy: HTTPS Only

オリジンの設定 – EC2

Origin Settings
Origin Domain Name: （EC2インスタンスのドメイン）.compute.amazonaws.com
Origin Protocol Policy: HTTP Only

オリジンの設定 – S3

Origin Settings
Origin Domain Name: （バケット名）.s3.amazonaws.com

Behavior – デフォルト

Path Pattern: Default(*)
Origin: （EC2インスタンスのドメイン）.compute.amazonaws.com
Viewer Protocol Policy: Redirect HTTP to HTTPS
Allowed Encryption Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Cache Based on Selected Request Headers: All
Forward Cookies: All
Query String Forwarding and Caching: Forward all, cache based on all

Behavior – /wp-admin/*

Path Pattern: /wp-admin/*
Origin: （EC2インスタンスのドメイン）.compute.amazonaws.com
Viewer Protocol Policy: Redirect HTTP to HTTPS
Allowed Encryption Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Cache Based on Selected Request Headers: All
Forward Cookies: All
Query String Forwarding and Caching: Forward all, cache based on all

Behavior – /wp-login.php

Path Pattern: /wp-login.php
Origin: （EC2インスタンスのドメイン）.compute.amazonaws.com
Viewer Protocol Policy: Redirect HTTP to HTTPS
Allowed Encryption Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Cache Based on Selected Request Headers: All
Forward Cookies: All
Query String Forwarding and Caching: Forward all, cache based on all

Behavior – S3

Path Pattern: /wp-content/uploads/*
Origin: S3バケットを選択

SSL Insecure Content Fixer

コンテンツのURLにHTTPが混在するとブラウザで警告が出て正しく表示されない場合。
WordPressのプラグイン SSL Insecure Content Fixer で対処。

非セキュアコンテンツの修正方法: シンプル
HTTPS の検出方法: HTTP_CLOUDFRONT_FORWARDED_PROTO (Amazon CloudFront HTTPS キャッシュ済みコンテンツ)

Offload S3

WordPressでメディアをS3バケットで公開するためのプラグイン

Copy Files to S3: ON
Rewrite File URLs: ON
CloudFront or Custom Domain: example.com
Path: wp-content/uploads/
Year/Month: ON
Force HTTPS: ON