初心者向け

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

acm-wordpress

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

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

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円程度で維持できるのでお得です!

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