ACM + CloudFrontでLightsailをHTTPS化するまでの備忘録


# はじめに
- 以前、[AWSのLightsailでWordPressを導入](https://qiita.com/Toyoizumi-Hiroyuki/items/dc72b467dc8052c99976)して、Webサイトを構築しました。
- 前回、構築したWebサイト用に取得した[ドメインをRoute53に追加](https://qiita.com/Toyoizumi-Hiroyuki/items/cf6fff3332e8e6802d68)しました。
- 今回は、`AWS Certificate Manager（ACM）`と`CloudFront`を利用して、`HTTPS`通信可能にしました。
- その時の手順を備忘録としてまとめました。

# 動作環境
- macOS Catalina 10.15.4

# 1. ACMでの作業
- ACMでSSL認証書を作成します。ただしこの証明書は、外部で使用することはできませんが、無料かつ自動更新なので管理が非常に容易です。
- [AWSコンソール](https://aws.amazon.com/jp/)へアクセスし、サインインします。
![Fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/e0e1a40c-dc94-cd40-47a7-dbc381a96c94.png "Fig.1")
- `リージョン`を`バージニア北部`に変更します。
- `サービスを検索する`に`Certificate Manager`入力します。
- `Certificate Manager`コンソールへアクセスします。 
![Fig2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/c424f4c5-a9d4-4cde-5d1a-8e76229c2269.png "Fig.2")
- `証明証のプロビジョニング`の`今すぐ始める`をクリックします。
![Fig3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/3f27cabf-942a-6e59-70ba-c0c8b96acca8.png "Fig.3")
- 証明証のリクエストを行います。
    - `パブリック証明証のリクエスト`にチェックを入れます。
    - `証明証のリクエスト`をクリックします。
![Fig4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/ba8768d5-8b31-6ca4-8811-fad1f7f5de71.png "Fig.4")
- ドメイン名の追加を行います。
    - 下記のドメイン名（2件）を入力します。
        - `Webサイトのドメイン名`
        - `*.` + `Webサイトのドメイン名`
    - `次へ`をクリックします。 
![Fig5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/b681cb1d-a81d-c104-1d22-4d2c80d96c69.png "Fig.5")
- 検証方法の選択を行います。
    - `DNSの検証`にチェックを入れます。
    - `次へ`をクリックします。
![Fig6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/6e165d1e-9be2-8e8c-72dd-d78bc790acb9.png "Fig.6")
- タグの追加を行います。
    - 何も設定せずに（デフォルトのまま）、`次へ`をクリックします。
![Fig7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/3a5f7a31-ba11-1c7a-daea-6257c0d3b4aa.png "Fig.7")
- `確定とリクエスト`をクリックします。
![Fig8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/758d3e6c-caaa-34f8-4221-cdb31b4add8d.png "Fig.8")
- `Route53でのレコードの作成`をクリックします。
![Fig9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/cfa16394-b375-c696-ce23-7286d33724b9.png "Fig.9")
- `作成`をクリックします。
![Fig10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/9fcae88c-09f2-dfa2-e7ad-e232dd56824b.png "Fig.10")
- `成功`と表示されることを確認します。
- `続行`をクリックします。
![Fig11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/53c24ae8-c16b-dd74-3503-23038220d443.png "Fig.11")
- 証明書の一覧が表示されます。
- 対象ドメインに対して、作成した証明書が表示されていることを確認します。
- `状況`が`発行済み`になっていればOKです（少し時間がかかる場合があります）。
![Fig12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/c0b9485b-ef1b-beba-5220-3bef54540714.png "Fig.12")
- 以上で、ACMでの作業は、完了です。

# 2. CloudFrontでの作業
- AWSマネージメントコンソールへアクセスします。
- `リージョン`を`バージニア北部`に変更します。
- `サービスを検索する`に`CloudFront`入力します。
- `CloudFront`コンソールへアクセスします。 
![Fig13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/54a6c958-e081-95f6-9b87-543c5f272ef7.png "Fig.13")
- `Create Distribution`をクリックします。
![Fig14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/3c8cdc46-a01e-3f7a-348f-d9493512fca7.png "Fig.14")
- `Web`の`Get Started`をクリックします。
![Fig15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/2f9195b3-6c10-99ed-6ecc-2bc1eff0e188.png "Fig.15")
- Distributionの設定を行います。
    - `Origin Settings`について、下記項目を設定します。 他項目は、デフォルトのままでOKです。
        -  `Origin Domain Name`：`Webサイトの仮（サブ）ドメイン名`
        -  `Origin Protocol Policy`：`HTTP Only`
        -  `Origin Custom Headers HearderName`：`CLOUD_FRONT_ACCESS`
        -  `Origin Custom Headers Value`：`TRUE`
    - `Default Cache Behavior Settings`について、下記項目を設定します。他項目は、デフォルトのままでOKです。
        -  `Viewer Protocol Policy`：`Redirect HTTP to HTTPS`
        -  `Allowed HTTP Methods`：`GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE`
![Fig16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/b5db4c27-3d1c-13ef-d70a-359706ba0228.png "Fig.16")
    - `Distribution Settings`について、下記項目を設定します。他項目は、デフォルトのままでOKです。
        -  `Alternate Domain Names`：`最終的に公開したいドメイン名`
        -  `SSL Certificate`：`Custom SSL Certificate`にチェックを入れて、`作成したACM`を選択します。
    - `Create`をクリックします。
![Fig17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/55c6ab04-35a5-4153-dfc5-72eb63c14844.png "Fig.17")
- CloudFront Distributionの一覧が表示されます。
- 作成したDistributinonが表示されていることを確認して、`ID`をクリックします。
![Fig18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/2f79ce0c-e2f2-d5c1-24b1-32e9e2059350.png "Fig.18")
- `Behaviors`をクリックします。
- `Create Behavior`をクリックして、4つの`Behavior`を作成します。
    - 各設定項目については、下記の表の通りです。他項目は、デフォルトのままでOKです。

|項目名|Behavior1|Behavior2|Behavior3|Behavior4|
|:--|:--|:--|:--|:--|
|Path Pattern|Default(*)|/wp-json/*|/wp-admin/*|/wp-login.php*|
|Viewer Protocol Policy|Redirect HTTP to HTTPS|Redirect HTTP to HTTPS|Redirect HTTP to HTTPS|Redirect HTTP to HTTPS|
|Allowed HTTP Methods|GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE|GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE|GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE|GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE|
|Cache Based on Selected Request Headers|Whitelist|Whitelist|Whitelist|Whitelist|
|Whitelist Headers|CloudFront-Forwarded-Proto,Host|CloudFront-Forwarded-Proto,Host,X-WP-Nonce|CloudFront-Forwarded-Proto,Host|CloudFront-Forwarded-Proto,Host|
|Object Caching|デフォルトのまま|デフォルトのまま|Customize|Customize|
|TTL|デフォルトのまま|デフォルトのまま|0|0|
|Forward Cookies|Whitelist|All|All|All||WhitelistCookies|comment_author_*,wordpress_logged_in_*,wordpress_test_cookie,wp-settings-*|なし|なし|なし|
|Query String Forwarding and Caching|Forward all,cache based on all|Forward all,cache based on all|Forward all,cache based on all|Forward all,cache based on all|

![Fig19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/3c116bbc-41f2-3f2c-6eb9-677a519fa2ea.png "Fig.19")

- 以上で、CloudFrontでの作業は、完了です。

# 3. Route53での作業
- 外部から`https://ドメイン名`でアクセスする時、`Route53`で作成済みの`ホストゾーン（Aレコードのエイリアス）`で`CloudFront`のドメインがアクセス先になるように設定します。
- Route53コンソールへアクセスします。
- 対象のドメインをクリックします。
![Fig20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/a1f44328-3792-49e5-1f53-ed00bb0ca966.png "Fig.20")
- `レコードセットの作成`をクリックします。
![Fig21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/ae25beeb-e602-be1a-ea92-4a51edd7bb46.png "Fig.21")
- レコードセットを作成します。
    - 下記項目を入力します。
        - `名前`：空のままでOK（最終的に公開したいドメイン名になるようにします）
        - `タイプ`：`A-IPv4アドレス`
        - `エイリアス`：`はい`
        - `エイリアス先`：`CloudFrontのドメイン名`（リスト表示されるので選択します）
        - `ルーティングポリシー`：`シンプル（デフォルト）`
    - `作成`をクリックします。
![Fig22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/7f197a5b-99d8-0c72-bd93-940a9882e106.png "Fig.22")
- 最終的に、対象ドメインに対して、5件分のレコード（2件の`A`、`NS`、`SOA`、`CNAME`）が表示されていることを確認します。
![Fig23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/61f34ff9-4297-c23b-a94e-f2cbd2e96f82.png "Fig.23")

- 以上で、Route53での作業は、完了です（実際に変更反映が完了するまで、数十分かかる場合があります）。

# 4. WordPressでの作業
- `wp-config.php`を編集します。
- Macの`ターミナル`を起動します。
- LightsailインスタンスにSSH接続します。
- 下記のコマンドを実行して、`wp-config.php`を開きます。
 
```shell:bash
vim /opt/bitnami/apps/wordpress/htdocs/wp-config.php
```
- 下記項目を変更して、保存します。
    - `WP_SITEURL`の`http`を`https`に変更
    - `WP_HOME`の`http`を`https`に変更
![Fig24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/18ba74f7-5f6c-0867-9d71-41ed833ad77d.png "Fig.24")
- `Apache`の設定を変更します。
- 下記のコマンドを実行して、`httpd.conf`を開きます。

```shell:bash
vim /opt/bitnami/apache2/conf/httpd.conf
```
- 1行目に下記を追記して、保存します。

```shell:
SetEnvIf CLOUD_FRONT_ACCESS "TRUE" HTTPS 
RequestHeader set CLOUD_FRONT_ACCESS "TRUE" env=HTTPS 
```
![Fig25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/de2e778b-4b04-1fe7-5ea7-aac51ef7d9b4.png "Fig.25")

- `Apache`を再起動します。下記のコマンドを実行します。

```shell:bash
sudo /opt/bitnami/ctlscript.sh restart apache
```
- 以上で、WordPressでの作業は、完了です。

# 5. HTTPS化の確認
- ブラウザを開き、`https://ドメイン名`でアクセスします。アクセスできればOKです。
![Fig26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477950/8b9ee454-5d75-09be-fa53-faed5ebc42fe.png "Fig.26")