HerokuとFastlyで独自ドメインを使ったTLS通信の設定

# 概要
独自ドメインを利用してHerokuへの接続をfastly経由のTLS接続とするための設定方法。
fastly、heroku、どちらの接続もそれぞれの共有SSLを利用する。

基本的には公式ドキュメントが詳しいのでこちらを確認してもらう方が確実です。

* [Fastly | Heroku Dev Center](https://devcenter.heroku.com/articles/fastly)

Fastly初体験なので、突っ込みあればよろしくお願いします。

## 以下は出来ない
以下は出来ない、とのことで、どちらも共用のSSL、かつ、料金がそこそこ高いものになってしまう。

### CDNの後ろにHerokuAppがある場合はACMを使えない
[Automated Certificate Management | Heroku Dev Center](https://devcenter.heroku.com/articles/automated-certificate-management#known-limitations)

>ACM is not available if your app is behind a CDN such as Cloudflare or Fastly.

Herokuでは独自ドメインを利用してCNAMEさえ設定すればLet's Encryptの証明書を自動で取得・更新してくれるACMの機能があるが、これがfastlyなどのCDNサービスを介する設定にすると利用出来なくなる。

### Fastlyの無料TLSでの独自ドメインの使用
[TLS オプション - 製品の詳しい説明 | Fastly Help Guides](https://docs.fastly.com/ja/guides/detailed-product-descriptions/tls-service-options#%E5%85%B1%E6%9C%89%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3)

>お客様自身のドメイン (`www.example.org`) にて共有ドメイン (`example.global.ssl.fastly.net`) を DNS の別名として指定すると、TLS の名前不一致の警告がブラウザにて表示されます。この不一致を解消するには、有料 TLS オプションのいずれかを購入いただくことが必要です。

よって、TLSオプション付きのプランが必要になる。

## この設定で実現される接続内容

```
クライアント  
↓  
↓ fastly共用SSL  
↓  
fastly  
↓  
↓ heroku共用SSL  
↓  
heroku
```

# 料金
前述の理由より、fastlyアドオンで、`TLS Domains`が利用出来るプランでなければならない。最低でも、`Quick(TLS) $55/mo` が必要。

[Fastly - Add-ons - Heroku Elements](console.actions.google.com/u/1/)

# セットアップ
## 手順

1. アドオンの追加
2. versionをcloneする
3. ドメインの追加
4. ホスト(Origin)の追加
5. versionをアクティブにする
6. ドメインをプロビジョニングに追加して承認
7. CNAMEレコードを追加

## アドオンの追加
ダッシュボードかコマンドで追加する。
Quick(TLS)の場合

```
$ heroku addons:create fastly:quick-tls
```

## versionのクローン
追加後、HerokuアプリのダッシュボードからFastlyアドオンをクリックしてFastlyの設定画面を開く。CONFIGUREタブを開くと、Version1が最初から設定されている。すでにActiveになっているVersionの設定は変更することが出来ないため、設定を変更する場合はVersionをクローンして設定後にアクティブにする、という流れとなる。
(アクティブにしたVersionはロックされ変更できなくなる)

なので設定を変更するために、Versionを選択し、Cloneする。

<img width="1472" alt="img01.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/8037/766d6b76-d2de-0ab8-270e-95a583d0f4e3.jpeg">

## ドメインの追加

設定したいドメインを設定から追加する。

<img width="1396" alt="img02.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/8037/bdf72cda-b2e9-3606-1b90-f21e4408ee06.jpeg">

CREATE DOMAINをクリックして追加。

<img width="989" alt="img03.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/8037/5f097714-f7f5-dce0-f267-8e22ee528029.jpeg">

Domain Nameに設定したいドメインを入力。 (例 `www.example.com` )
Commentは任意のコメント

CREATEで作成。

### ホストの追加
<img width="1409" alt="img04.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/8037/50daeb04-1f7c-db1a-0f2e-064f35d41db9.jpeg">

CREATE HOSTをクリックして追加。

<img width="1086" alt="img05.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/8037/415d42f7-b35e-dd6e-33a9-7dbc5f0f2b52.jpeg">

* Name : 名前 (なんでもよい)
* Address : IPアドレス or ホスト名 (ドメイン)

**Addressには、`appneme.herokuapp.com`の形のHerokuデフォルトのドメインを入れる。**

その下のTLSの設定を行う。

<img width="1065" alt="img06.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/8037/e137602a-286b-45a6-291c-efd27bd7ac32.jpeg">

* TLS
	* Enable TSL? : Yes
	* Verify certificate? : No

`Verify certificate`の項目はHeroku共用SSLを利用するため、Noとする。その他の項目は適宜(今回はどれも設定しなかった）

## アクティブ
Activeボタンをクリックしてアクティブにする。
これでFastlyの設定画面での設定は完了。

## ドメインをプロビジョニングに追加
ここからは独自ドメインを利用するためにFastlyのTSLプロビジョニングに追加する。そのために、[Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)のfastlyプラグインを追加しておく。

```
$ heroku plugins:install heroku-fastly
```

以下のコマンドでドメインをプロビジョニングに追加する。

```
$ heroku fastly:tls www.example.com -a your-app-name
=== Domain www.example.com has been queued for TLS certificate addition. This may take a few minutes.
 ▸    In the mean time, start the domain verification process by creating a DNS TXT record containing the following content:
 ▸
 ▸    globalsign-domain-verification=abcdefg01234567_vwxyz-09876
 ▸    Once you have added this TXT record you can start the verification process by running:
 ▸
 ▸    $ heroku fastly:verify start DOMAIN —app APP
```

### TXTレコード
返ってきたコメントの指示に従って、TXTレコードに指定の値を追加し、ドメインの所有確認を開始する。
以下、追加するTXTレコードの例。

* ホスト名 : `www.example.com`
* TYPE : TXT
* value : `globalsign-domain-verification=abcdefg01234567_vwxyz-09876`

追加後、コマンドから認証を開始する。

```
$ heroku fastly:verify start www.example.com -a your-app-name
 ▸    Valid approval domains: example.com,www.example.com
Type the approval domain to use (or ENTER if only 1): : www.example.com
 ▸    Domain queued for verification. This may take up to 30 minutes. To check the status, run 'heroku fastly:verify status DOMAIN --app APP'
```

途中、ルートドメインかサブドメインかを聞かれるので、設定するサブドメインを指定してやる。
設定には30分程かかる、とのことなので少し待つ。

以下のコマンドで状態を確認出来る。

```
$ heroku fastly:verify status www.example.com -a your-app-name
```

完了後、ステータスを確認すると以下のように設定するCNAMEが返ってくる。

```
$ heroku fastly:verify status www.example.com -a your-app-name
 ▸    Status: issued
 ▸    Your certificate has been issued. It could take up to an hour for the certificate to propagate globally.
 ▸
 ▸    To use the certificate configure the following CNAME record:
 ▸
 ▸    CNAME  www.example.com  foo.bar.ssl.fastly.net
```

## CNAMEレコードを追加
表示されたCNAMEレコードをDNSで設定する。

* ホスト名 : `www.example.com`
* TYPE : `CNAME`
* VALUE : `foo.bar.ssl.fastly.net`

少し待ってアクセスすると、設定したドメインでfastlyの証明書が適用された状態でアクセス出来るようになる。

# 参考

* [Fastly | Heroku Dev Center](https://devcenter.heroku.com/articles/fastly)
* [Heroku+Fastly CNAME guide - Setup - Fastly&#39;s Community](https://community.fastly.com/t/heroku-fastly-cname-guide/438)
* Fastlyのヘルプ
	* [TLS オプション - 製品の詳しい説明 | Fastly Help Guides](https://docs.fastly.com/ja/guides/detailed-product-descriptions/tls-service-options)
	* [無料 TLS の設定 - セキュアな通信 | Fastly Help Guides](https://docs.fastly.com/ja/guides/securing-communications/setting-up-free-tls)
	* [Connecting to origins - Basic configuration | Fastly Help Guides](https://docs.fastly.com/guides/basic-configuration/connecting-to-origins)
	* [CNAME レコードの追加 - 利用開始設定 | Fastly Help Guides](https://docs.fastly.com/ja/guides/basic-setup/adding-cname-records)