初心者向け

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

acm-wordpress

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

WordPressをSSL化したい!

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

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

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

この手順で証明書を発行すると自動更新されるので管理が楽です!

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

ACMで証明書を発行する

まずはACM(AWS Certificate Manager)で証明書を発行しましょう!

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

CloudFrontが米国東部 (バージニア北部)に構築されるので米国東部 (バージニア北部)を選択する必要があります。

「米国東部 (バージニア北部)」に変更

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

「Certificate Manager」を選択

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

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

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

証明書をリクエスト

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

  • hikari-blog.com
  • *.hikari-blog.com

ドメイン名は自分のドメインに書き換えてください!

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

DNSの検証

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

タグを追加

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

確定とリクエスト

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

Route 53でのレコードの作成

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

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

発行済み

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

CloudFrontに適用する

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

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

「General」タブの「Edit」

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

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

  • Alternate Domain Names (CNAMEs):hikari-blog.com, www.hikari-blog.com
  • SSL Certificate:Custom SSL Certificate (example.com):
    テキストボックス:作成した証明書を選択

Alternate Domain Names (CNAMEs)を複数指定する場合は改行で区切る必要があります。

Edit Distribution

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

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

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

Edit Behavior

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

Behaviors

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

Route53でCloudFrontのドメインを設定

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

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

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

  • レコード名:未入力
  • エイリアス:チェック←重要!
  • トラフィックのルーティング先:
    • CloudFrontディストリビューションへのエイリアス
    • 米国東部(バージニア北部)
    • 作成したCloudFrontのドメイン名
  • レコード名:www
  • エイリアス:チェック←重要!
  • トラフィックのルーティング先:
    • CloudFrontディストリビューションへのエイリアス
    • 米国東部(バージニア北部)
    • 作成したCloudFrontのドメイン名

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

設定前の表示

表示されました!(?)

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

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

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

SSL Insecure Content Fixerの導入

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

SSL Insecure Content Fixer

そして有効化。

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

インストール済みプラグイン

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

HTTP_CLOUDFRONT_FORWARDED_PROTO (Amazon CloudFront HTTPS キャッシュ済みコンテンツ)

これで完璧!

設定後の表示

あとがき

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

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

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

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