【AWS】WordPress SSL化の備忘録

#はじめに
AWS×お名前.comでWordPressを作成しSSL化しようとしたが、ネット上の記事通りにはうまくいかなかった箇所が一部あったので、備忘録として残したい。

#条件
・AWSでWordPressを構築(AWS linuxインスタンスに、Apacheウェブサーバーをインストールする。）
・お名前.comでドメイン取得

#主な手順
1.Certificate ManagerにてSSL証明書を発行
2.お名前.comでCNAME設定
3.ロードバランサの設定
4.Route53の設定追加
5.ターゲットの登録
6.WordPressをhttps対応にさせる(WordPress&サーバーでの設定）
7.サイトのバックアップ
8.CSSおよびJavascriptファイルからのHTTP参照の有無の確認
9.HTTP→HTTPSへのリダイレクト設定
10.動作確認

#方法
[AWS×お名前.comで作成したサイトをSSL化](https://katsuhiroblog.com/aws-wordpress-ssl/)
上記サイトを参考にはじめは進めた。

<h2>Certificate ManagerにてSSL証明書を発行</h2>
下記の画像のようにCertificate ManagerにてSSL証明書を発行することを目指す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/535e19ab-50bf-6a42-aaec-bafa1c6e18b8.png)

パブリック証明書のリクエストを選択。
<img width="1260" alt="スクリーンショット 2020-07-14 9.22.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/fe23b917-1db6-fd41-86ad-299358dd8b7a.png">
ドメイン名にお名前.comで追加したドメインを入力し、この証明書に別の名前を追加でアスタリスク (*) を使用して、ワイルドカード証明書も併せてリクエストする。
<img width="1243" alt="スクリーンショット 2020-07-07 22.47.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/c2d9d279-ea43-60f1-7b7d-1cfb8b1ea542.png">

<img width="1248" alt="スクリーンショット 2020-07-14 9.30.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/39bcf970-260d-8381-abeb-9cc9906d949f.png">

検証方法の選択で、DNSの検証を選択。
<img width="1238" alt="スクリーンショット 2020-07-14 9.35.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/6f96a3ec-5491-02fe-3f8e-9810bd25cdd2.png">

適宜あとで見たときにもわかりやすいように、タグを設定する。
<img width="1225" alt="スクリーンショット 2020-07-14 9.36.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/b49d2380-4ef5-0f61-549e-dde13d64da34.png">
内容を確認し、確定とリクエストを押す。
<img width="1240" alt="スクリーンショット 2020-07-14 9.38.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/d5e1c6fa-1fa2-416c-e2a7-ebe9b1eb34d6.png">

リクエストを押したら続行ボタンを押し、証明書の画面に戻る。
ドメインの横の▶︎じるしをクリックすると名前・種類・値が出てくるので、値をコピーする。（※画像では状況が発行ずみ・検証状態が成功となっているが、本当はリクエストを出しただけだと検証保留中となっている。）
<img width="945" alt="スクリーンショット 2020-07-14 9.44.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/55ced47d-cb17-4375-7fe3-7722ee71d86b.png">

<h2>お名前.comでCNAME設定</h2>
お名前.com Naviに行き、ご利用状況＞ドメイン一覧をクリック。
<img width="1135" alt="スクリーンショット 2020-07-14 10.06.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/64a3e84a-bf2f-b1e9-0161-617d8d4b5292.png">
該当のドメインをクリック。
<img width="1168" alt="スクリーンショット 2020-07-14 10.07.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/b4606c18-201f-78d8-6fa0-ca7325c3830c.png">
ドメイン詳細＞ドメイン機能一覧をクリック。
<img width="1142" alt="スクリーンショット 2020-07-14 10.09.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/58eb2ebb-2cf7-1011-f203-0807808b7a94.png">
ネームサーバー設定＞DNS関連機能の設定をクリック。
<img width="899" alt="スクリーンショット 2020-07-14 10.14.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/cfe49c72-9d62-c7be-6433-faf66d63fb94.png">
該当のドメインか確認し、次へをクリック。
<img width="1061" alt="スクリーンショット 2020-07-14 10.16.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/e205ac47-a146-9519-cbfa-34f4753c0341.png">
DNS設定＞DNSレコード設定を利用するの設定するボタンを選択。
<img width="759" alt="スクリーンショット 2020-07-14 10.18.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/dddbc3d1-ddde-b52a-8022-4b8de6b9105a.png">
A/AAAA/CNAME/MX/NS/TXT/SRV/DS/CAAレコードで下記の画像のようにホスト名にwwwを、VALUEに先ほどコピーした値を入力し、右の追加ボタンを押す。
<img width="755" alt="スクリーンショット 2020-07-14 10.25.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/f8247599-300a-6829-4f87-702b7e996fba.png">
下にスクロールして、必要な場合ネームサーバー変更確認を設定して「確認画面へ進む」を押す。（私の場合はすでにネームサーバーを別に設定していたので、チェックしなかった。）
<img width="736" alt="スクリーンショット 2020-07-14 10.30.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/b80eca98-f029-280b-3c7b-fd28dfb17c64.png">
内容を確認し、問題なければ設定するボタンを押す。
<img width="690" alt="スクリーンショット 2020-07-14 10.32.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/f86da0d3-0c16-54f7-8ce8-465453e34288.png">

これでCNAME設定完了。

<h2>証明書が発行されたことを確認</h2>
AWS Certificate Managerを開くと、発行ずみになっていることを確認。（場合によっては反映に時間がかかる可能性あり。）
<img width="945" alt="スクリーンショット 2020-07-14 9.44.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/931be5ab-091d-75a2-2184-4edef77dec8c.png">

<h2>ロードバランサの設定</h2>
EC2>ロードバランサーをクリックし、ロードバランサーの作成を選択。（下記画像ではすでに作成されておりますが、そちらは気にしないでください。）
<img width="1415" alt="スクリーンショット 2020-07-15 10.37.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/7c7cc7cc-6bdd-f5f2-e2aa-8ab2ef3c2850.png">

「Application Load Balancer　HTTP,HTTPS」の選択を行う。
<img width="1420" alt="スクリーンショット 2020-07-15 10.40.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/d7161c06-636b-080f-b845-3d4cec0d18d8.png">
「名前」を適宜好きな名前で入力する。
<img width="1419" alt="スクリーンショット 2020-07-15 10.43.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/c6011f7f-a16c-ff33-af89-8f13a79fdb75.png">
「リスナー」の追加を押して、「HTTPS」を選択する。
<img width="1415" alt="スクリーンショット 2020-07-15 10.46.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/3ddaaa35-6b2e-c8a6-6ac6-624a2d58c674.png">
アベイラビリティーゾーンで該当のVPCを選択し、アベイラビリティゾーンでチェックボックスを上から２つ選択し、セキュリティ設定の構成へ進む。
<img width="1416" alt="スクリーンショット 2020-07-15 10.55.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/41f7f0c2-dd4c-fba1-6484-3ae3b440aa5c.png">
発行した証明書が選択されているか確認をして、「次の手順：セキュリティグループの設定」を押す。
<img width="1421" alt="スクリーンショット 2020-07-15 10.59.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/c87ce738-2c82-b3ae-c425-70e294198892.png">
「新しいセキュリティグループを作成する」を選んで、タイプで「HTTP」と「HTTPS」を選択し、「次の手順：ルーティングの設定」を押す。
<img width="1431" alt="スクリーンショット 2020-07-15 11.04.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/b6ea8e54-6b0f-5e7e-8d08-298175f09dd0.png">
名前を適宜好きな名前で入力し、「次の手順：ターゲットの登録」を押す。
<img width="1417" alt="スクリーンショット 2020-07-15 11.09.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/04e028a8-05e5-0441-1a94-2a4d9a230a9f.png">
該当のインスタンスを選択し、登録済みに追加を押す。
<img width="1417" alt="スクリーンショット 2020-07-15 11.12.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/75e3c63c-6503-1cb5-6970-c246b415632b.png">
登録済みになっているか確認し、「次の手順：確認」を押す。
<img width="1422" alt="スクリーンショット 2020-07-15 11.15.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/3990f3b7-6546-f6f8-5186-f7d991050937.png">
内容に問題ないか確認し、「作成」を押す。
<img width="1428" alt="スクリーンショット 2020-07-15 11.18.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/4faff7db-d201-00dc-02ce-5c4b87a669c7.png">
ロードバランサーが作成されたか確認する。
<img width="1415" alt="スクリーンショット 2020-07-15 10.37.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/7c7cc7cc-6bdd-f5f2-e2aa-8ab2ef3c2850.png">

<h2>Route53の設定追加</h2>
「ホストゾーン」を押す。
<img width="1382" alt="スクリーンショット 2020-07-16 17.51.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/091d8aa5-27ea-a497-1ceb-f246857123e1.png">
該当のドメイン名をクリック。
<img width="1389" alt="スクリーンショット 2020-07-16 17.52.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/f5188bcc-9155-d78d-71fa-fa091a515f17.png">
「レコードセットの作成」を押す。
<img width="1374" alt="スクリーンショット 2020-07-16 18.04.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/89720125-fda0-6a9d-cb86-462b6af40906.png">

タイプはデフォルトの「AーIPv4アドレス」、エイリアスを「はい」、エイリアス名をELB Application Load Balancerの先ほど作成したものを指定し、作成を押す。（※私の場合Aレコードがすでに存在して新たに作れなかったため、左記のエイリアスとエイリアス名を該当のものに変更し、レコードセットを保存した。）
<img width="1365" alt="スクリーンショット 2020-07-16 18.11.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/021d9d08-4a34-b64e-d2b6-4c01dd47dc11.png">

<h2>503 Service Temporarily Unavailableエラーが発生...</h2>
ネット記事ではこれでSSL化が完成し、HTTPSでサイトの表示ができるとのことだったが、「503 Service Temporarily Unavailable」エラーが発生し、サイトが表示できなかった。
そのためググってみると[【初心者だよ その2】 AWSで無料SSLをやってみた](https://qiita.com/gremito/items/2a416b042a0c94d4541d)
こんな記事を発見。
つまりロードバランサーの配下で起動するインスタンスを指定できてないため、ターゲットの登録を行うということ。
EC2>ロードバランシング＞ターゲットグループを選択し、該当のターゲットグループを選択する。
<img width="1363" alt="スクリーンショット 2020-07-16 18.39.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/7dce1283-4cf8-b936-0786-2cc990688321.png">
アクション＞インスタンス/ip ターゲットの登録と登録解除をクリックする。

<img width="1359" alt="スクリーンショット 2020-07-16 18.44.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/12f475a1-9ad6-8583-5be9-b4349aa6f339.png">
該当のインスタンスを登録済みに追加し、保存をする。
<img width="1365" alt="スクリーンショット 2020-07-16 18.47.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/12aa8b3c-3fd6-6590-46ea-0c7b3afbeed9.png">
一応httpsで接続できたものの、CSSが動作しなかった。
<img width="1388" alt="スクリーンショット 2020-07-11 20.32.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/fd424d43-1703-a188-4120-a1b8b4988983.png">

<h2>Wordpressをhttps対応にさせる</h2>
またまたググって下記の記事発見。
[AWSに構築したWordPressをhttps対応してみた](https://qiita.com/olaf_system/items/d80aa943107eb2cfcb20)
WordPress側がhttpsに対応してないため、このようなデザイン崩れが発生するとのこと。

<h2>Wordpress側の設定</h2>
http://xxx.xxx.xxx.xxx/wp-login.php
で管理画面にログイン。
プラグイン＞新規追加で「Really Simple SSL」を検索してインストールし、有効化する。
<img width="1393" alt="スクリーンショット 2020-07-17 9.38.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/6aa33679-c0e8-b108-501e-c94a4dd1cec9.png">

<h2>サーバー側での設定</h2>

```
$ cd /var/www/html

# 管理画面から設定が変えれるように権限変更しておく
$ chmod 660 wp-config.php

# 下記設定を
# require_once(ABSPATH . 'wp-settings.php');
# の上部に追加
$ vi wp-config.php
_/_/_/_/_/_/_/_/_/_/_/_/_/_/
$_SERVER['HTTPS']='on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);
_/_/_/_/_/_/_/_/_/_/_/_/_/_/
```

※必ずrequire_once(ABSPATH . 'wp-settings.php');の上部に入れること。下部に入れると管理画面にログインした時「このページにアクセスする権限がありません。」と表示され、入れません。
参考：https://lucklog.info/wp-ssl-error/

<h2>Really Simple SSLでSSLに移行するための準備</h2>
設定＞一般で「WordPress アドレス (URL)」と「サイトアドレス (URL)」をhttpsに変更する。	
<img width="1227" alt="スクリーンショット 2020-07-17 9.53.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/3607fcad-840b-87bb-73dd-d83379e2ad73.png">

そして「SSLに移行する準備がほぼ完了しました。」の「はい、SSLを有効化します。」のボタンを押せば、SSL化できそうだが、その前に念のため警告の内容を対処したい。

<h2>サイトのバックアップ</h2>
[WordPressでバックアップを取る4つの方法（初心者向け）](https://saruwakakun.com/html-css/wordpress/backup)
ここまで相当長くなってしまったので、詳しくは上記URL「4. BackWPupで定期的に自動バックアップを取る」「5. 今すぐWordPress全体のバックアップを取る方法」を参照。
プラグイン「BackWPup」をインストール＆有効化する。
<img width="1382" alt="スクリーンショット 2020-07-17 10.07.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/1f583eba-241b-c7dc-1976-f618d7bedb22.png">
有効化したらBackWPup>新規ジョブを追加をクリックし、一般・スケジュール・DBバックアップ・ファイルの各種設定を上記サイトを参考に行い、変更を保存する。それができたらWordPress全体のバックアップを取る。
<img width="1394" alt="スクリーンショット 2020-07-17 10.14.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/caf35964-56aa-d4f7-46f5-5388c9b22251.png">

<h2>CSSおよびJavascriptファイルからのHTTP参照の有無の確認</h2>
他の記事を見ても特に.css および .js ファイル内からの HTTP 参照の変更をしなくても、特に不具合がなさそうだが、一応確認したい。ダウンロードをしたバックアップを開いて、http://がないか検索。特にそのような記述がなかったので、「はい、SSLを有効化します。」ボタンを押す。

そうすると、CSSの崩れが解消され無事SSL化できた。
イメージ図
<img width="1386" alt="スクリーンショット 2020-07-17 10.34.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/42924995-db04-3d7d-14f3-5064ab332076.png">

<h2>HTTP→HTTPSへのリダイレクト設定</h2>
[[新機能]Webサーバでの実装不要！ALBだけでリダイレクト出来るようになりました！](https://dev.classmethod.jp/articles/alb-redirects/)
今回はWeb サーバー側で実装ではなく、ALB側で実装をしてみる。
EC2>ロードバランシング　ロードバランサー>該当のロードバランサーを選択>下記のリスナー>「HTTP:80」のルール　ルールの表示/編集をクリック。
<img width="1397" alt="スクリーンショット 2020-07-17 10.40.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/bbffe088-aa1b-3931-a5a7-07f4fa9c08d0.png">

+ボタンを押し、ルールを追加する。
<img width="1381" alt="スクリーンショット 2020-07-17 10.48.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/29687c75-ed84-87ff-35d8-d5c2aeea0361.png">
ルールの挿入を選択し、IFの条件追加で「パス...」で全ての条件でHTTPSリダイレクトさせるため、「*（アスタリスク）」を設定。
<img width="1247" alt="スクリーンショット 2020-07-17 10.50.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/a31c8fb9-fe82-3229-1b2c-b958e6791548.png">
アクションの追加＞リダイレクト先を選択し、HTTPSのポートを443にして「デフォルトホスト、パス、クエリを使用」と「301 - 完全に移動されました」を選択。そして内容を確認し、右上の青い「保存」ボタンを押す。
<img width="1309" alt="スクリーンショット 2020-07-17 10.56.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/7a65baa1-a699-6dca-c9e5-929634f5d938.png">

<h2>動作確認</h2>
設定後、curl -I httpの該当アドレスでアクセスすると
HTTP/1.1 301 Moved Permanentlyと、Location: https://xxx.xxx:443/
となっており、設定したとおりにHTTPS（443）にリダイレクトされたことが確認できる。

```
$ curl -I http://xxx.xxx
HTTP/1.1 301 Moved Permanently
Server: awselb/2.0
Date: xx, xx xx 2020 xx:xx:xx GMT
Content-Type: text/html
Content-Length: 150
Connection: keep-alive
Location: https://xxx.xxx:443/
```

#まとめ
SSL化するにあたっての手順をまとめた。レンタルサーバーだとボタンを押したらSSL化できたが、AWS上で行うと色々と手順を踏む必要がある。手間がかかるが、駆け出しエンジニアのインフラの勉強にはちょうどいいと思うので、ぜひ挑戦しよう。