Amazon Lightsail で WordPress その 6 -- HTTPS 化
概要
Amazon Lightsail で WordPress の 6 回目です。前々回、ロードバランサーを導入しました。今回は、Lightsail で SSL 証明書を作成し、前々回作成したロードバランサーに適用することで、サイトを HTTPS 化してみます。
Amazon Lightsail で WordPress 記事 全体像
- その 1 -- トップページをブラウザで表示するまで
- その 2 -- SSH
- その 3 -- インスタンス内の MySQL にアクセス
- その 4 -- ロードバランサー
- その 5 -- ダッシュボードにログイン
- その 6 -- HTTPS 化← 今ココ
- その 7 -- Amazon Polly
この記事の目次
- 概要
- Amazon Lightsail で WordPress 記事 全体像
- この記事の目次
- SSL 証明書作成
- Lightsail DNS ゾーンに CNAME 登録
- Route 53 に CNAME 登録
- CNAME レコードの検証確認
- HTTPS の有効化
- ブラウザで確認
- CSS や JS を HTTPS 化
SSL 証明書作成
Lightsail > ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィック とクリックしていきます。 次に、証明書の作成をクリックします。
証明書の必要事項を記入していきます。下記の example.com の部分を、Route 53 で取得した独自ドメインに置き換えてください。代替ドメインおよびサブドメインの箇所で、今回はサブドメインとして www を指定してみます。
記入が終わったら、作成を押してください。すると、プライマリドメイン用の CNAME と、サブドメイン(今回は www )用の CNAME が表示されます。これらの値は、後ほど Lightsail のDNS 設定と、Route 53 の設定で使用するので、メモしておいてください。
Lightsail DNS ゾーンに CNAME 登録
Lightsail > ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィック とクリックしていきます。 次に、以前の投稿で作成した DNS ゾーンをクリックします。そして、レコードの追加ボタンをクリックします。
まずは、先ほどメモしておいたプライマリドメインの値を記入していきます。まず、CNAME レコードをプルダウンから選択。サブドメイン には、メモした CNAME の名前を記入。解決先 は、CNAME の値を記入し、チェックマークをクリックして登録します。
同様に、サブドメイン( www )の CNAME も登録しておきます。すると、AWS 側でそのレコードの有効性を検証します。これについては、後から記述します。
Route 53 に CNAME 登録
上記のLightsail DNS ゾーンに CNAME 登録だけで、よいのかもしれませんが、AWS 側で検証作業に時間がかかる場合があります。私の場合は、丸一日待ってみたのですが、CNAME の検証が終わりませんでした。
そこで、Route53 にも CNAME を登録したところ、あっさり検証作業が終わりました。というわけで、邪道かもしれませんが、Route 53 でも同様に CNAME を登録する方法をご紹介いたします。
まずは、Route 53 を開き、取得した独自ドメインのリンクをクリックします。そして、Create Record Set ボタンをクリックします。次に、先ほどメモしておいたプライマリドメインの値を記入していきます。Name には、Lightsail で表示された CNAME の名前を記入。Type は、CNAME をプルダウンから選択。Value は、Lightsail で表示された CNAME の値を記入。
同様に、サブドメイン( www )の CNAME も Create Record Set ボタンをクリックして、登録しておきます。
CNAME レコードの検証確認
Lightsail に戻り、ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィックとクリックしていきます。登録した CNAME レコードの検証状況を確認してみます。プライマリドメイン、サブドメインのどちらも検証済みになったら、次の作業、HTTPS の有効化に移ることができます。
ちなみに、以下の画像では、プライマリドメインは検証済みとなっていますが、サブドメインはまだ検証中のままです。プライマリドメインは、20分くらいで検証済みとなりました。
証明書を作成してから、72 時間以内に検証作業が終わらなければ、何かがおかしいので、また、証明書を作り直し、設定を見直す必要があります。残り時間については、以下の画像のように表示されます。
成功すると以下の画像のように表示されます。結局、サブドメインの検証に 2 時間くらいかかりました。
HTTPS の有効化
Lightsail > ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィックとクリックしていきます。HTTPS のプルダウンで、該当するドメインを指定します。
以上で設定作業は完了です!
ブラウザで確認
ブラウザに https://www.プライマリードメイン名を打ち込んでみてください。以下のような画面が表示されれば、HTTPS 化成功です。
ただ、CSS、JS などが HTTP のままなので、全体的に表示がおかしなことになってます。
CSS や JS を HTTPS 化
テーマの header.php などの該当部分を http から https に変更してやれば簡単に修正できますが、ここではプラグインで解決してみます。
ダッシュボード > プラグイン > 新規追加 と進んでみてください。プラグインの検索のところに今回インストールする SSL Insecure Content Fixer と入力してみてください。
インストールが完了したら有効化してください。次にプラグインを設定します。設定 > SSL Insecure Content に進みます。
HTTP_X_FORWARDED_PROTO (ロードバランサー、リバースプロキシ、NginX など)
という項目にチェックを入れます。あとはデフォルトのままで、変更を保存ボタンをクリックします。
ブラウザでもう一度、トップページを表示し以下のようになって入れば完了です!
以上です。