AWSのS3上に静的なWebサイトを公開して、「Hello World」を表示するまでの全手順

# はじめに
AWSを使ってWebサイトを公開するまでの手順のメモです。AWSの知識がゼロで、「S3って何？」「バケットって何？」というようなレベルから、公開にこぎつけました。
AWSに動的なサイトを公開するまでの手順は、以下の記事を参照してください。
[AWS EC2上にPHPのWebサイトを公開して、「Hello World」を表示するまでの全手順](https://qiita.com/harufuji/items/4fcd8f991fab5ad3354a)

# AWSはクラウドサービスである
AWSとは、Amazon Web Serviceの略で、Amazonが提供する世界最大のクラウドサービスのことです。
クラウドサービスとは、ネットワーク上にあるさまざまなサービスを必要に応じて利用するシステム形態のことです。

# S3はクラウド上でストレージを提供するサービスである
今回はAWSでもっとも手軽にWebサイトを構築できる「Amazon S3」を利用しました。
Amazon S3（Amazon Simple Storage Service）は、クラウド上でファイルを共有できるAWSの中のひとつのサービスです。Webサイトのコンテンツ配信やバックアップなどに使用できます。
S3は静的なページのみ対応しており、PHPなど動的なページには対応していません。

# AWS基本用語
- **バケット**とは、データの入れ物のことです。
- **オブジェクト**とは、バケットに保存するファイルのことです。

# 全体の流れ
1. AWSのアカウントを取得する。
2. HTMLファイルを作る。
3. バケットを作成して、HTMLファイルをAWS上に保存して、公開する。
4. 独自ドメインを設定する。
5. http\://www\.hogehoge.com にアクセスしたら、http\://hogehoge.com にリダイレクトさせる。

# 1. AWSのアカウントを取得する
アカウント登録にはメールアドレスとクレジットカード、本人確認のための電話番号が必要です。AWSのサイトにアクセスします。
https://aws.amazon.com/jp/
AWSのアカウントは、Amazonで買い物するときのアカウントと異なります。Amazonの買い物アカウントを持っていても、ここでアカウントを新規作成します。
![AWS1.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/060bd4f8-8b30-f6fd-72d5-216592ebd457.png)

アドレス項目は必須です。日本語に対応していないので、英語で住所を入力します。
![AWS2.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/fcb84698-d2d5-28ba-0e40-c538799dce6c.png)

クレジットカード情報を入力します。
![AWS3.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/e921c6ce-7438-2491-e9cd-8b85d86a73e1.png)

電話番号を入力します。
![AWS4.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/2bba9e42-fef0-b467-7d2d-3c8e003e7c98.png)

電話がかかってくるので、電話で認証番号を入力します。
![AWS5.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/7f836333-8b10-08fe-4402-56c1e62a38ca.png)

![AWS6.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/48be74eb-5520-78fc-28fc-ead606e58682.png)

無償は「ベーシックプラン」です。ベーシックプランを選びます。
![AWS7.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/495fc8d0-b761-f5ee-fc1d-b2a73dca6302.png)

# 2. HTMLファイルを作る
メモ帳を開いて、以下を入力します。ファイル名を「index.html」として、文字コードを「UTF-8」で保存します。

```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
```

![html1.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/f4d6323c-9ec4-d58f-c49e-13b573a34479.png)

# 3. バケットを作成して、HTMLファイルをAWS上に保存する
AWSにログインし、「すべてのサービス」から、「S3」を選択します。
![AWS9.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/689800c5-1fd7-4c23-b7f4-f880104fa356.png)

「バケットを作成する」をクリックし、バケット名を入力します。リージョンは「アジアパシフィック（東京）」を選択し、「次へ」をクリックします。
![AWS_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/81fa82b0-218e-4e36-8c23-e356e1cb0185.png)

「プロパティの設定」画面では、何もせず、「次へ」をクリックします。
![AWS_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/eea3d4fa-6461-7a4d-6e3c-8c1a510889f2.png)

「アクセス許可の設定」画面では、「パブリックアクセスを管理する」の項目を「このバケットにパブリック読み取りアクセス権限を付与する」を選びます。
![AWS_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/bb55de72-5161-70dc-1c0d-f6f7b2f1d050.png)

「確認」画面では、「バケットを作成」をクリックします。
![AWS_4.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/a69467db-a7b1-4992-650d-56d0686cd7fe.png)

S3のコンソール画面に戻るとバケットが作成されています。バケット名をクリックします。
![AWS_5.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/7385a0c8-894a-3ed2-96ea-9006d05f231c.png)

「ファイルの選択」画面で、「ファイルを追加」をクリックし、さきほど作った「index.html」を選びます。
![AWS_6.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/af03d32e-dfcd-7050-3fac-198c7c282974.png)

アップロードしたあとに、「次へ」をクリックします。
![AWS_7.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/5706b533-8219-be12-3cec-eeff26fe033f.png)

「アクセス許可を設定する」画面では、「パブリックアクセス許可を管理する」の項目で「このオブジェクトにパブリック読み取りアクセス権限を付与する」を選びます。
![AWS_8.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/aed3606c-8fd6-02fe-ee5f-14e967e10db6.png)

「プロパティを設定する」画面では、何も変更せずに、「次へ」をクリックします。
![AWS_9.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/633e0c67-69cb-6a99-0979-76ec179da027.png)

「確認画面」では、「アップロード」をクリックします。
![AWS10.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/7f62b8e0-8b59-0f2c-8566-976f6095b6b2.png)


ファイルがアップロードされました。さきほどアップロードした「index.html」をクリックします。
![AWS_11.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/30008e5d-e7be-6838-fc98-4ce60ce672f8.png)

「リンク」にある「https://s3-ap～」で始まるURLをクリックします。
![AWS_12.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/19a91fde-1494-d746-a9f1-6fb7c3ec15a3.png)

![AWS_13.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/00416a92-0d32-2946-a3c6-b180bb75c2f7.png)

「Hello World」が表示されました。


# 5. 独自ドメインを設定する

「Amazon Route 53」にアクセスします。
「Amazon Route 53」とは、AwSのクラウドドメインネームシステム（DNS）の名称です。
クラウドドメインネームシステム（DNS）とは、インターネット上におけるドメイン名などを管理・運用するシステムのことです。
https://console.aws.amazon.com/route53
「DNS Management」の「Get Started now」をクリックします。
![AWS26.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/f1ca99f1-b5fa-225d-dcc2-528b0453c161.png)

もう一度、「Create Hosted Zone」をクリックします。
「Domain Name」に取得済みのドメイン「hogehoge.com」を入力します。今回は、メインをwwwなしの「hogehoge.com」にして、「www.hogehoge.com」にアクセスされた場合、「hogehoge.com」にリダイレクトするように設定します。
「Public Hosted Zone」を選択し、「Create」をクリックします。
![AWS28.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/8e87f58a-2a29-da45-46cd-f516811eceed.png)

「NS」の「Value」をメモしておきます。
![AWS_19.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/34d40aa3-44e5-ccbc-704c-a59a9f4557d7.png)

次にオリジナルドメインを購入したサイトに移動し、ネームサーバー設定画面を開きます。ムームードメインの場合、「ネームサーバ設定変更」という名称です。
![muumuu_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/b9c21387-65e8-25a2-8f56-004b0323c5ad.png)

ネームサーバー1～4に先ほどメモした「ns-」で始まるValueに記載されているドメイン名を入力します。最後のドットは入力してはいけません。入力後、「ネームサーバ設定変更」をクリックします。
![muumuu_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/1974ec9e-ccd6-fba9-54d1-952bf961ca6e.png)

AWSに戻り、「プロパティ」の「Static website hosting」をクリックします。「エンドポイント」に記載されているURLをコピーします。
![AWS_20.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/06418312-82f4-65b2-e46c-9bdcd9f94519.png)

「Amazon Route 53」に移動します。「Name」に「www」、「Type」は「CNAME - Canonical name」を選択し、「Value」に先ほどコピーしたURLを貼り付けます。「Create」をクリックします。
![AWS_21.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/80f1e05e-5972-2376-1b48-05a9d7476f5f.png)

以下のように、wwwで始まるCNAMEが追加されます。移行には1日程度かかります。翌日、独自ドメインにアクセスすると、「Hello World」が表示されます。
![AWS_22.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/840f5cbc-7053-fa31-2ddf-0dcf2f2e137c.png)

# 5.  http\://www\.hogehoge.com にアクセスしたら、http\://hogehoge.com にリダイレクトさせる

AWSで、wwwで始まるドメイン名でバケットを新規作成します。「アクセス」は今まで同様に「パブリック」に設定します。
![AWS_23.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/c382f0a8-399e-73f7-90f4-dc3987ef0fbf.png)

wwwで始まるドメイン名の「プロパティ」を開き、「Static website hosting」で「リクエストをリダイレクトにする」を選択します。「ターゲットドメインまたはドメイン」の項目に、wwwなしのドメインを入力し、「保存」をクリックします。この処理はすぐに反映されます。www.hogehoge.comにアクセスすると、hogehoge.comにリダイレクトされます。

![AWS_24.PNG](https://qiita-image-store.s3.amazonaws.com/0/262601/18b79da1-4909-95d5-f69f-d27d60fd9dad.png)