Depending on the Time and Situation

時と場合によりけり 〜 日々のアップデートとイノベーションに翻弄され彷徨える IT エンジニアの覚書

Amazon Lightsail で WordPress その 6 -- HTTPS 化

概要

Amazon Lightsail で WordPress の 6 回目です。前々回ロードバランサーを導入しました。今回は、Lightsail で SSL 証明書を作成し、前々回作成したロードバランサーに適用することで、サイトを HTTPS 化してみます。

stangler.hatenablog.com

Amazon Lightsail で WordPress 記事 全体像

この記事の目次

SSL 証明書作成

Lightsail > ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィック とクリックしていきます。 次に、証明書の作成をクリックします。

f:id:stangler:20181105112733p:plain

証明書の必要事項を記入していきます。下記の example.com の部分を、Route 53 で取得した独自ドメインに置き換えてください。代替ドメインおよびサブドメインの箇所で、今回はサブドメインとして www を指定してみます。

f:id:stangler:20181105114049p:plain

記入が終わったら、作成を押してください。すると、プライマリドメイン用の CNAME と、サブドメイン(今回は www )用の CNAME が表示されます。これらの値は、後ほど Lightsail のDNS 設定と、Route 53 の設定で使用するので、メモしておいてください。

f:id:stangler:20181105115651p:plain

Lightsail DNS ゾーンに CNAME 登録

Lightsail > ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィック とクリックしていきます。 次に、以前の投稿で作成した DNS ゾーンをクリックします。そして、レコードの追加ボタンをクリックします。

f:id:stangler:20181105123918p:plain

まずは、先ほどメモしておいたプライマリドメインの値を記入していきます。まず、CNAME レコードをプルダウンから選択。サブドメイン には、メモした CNAME の名前を記入。解決先 は、CNAME のを記入し、チェックマークをクリックして登録します。

f:id:stangler:20181105125028p:plain

同様に、サブドメイン( 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 のを記入。

f:id:stangler:20181105122037p:plain

同様に、サブドメイン( www )の CNAME も Create Record Set ボタンをクリックして、登録しておきます。

CNAME レコードの検証確認

Lightsail に戻り、ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィックとクリックしていきます。登録した CNAME レコードの検証状況を確認してみます。プライマリドメインサブドメインのどちらも検証済みになったら、次の作業、HTTPS の有効化に移ることができます。

ちなみに、以下の画像では、プライマリドメイン検証済みとなっていますが、サブドメインはまだ検証中のままです。プライマリドメインは、20分くらいで検証済みとなりました。

f:id:stangler:20181105130426p:plain

証明書を作成してから、72 時間以内に検証作業が終わらなければ、何かがおかしいので、また、証明書を作り直し、設定を見直す必要があります。残り時間については、以下の画像のように表示されます。

f:id:stangler:20181105133456p:plain

成功すると以下の画像のように表示されます。結局、サブドメインの検証に 2 時間くらいかかりました。

f:id:stangler:20181105141128p:plain

HTTPS の有効化

Lightsail > ネットワーク > LoadBalancer-Tokyo-1 > インバウンドトラフィックとクリックしていきます。HTTPS のプルダウンで、該当するドメインを指定します。

f:id:stangler:20181105141911p:plain

以上で設定作業は完了です!

ブラウザで確認

ブラウザに https://www.プライマリードメインを打ち込んでみてください。以下のような画面が表示されれば、HTTPS 化成功です。

f:id:stangler:20181105142747p:plain

ただ、CSS、JS などが HTTP のままなので、全体的に表示がおかしなことになってます。

CSS や JS を HTTPS

テーマの header.php などの該当部分を http から https に変更してやれば簡単に修正できますが、ここではプラグインで解決してみます。

ダッシュボード > プラグイン > 新規追加 と進んでみてください。プラグインの検索のところに今回インストールする SSL Insecure Content Fixer と入力してみてください。

f:id:stangler:20181105161945p:plain

インストールが完了したら有効化してください。次にプラグインを設定します。設定 > SSL Insecure Content に進みます。

HTTP_X_FORWARDED_PROTO (ロードバランサー、リバースプロキシ、NginX など)

という項目にチェックを入れます。あとはデフォルトのままで、変更を保存ボタンをクリックします。

ブラウザでもう一度、トップページを表示し以下のようになって入れば完了です!

f:id:stangler:20181105162609p:plain

以上です。