【AWS】ACMで証明書を発行してhttpsでアクセスしてみる！【AWS Certificate Manager】

今回はこのような質問をいただきました。

前回はCloudFrontからWordPressにアクセスできるようにしました。

ここまでやったらSSL化も行いたいですよね。

そこで今回はこちらの質問について解説していきます！

ACMで証明書を発行してCloudFrontに割り当てる！

ACMで証明書を発行する

まずはACM（AWS Certificate Manager）で証明書を発行しましょう！

AWSのコンソールにログインしてリージョンを「米国東部 (バージニア北部)」に変更しておきましょう。

その後、「Certificate Manager」を選択します。

「証明書のプロビジョニング」の「今すぐ始める」をクリック。

「パブリック証明書のリクエスト」を選択して「証明書をリクエスト」をクリック。

以下の2つを登録して「次へ」をクリック。

「DNSの検証」を選択して「次へ」をクリック。

タグは特に設定しなくてもOK!

あとは内容を確認して「確定とリクエスト」をクリック！

検証の画面に遷移するので「Route 53でのレコードの作成」をクリックしておきましょう。

作成できたら「続行」で証明書の発行を完了しましょう。

しばらくすると発行済みになります。

次にこの証明書をCloudFrontに適用してみましょう！

CloudFrontに適用する

前回作ったCloudFrontのページを表示します。

そして「General」タブの「Edit」をクリック。

今回は「hikari-blog.com」か「 www.hikari-blog.com」にアクセスするとWordPressへ遷移するように設定してみます。

以下のように設定します。

設定できたら「Yes, Edit」をクリック。

次に「Behaviors」タブの項目の「Viewer Protocol Policy」がすべて「HTTP and HTTPS」になっているので「Redirect HTTP to HTTPS」に再設定しておきましょう。

選択して「Edit」をクリックして、「Redirect HTTP to HTTPS」を「Redirect HTTP to HTTPS」に変更していきます。

すべて変更してこんな感じになっていたらOK!

最後にRoute53で「hikari-blog.com」もしくは「 www.hikari-blog.com」にアクセスしたら、CloudFrontのドメインに遷移するように設定してみましょう！

Route53でCloudFrontのドメインを設定

「wp.hikari-blog.com」を登録したときと同様に設定してみましょう！

Route53の「ホストゾーン」から自分のドメインのホストゾーンを選択して「レコードの作成」をクリック。

以下の2つを作成します。

これで「hikari-blog.com」もしくは「www.hikari-blog.com」にアクセスすると…

表示されました！（？）

なんか色がなくなっちゃいましたね。

これはSSL化したことによってCSSが読み込めてないからです。

これは管理画面からプラグインを導入して修正してみましょう。

SSL Insecure Content Fixerの導入

WordPress管理画面にログインして「プラグインの追加」で「SSL Insecure Content Fixer」をインストールしましょう。

そして有効化。

「インストール済みプラグイン」に追加されているの「設定」をクリック。

「HTTPSの検出方法」を「HTTP_CLOUDFRONT_FORWARDED_PROTO (Amazon CloudFront HTTPS キャッシュ済みコンテンツ)」に設定して「変更を保存」。

これで完璧！

あとがき

これで公開できるWordPressブログが構築できましたね。

このHikariBlogもこの手順で構築しました。

AWSを利用できて毎月400円程度で維持できるのでお得です！

ブログに興味があれば構築してみてください！