スポンサーリンク

AMIMOTO AMI版WordPressをAmazon CloudFrontとACM(AWS Certificate Manager)で常時SSL化する

この記事は約4分で読めます。

中々出来なかった当ブログの常時SSL化が終わりましたので、手順をご紹介します。

スポンサーリンク

前提条件

WordPressの設定ファイル構成について

当ブログはDigitalCube社のAMIMOTO AMI(Nginx版)を元にAWS上にWordpressを構築しております。
WordPress、Nginxの設定ファイルの内容・構成はAMIMOTO AMIでカスタマイズ、チューニング済となっており、通常の構成と異なる可能性がある点ご承知おき下さい。

Amazon CloudFrontが設定済である事

常時SSL化の主要設定はCloudFrontで行います。
手順について、CluoudFrontが設定済である前提でご説明しております。
未設定の場合はこちらの記事をご確認下さい。

AWSでWordPressを構築する②(CloudFront設置)
今回やろうとしていることCloudFrontとは? AWSが提供する高速・高パフォーマンスなコンテンツ配信サービス(CDN) ユーザを最寄りのエッジサーバに誘導することで高速な配信を実現 コンテンツをエッジサーバでキャッ...

ACMで証明書が作成済である事

ACMで証明書が作成済である前提で手順をご説明します。
未設定の場合はこちらの記事をご確認下さい。
https://yamavlog.com/aws-acm/

スポンサーリンク

作業前バックアップの実施

今回の作業ではWordPressの設定ファイル(場合によってはNginxの設定ファイルも)も変更します。
また、プロトコルがhttp->httpsへと変更されるため、サイトのURL情報も変更します。
作業開始前にEC2,RDSのスナップショットを取得しておき、リカバリー出来る準備をしておきましょう。

スポンサーリンク

WordPressの設定変更

WordPressの[設定]->[一般]より、CloudFrontのURLを[http]から[https]に変更し保存します。

AlwaysOnSSL-WP-URL-Change-https

スポンサーリンク

CloudFrontの設定

CloudFrontコンソールを開き、設定対象のディストリビューションをクリックします。

Behaviorsの設定

[Behaviors]タブをクリックし、Behaviors一覧を表示します。

 

AlwaysOnSSL-CloudFront-Behaviors-List

Behaviors一覧に表示された全ての項目に対し、[Viwer Protocol Policy]の設定を[HTTP and HTTPS]から[Redirect HTTP to HTTPS]に変更し保存します。

AlwaysOnSSL-CloudFront-Behaviors-Setting-Change

 

Generalの設定

[General]タブより[Edit]をクリックします。

AlwaysOnSSL-CloudFront-General-Query

 

SSL Certificateで[Custom SSL Certificate (example.com):]を選択すると、その下にあるテキストボックスがアクティブになります。
クリックすると作成済のACM証明書が表示されますので、使用したい証明書を選択し保存します。

AlwaysOnSSL-CloudFront-General-Edit-Distribution

 

なお、このテキストボックスの下に[Request or Import Certificate with ACM]というボタンがあり、こちらからACM証明書の作成画面を起動し、ACM証明書の作成を並行して行う事も出来ます。
ACM証明書作成手順はこちらの記事をご確認下さい。

ACM(AWS Certificate Manager)で証明書を作成する
当ブログを立ち上げ1ヶ月ほど経ちましたが、ボチボチ常時SSL化しなきゃなという訳で、ACM証明書を作成しました。ACMについては、先日投稿した記事に概要スライドを掲載しているのでそちらを参照して下さい。ちなみに、ACMは無料で利用...

以上でCloudFrontの設定は完了です。

スポンサーリンク

wp-configの設定

ターミナルでEC2に接続しwp-config.phpに以下のコードを追記します。
追記場所は上の方で大丈夫です。

$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';

※AMIMOT AMIの場合、ファイルは/var/www/vhosts/i-xxxxxxxxにあります。
※i-xxxxxxxxはEC2インスタンスの物理IDです。

スポンサーリンク

httpsでリダイレクトするかテスト

CloudFrontのDeployが完了したら、ターミナルからcurlコマンドでCloudFrontへのhttpリクエストがhttpsでリダイレクトするか確認をします。

curl --verbose --head http://CloudFrontのURL

httpsでリダイレクトしているので問題なさそうです。

同様にキャッシュを参照せず、オリジンからコンテンツを取得するURL(wp-login.phpなど)でもテストしましたが、こちらもhttpsでリダイレクトしてきました、問題なさそうです。

httpsでリダイレクトしない場合

Nginxのconfファイルに以下のコードを追記してみて下さい。
追記場所はlocation/{}になります。
※confファイルの場所は環境や構成によって異なります。

if ($http_x_forwarded_proto = "http") {
 return 301 https://yourdomain.com$request_uri;
}

confファイル保存後、Nginxを再起動します。

$ sudo service nginx restart
スポンサーリンク

設定完了後にやる事

Google Chromeで記事やWordPressの管理画面にアクセスし、

  • httpsで通信し問題なくコンテンツが表示されるか
  • エラーが発生していないか

などを確認します。

Google Search ConsoleやGoogle analyticsを利用している場合は、https付きのサイト情報に更新しておきましょう。
https://junichi-manga.com/https-analytics-search-console/

 

スポンサーリンク
AWS
ヤマログ
タイトルとURLをコピーしました