Help us understand the problem. What is going on with this article?

AWS Lightsailで構築したWordPressをSSL化する方法

はじめに

AWS LightsailでWordPressを構築したのですが、SSL化にかなり苦戦したので成功した方法をメモしておきます。

私の場合は、日々の生活ブログ(メインドメイン)と旅行者向けのトラベルガイド(サブドメイン)を公開しているので、メインとサブのそれぞれの設定方法なんかも苦戦する原因となりました。

この記事で書くこと

ACMのパブリック証明書とCloudFrontを用いて、閲覧者とCloudFrontの間でHTTPSを要求するように設定する方法を書きます。

参考にしたのは以下の記事です。
AmazonのVPSサービス(Lightsail)を使い、独自ドメイン・SSL対応したWordPressを構築($3.50〜/月)
AWSでWebサイトをHTTPS化 その7:CloudFront(+証明書)→EC2編
CloudFront経由の配信でWordPressのビジュアルエディタが使えない場合

この記事で書かないこと

  • ロードバランサーを用いる方法
  • letsencryptを用いる方法

ロードバランサーは月額18ドルと高コストですし、letsencryptはネットで調べながら導入を試みたのですが上手くいきませんでした。

ACMでSSL証明書の取得

まずはSSL証明書を作成します。

私の場合はプライマリとサブの2つのドメインがありますが、証明書は以下のように名前を追加することで1つで大丈夫です。上段にサブドメイン、下段にプライマリドメインを登録しています。(順不同です。)
スクリーンショット 2020-02-23 14.56.22.png

登録してしばらく待つと、以下のようにステータスが「発行済み」となりますので、これで完了です。後程、赤枠で囲ったCNAMEレコードの名前と値をRoute 53で登録します。
スクリーンショット 2020-02-23 15.17.18.png

CloudFrontの構築

次にCloudFrontの設定をします。

まずはCreate Distributionのボタンを押します。
スクリーンショット 2020-02-23 19.54.25.png

続いてWebの方のGet Startedを押します。
スクリーンショット 2020-02-23 17.30.47.png

それではプライマリドメインを例にDistributionを作っていきます。Origin Domain Nameは何でも良いのですがここでは「wp1.ドメイン名」としています。サブドメインの場合は「wp2.ドメイン名」などにすると分かりやすいかと思います。
スクリーンショット 2020-02-23 19.42.55.png
スクリーンショット 2020-02-24 13.51.00.png
スクリーンショット 2020-02-23 17.33.29.png

Alternate Domain Name(CNAMEs)にはプライマリドメイン名を入力します。サブドメインの場合は「*.ドメイン名」とします。SSL Certificateでは先ほどACMで登録した証明書を選択します。
スクリーンショット 2020-02-23 19.48.03.png

その他の項目はデフォルトでOKです。

続いて作成したDistributionに、path-Patternが「/wp-login.php*」と「/wp-admin/*」の場合のBehaviorsを設定します。

作成したDistributionにチェックを入れてDistribution Settingsボタンを押します。
スクリーンショット 2020-02-23 15.57.38.png

Create Behaviorボタンを押します。
スクリーンショット 2020-02-23 23.11.56.png

設定内容は「Default(*)」とほぼ同じですが、マイナーチェンジを加えます。以下、変化点だけ表示します。

「/wp-login.php*」のBehaviorsの設定では、Object CachingをCustomizeに設定し、その下にある3つのキャッシュ時間をすべて0にします。
スクリーンショット 2020-02-24 14.00.50.png

「/wp-admin/*」のBehaviorsの設定では、Whitelist Headersに「User-agent」を追加します。
スクリーンショット 2020-02-23 16.04.09.png

CloudFront経由の配信にするとなぜかWordPressのエディタが変になってしまい、この設定をしないと↓のようになってしまいます。
スクリーンショット 2020-02-23 16.03.17.png

これでプライマリドメイン用Distributionの設定は完了です。

僕の場合はサブドメイン用にも同様にDistributionの設定をしました。細かい設定内容はプライマリドメインと同じなのですが、Origin Domain Nameだけサブ用は「wp2.ドメイン名」に変更しました。

最終的には以下のように2つのDistributionが登録されます。
スクリーンショット 2020-02-23 15.43.08.png

Route 53の設定変更

最後にRoute 53の設定変更をします。

まずは閲覧者からのサイトドメインへのアクセスをCloudFrontのドメインで解決するようにします。

Aレコードを作成します。名前にはドメイン名を入力し、タイプはAレコードを選択します。ポイントはエイリアスの部分で、デフォルトでは「いいえ」となっているところを「はい」に変更し、エイリアス先でCloudFrontで作成したDistributionのDomain Nameを選択します。
スクリーンショット 2020-02-24 13.10.30.png

サブドメインがある場合はその設定も追加します。タイプはCNAMEレコードを選び、値にはサブドメイン用DistributionのDomain Nameを入力します。
スクリーンショット 2020-02-24 13.16.01.png

次にCloudFrontからLightsailインスタンスへの接続を設定します。

名前にはCloudFrontで作成したDistributionのOrigin Domain Nameを入力します。タイプはAレコードを選び、値にはIPアドレスを入力します。
スクリーンショット 2020-02-24 13.29.09.png

サブドメインがある場合には同じようにAレコードを登録します。
スクリーンショット 2020-02-24 13.32.59.png

最後にSSL証明書のCNAMEレコードを登録します。

「ACMでSSL証明書の取得」の最後のところで確認したCNAMEレコードの名前を値をそれぞれ入力します。
スクリーンショット 2020-02-24 13.35.53.png

これで完了です!

zuid
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