HTTP/2対応100円ホスティング

## はじめに

### この記事で取り扱う内容

この記事では、S3 + Certificate Manager + CloudFront + Route53を利用したHTTP/2対応、独自ドメインの静的ウェブサイトホスティングのセットアップ手順を共有するためのものです。

### この記事で取り扱わない内容

* AWS自体の解説
* AWSアカウントの作成方法の詳細（概要と公式チュートリアルのみをご紹介します）
* ドメインの取得方法の詳細

### 想定する読者

* フロントエンド技術については知識がある
* サーバー側の技術については専門外
* AWSについての基本的な知識を学習したい

という方を想定して記事を書いています。そのため、操作はCLIではなくWEBコンソールで行い、各ステップごとにスクリーンショットを使って解説を行います。
サーバーサイドの知識、経験のある方には冗長な解説になるかと思いますが、ご承知ください。

### 文中の絵文字について

⭕️推奨する作業をこのアイコンでお知らせします。

❗詰まりポイントはこのアイコンでお知らせします。

❌してはいけないことはこのアイコンでお知らせします。

### 環境

**この記事は2018/07時点でのAWSを元に製作されています。** 今後AWSのUIや設定項目がバージョンアップとともに変更になる可能性がありますのでご注意ください。

AWSのWEBコンソールは、ログインしている状態ならリンクから移動できます。例としてこのリンクから[S3コンソール](https://console.aws.amazon.com/s3/)へ移動できます。文中には操作に必要なコンソールへのリンクを埋め込んでいます。

### 表題の費用について

今月の私の概算請求金額です。期間は月、単位はドルです。

![](https://www.evernote.com/l/AAl6x9h7CfZCJasEM7BuhP2FMUazV2Q2eDgB/image.png)

S3をホスティング以外にアーカイブにも利用しています。
アクセス数、総転送量、保存容量にもよりますが、個人の静的サイトは月1ドル以下で運営できるはずです。

なお、独自ドメイン自体の取得および維持の費用は表題の費用に含まれていません。
ご注意ください。

## 手順

この記事は公式チュートリアル[Amazon S3 での静的ウェブサイトのホスティング](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html)を基準に作業を進めていきます。

1. 事前準備
1. S3で静的ウェブサイトのホスティング
1. S3 + Route53で独自ドメインのホスティングを行う
1. S3 + Certificate Manager + CloudFront + Route53でHTTP/2に対応した静的ウェブサイトのホスティングを行う

では始めましょう。👍

## 事前準備

AWSでの独自ドメインホスティングには、アカウントの作成とドメインの取得が必要になります。ここではその作業の概要を説明します。

### AWSアカウントを作成する

まずはここからAWSのアカウントを作成します。

[AWSの開始方法](https://aws.amazon.com/jp/getting-started/)

AWSアカウントが作成できたら、次は[Identity and Access Managementコンソール](https://console.aws.amazon.com/iam/)でIAMユーザーを製作します。アカウントの管理は[IAM のベストプラクティス](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/best-practices.html)にしたがって管理しましょう。

1. [AWS アカウントのルートユーザーのアクセスキーをロックする](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/best-practices.html#lock-away-credentials)
2. [最初の IAM 管理者のユーザーおよびグループの作成](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/getting-started_create-admin-group.html)
3. [AWS での多要素認証 (MFA) の使用](https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_credentials_mfa.html)

この記事の範囲では上記3つの手順を行えば準備完了です。以降は手順2で製作したIAMユーザーとしてログインし、作業を続けます。

❗作成したAWSアカウントは漏出すると経済的な損失が発生します。取り扱いには十分注意してください。
⭕️AWSアカウントを保護するための設定と手順の記事をご紹介します。すべてのAWSユーザーにこの記事をオススメします。

[AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ](https://qiita.com/tmknom/items/303db2d1d928db720888)

### ドメインを取得する / ドメイン名を決めておく

独自ドメインでのホスティングを行う場合、この段階でドメイン名を決めておきましょう。ドメインを購入する先はどこでも構いません。またAWSのサービスの一環としてもドメインは購入できます。

## S3で静的ウェブサイトのホスティング

S3はAWSのストレージを担当するサービスです。S3はストレージですが単体での静的サイトホスティングができます。
S3の設定は[S3コンソール](https://console.aws.amazon.com/s3/)から設定が行えます。

### バケットを作成する

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/create-bucket.html)

まずは、[S3コンソール](https://console.aws.amazon.com/s3/)から新規の[バケット](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/Introduction.html#BasicsBucket)を作成します。静的ウェブサイトホスティングに使用するバケット名は、使用するドメイン名と同じでなくてはいけません。
**この記事では、ドメイン名を仮に`あなたのドメイン.com`として表記します。**

![バケットを作成するボタン](https://www.evernote.com/l/AAlC0ghyBG9AnLOJum7xpeUVkhXED99Nx9MB/image.png)

バケットを作成するボタンを押すと、バケットの初期設定ウィザードが開きます。

![バケットの初期設定ウィザード](https://www.evernote.com/shard/s9/sh/3887928d-fc5b-4096-86f0-1b6c69bc7c21/c721be31a807ceb8/res/80d93e90-15cd-4985-9779-dafd927329c7/skitch.png)

❗バケット名を後から変更することはできません。事前に決めた、今後使用する予定のドメイン名をつけてください。

その他の設定はデフォルトのまま「バケットの作成」を完了させてください。
バケットの作成が完了すると、[S3コンソール](https://console.aws.amazon.com/s3/)のトップ画面にバケット一覧が表示されますので、バケット名をクリックすると詳細設定画面に移動します。

### バケットにStatic website hostingを設定する

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html#step1-create-bucket-config-as-website)
バケットの静的ウェブサイトホスティング機能を有効化します。

![](https://www.evernote.com/l/AAmE9bi86GFPoJLpWcCNotEhYFUay-gwmPMB/image.png)

図の箇所をクリックすると、設定ウィンドウが開きます。

![](https://www.evernote.com/l/AAnhc1djldRE7a4BqRg-XR0XLDZbFmyWg0oB/image.png)

インデックスドキュメントは、たとえば`http://あなたのドメイン.com`にアクセスしたときデフォルトで表示されるドキュメントを示します。
上記の例の場合

```shell
http://あなたのドメイン.com/index.html
```

がデフォルトで表示されます。

### バケットにパブリックアクセスを許可する

バケットをインターネット側からアクセスできるように設定を行います。

![](https://www.evernote.com/l/AAl7vH46Nb1PVrSDxp9MBcgtW7P7hTm5A98B/image.png)

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html)より設定例を抜粋します。
Resourceをご自身のバケットのものに書き換えると、対象のバケットがインターネットに公開されます。
arnは「Amazonリソースネーム」の略で、AWS上のあらゆるリソースに割り振られた固有IDです。S3のバケットにも割り振られています。S3のバケットのARNは「バケットポリシーエディター ARN: ...」という部分に表示されています。

```json
{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"PublicReadGetObject",
    "Effect":"Allow",
    "Principal": "*",
    "Action":["s3:GetObject"],
    "Resource":[
      "arn:aws:s3:::あなたのドメイン.com/*"
    ]
  }]
}
```

❗️Versionは単純な日付ではありません。ファイルフォーマットのバージョンを示す固定値です。これを書き換えると動かなくなります。

❌この設定を行うと、インターネットから自由にバケット内のデータを読み込めます。（書き込みはできません）
公開してはいけない情報 / するつもりのない情報が含まれるバケットには設定をしてはいけません。

### バケットにファイルをアップロードする

![](https://www.evernote.com/shard/s9/sh/467a587b-c9bc-4084-a141-59f4a3c25ec3/a3cc4010d88d0219/res/936a6655-9766-4c1d-b632-a08dd5c4ea15/skitch.png)

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/upload-objects.html)

バケットの「概要」タブからファイルのアップロードが可能です。テスト用のindex.htmlファイルをバケットにアップロードしてください。

### 確認する

ファイルのアップロードが終わったら、[Static website hostingの画面](#バケットにstatic-website-hostingを設定する)で表示された「エンドポイント」のURLリンクをクリックします。テスト用のindex.htmlが表示されたら設定は完了です。
🎉


## S3 + Route53で独自ドメインのホスティング

[公式チュートリアル](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html)

S3単体では、S3が任意に生成したサブドメインでしかサイトにアクセスできません。そこでAWS内のDNSサーバー、Route53を利用します。Route53はドメインとAWS内の各種サービスを結びつける役割をします。S3とRoute53を併用することで独自ドメインでのホスティングを可能にします。

各種設定は[Route 53コンソール](https://console.aws.amazon.com/route53/)から行えます。

### ドメインを確保する

まずはドメインを正式に確保します。事前準備の段階で確保している場合は不要です。

[Route 53経由でドメインを購入](http://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html)する場合はこの公式ドキュメントをご参照ください。

### wwwサブドメインのリダイレクト用バケットを作る

`www.あなたのドメイン.com`にアクセスが来た場合`あなたのドメイン.com`にリダイレクトする機能を持ったバケットを製作します。

[バケットを作成する](#バケットを作成する)で解説した方法で`www.あなたのドメイン.com`という名前のバケットを作成します。

![](https://www.evernote.com/l/AAlqQEegx5FEeKdVJ8WJUu75wWTm5TLmPcIB/image.png)

`www.あなたのドメイン.com`バケットのStatic website hostingを設定するときに、上記のようにリクエストのリダイレクト設定を行います。

### Route 53にHosted Zoneを追加

ホストゾーンとは[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/AboutHZWorkingWith.html)によると

>パブリックホストゾーンは、あるドメイン、たとえば example.com とそのサブドメイン (apex.example.com や acme.example.com) のトラフィックをインターネットまたは特定のドメインでルーティングする方法についての情報を保持するコンテナです。

です。

簡単にいうとドメイン1個に限定されたルーターです。

操作は[Route 53コンソール](https://console.aws.amazon.com/route53/)から行えます。

[Route 53経由でドメインを購入](http://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html)した場合、Hosted Zoneは自動で作成されます。

外部でドメインを購入した場合は新規にHosted Zoneを追加します。

![](https://www.evernote.com/l/AAlP-xa6gT1HDZ4KJuzTrjRv057LPPNf3csB/image.png)

### Route53とS3バケットを結びつける

先ほど作成したHosted Zone内で、Create Record Setを行います。

![](https://www.evernote.com/l/AAlBgzI0YVdEqpkBE_w2qy7X8jY0m6VDu9UB/image.png)

作成したHosted Zoneに`あなたのドメイン.com`のS3バケットを指すAレコードを追加します。Alias Targetsにフォーカスを当てるとリストを表示してくれるので、リスト内からS3バケットを指定します。
また同様の手順を繰り返して`www.あなたのドメイン.com`のS3バケットを指すAレコードも追加します。

### 外部ドメインレジストラーにRoute53のDNSサーバーのアドレスを教える

この手順は、Route 53でドメインを購入した場合は不要です。外部のドメインレジストラーを利用した場合だけ設定が必要になります。

#### DNSサーバーのアドレスを確認する

![](https://www.evernote.com/l/AAmlclpJZClI_59PY59S_sA-rAC0suveV4sB/image.png)

[Route 53コンソール](https://console.aws.amazon.com/route53/)のType NSの部分に書いてあるのがDNSサーバーのアドレスです。

#### 外部ドメインレジストラーに教える

今回はお名前.comを例にします。

![](https://www.evernote.com/l/AAm3P3Dn54JJCpcukyU_48BwFTO9l51vhgwB/image.png)

取得したドメインを選択、`他のネームサーバーを使用する`に、Route 53コンソールで取得したアドレスを入力します。

これでS3内のファイルが、`あなたのドメイン.com`からブラウズできるようになります。

🎉🎉

## S3 + Certificate Manager + CloudFront + Route53でHTTP/2に対応した静的ウェブサイトのホスティング

[CloudFront](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)は、世界全体に散らばるキャッシュサーバーです。リクエストに対する応答速度を上昇させ、またS3からの転送料金を抑えることができます。
CloudFrontは、httpsで通信できます。この機能を利用して独自ドメインサイトをHTTP/2対応にします。

### Certificate Managerで証明書を発行

[Certificate Managerコンソール](https://console.aws.amazon.com/acm/home)から証明書を発行します。

❗これから利用するCloudFront用の証明書は、必ず米国東部（バージニア北部）リージョンで作成する必要があります。その他のリージョンで作成した証明書は利用できません。

[サポートされているリージョン](https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-regions.html)

>Amazon CloudFront で ACM 証明書を使用するには、米国東部（バージニア北部） リージョンで証明書をリクエストまたはインポートする必要があります。

![](https://www.evernote.com/l/AAkfxwT68OVKG5jAkwfMz5KIYe6EgvttsEYB/image.png)

[Certificate Managerコンソール](https://console.aws.amazon.com/acm/home)に移動したら、まずリージョンを変更してください。

証明書のリクエストを行います。

![](https://www.evernote.com/l/AAm3Yj50Vm9PN7_syIOM3pv9ll1MR7X6q_AB/image.png)

証明書のドメイン名を指定します。

ドメイン名は`あなたのドメイン.com`と`*.あなたのドメイン.com`です。アスタリスクをつけるとワイルドカード指定になりますので、すべてのサブドメインが証明書の対象になります。

![](https://www.evernote.com/l/AAky9vhfTYJOdaTprEUVxVos59nj36Vj6mIB/image.png)

次にあなたがドメインの正式な所有者であることを証明する必要があります。検証方法を「DNSの検証」にします。

![](https://www.evernote.com/l/AAmC0eQzbC9JJ4XIHcuNXPIFFE34gFD-IVcB/image.png)

検証進行中の画面が表示されますので、Route53でのレコードの作成ボタンをクリックします。今回はRoute53がDNSサーバーなので、これで検証が終わります。

![](https://www.evernote.com/l/AAlTpAiH4uFCCZ0-QN_CF6chnkGbVMEQCVYB/image.png)

### CloudFrontのDistributionの製作と設定

S3をオリジンとしたCloudFrontの配信設定を行います。

[公式ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/DownloadDistS3AndCustomOrigins.html#concept_S3Origin)

これらの設定は[CloudFrontコンソール](https://console.aws.amazon.com/cloudfront/)から行うことができます。

新規Distributionを作成します。

![](https://www.evernote.com/l/AAns3NIpIRtGdIuGM4BzL6EA5fjg5pLC65cB/image.png)

Web用Distributionを作成します。

![](https://www.evernote.com/l/AAkEbi1hPr1CtpISLX954UMX0ddqSQ73IDYB/image.png)

新規Distributionの設定手順を解説します。

![](https://www.evernote.com/l/AAloHNbC9sNPUa2eVv84fB735Ofoqzkg2kgB/image.png)

まずはOrigin Domain NamesからS3のバケットを選択します。
❌入力欄にフォーカスを当てると自動でリストを表示してくれますが、**この中から選択してはいけません。**
Original Domain Nameは[「バケットにStatic website hostingを設定する」](#%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%81%ABstatic-website-hosting%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)で表示されたS3バケットのStatic Website Hostingsエンドポイントを指定します。

参考記事 :

+ [CloudFront + S3 Website: “The specified key does not exist” when an implicit index document should be displayed](https://stackoverflow.com/a/34065543)
+ [Route53+S3+CloudFrontでhttpsのurlをリダイレクトさせる](https://qiita.com/kazuhei/items/9d72b6bbd4d82abe9e9e)


![](https://www.evernote.com/l/AAnlev83J65M_IR8EUzL54wrjyKTAjkGkkoB/image.png)
Distribution Settingから上の図の設定を変更します。
これで[「Certificate Managerで証明書を発行」](#certificate-managerで証明書を発行)の手順で作成した証明書を参照してSSL通信ができるようになります。

[CloudFrontコンソール](https://console.aws.amazon.com/cloudfront/)に戻ると、新規Distributionのdeploy状態がin progressになっています。この状態はS3からCloudFrontへファイルのコピーが行われている状態です。まだ利用できません。数分経つと勝手に完了します。

同様の手順で`www.あなたのドメイン.com`用のDistributionも作成します。SSL Certificateはサブドメインも指定しているので、`あなたのドメイン.com`用のものがそのまま使用できます。

### Route53とDistributionを結びつける

[Route 53とS3バケットを結びつける](#route-53とs3バケットを結びつける)と同じ手順で、新規に作成したCloudFrontのDistributionをRoute53のAlias Targetにします。
また、`www.あなたのドメイン.com`用のAレコードも、同様に`www.あなたのドメイン.com`用DistributionをAlias Targetにします。

これでCloudFrontを経由したHTTP/2でのホスティングが可能になります。

🎉🎉🎉

HTTP/2での通信が行われているかの確認方法は、こちらの記事で解説されています。

[CloudFrontでHTTP2対応する方法とChromeでの確認方法](https://qiita.com/narikei/items/aed1a76be44d8713266c)

-----

以上で設定は完了です。

🏆