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

2018年4月7日

旧サイト記事の移行

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 Comment: （適宜入力） 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