AWS S3で簡単ウェブサイト作成！

AWSのS3といえばストレージサービスですが、実はウェブサイトをホストすることもできます。
EC2インスタンス等のVMを用意したり、webサーバをインストールしたり、そういった設定は一切不要なので、非常に簡単です。
さっそくやってみましょう！

# 1. S3 バスケットを作成する
まずは、S3 バスケットを作成しましょう。バスケットとはフォルダのようなものです。
サービス検索窓からS3と入力し、S3をクリックします。

![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/48301362-836d-3917-ca43-c1b06d56f3b2.png)

「バケットを作成」をクリックします。

![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/0ea3d259-ed6a-f5fe-0f02-270de0a3c8e0.png)

バスケット名を入力します。この名前は基本的にグローバルで一意である必要があります(厳密なルールは[公式ドキュメント](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html)を参照してください)。つまり他の人が既に使っていたらエラーメッセージが出るので、別の名前にしましょう。今回は`myultimatewebsite`としました。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/82e6d7a9-dac8-0ca3-966c-250dffd8fe69.png)


それ以外は現状デフォルトで問題ないです。下にスクロールして、「バケットを作成」をクリックしましょう。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/efd5dcea-edb6-0b10-69c8-6bbb1ca562cc.png)

とりあえずバケットが作成できました。

# 2. 静的ウェブサイトホスティングの設定をする

1で作成したバケットに設定していきます。バケット名をクリックしましょう。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/6d5ec799-fcfe-5182-d1b2-999afc54f9f5.png)


プロバティをクリックします。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/b0e58fa4-f894-3594-31c5-bf06ec5dbbc5.png)

下にスクロールして、「静的ウェブサイトホスティング」の「編集」をクリックします。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/52e0c853-10e3-9ba1-90f9-92b0c013ff53.png)

ここでウェブサイトのホームページにあたるファイルを設定します。通常は`index.html`で良いでしょう。
今回はこのファイルだけのサイトにしますので、他は入力せず「変更の保存」をクリックします。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/77880b33-e54c-1d93-2b15-f802c2bcde82.png)

# 3. アクセス許可の設定をする

**注意！！**
**ここからバケットの公開設定をします。もしバケット内に他の貴重なファイルを格納してる場合は、この設定により公開されてしまうので、そのようなファイルがないか確認してください。この記事のやり方の通りにやっている場合は、テストのファイルしか格納しないので問題ありません。**

「アクセス許可」をクリックします。ブロックパブリックアクセス（バケット設定）の「編集」をクリックしましょう。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/5191776d-1347-b5a5-4f57-e825a1e5e9dd.png)

「パブリックアクセスをすべてブロック」のチェックを外し、「変更の保存」をクリックします。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/5c7fd74d-28b8-d2d1-6126-1ed859722b2f.png)

先ほど説明しましたが、この公開処理は注意が必要です。内容を確認して、フィールドに「確認」と入力し、「確認」をクリックします。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/038eee5d-442c-b021-69d8-3c9940390b29.png)

これで終わりではありません。バケットポリシーの設定も必要です。「編集」をクリックしましょう。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/eb135317-4929-7163-8581-99005567f59d.png)

以下のポリシーをコピーし、フィールドに貼り付けてください。
AWSのドキュメントに書かれていたものです。

```yaml
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::myultimatewebsite/*"
            ]
        }
    ]
}
```

バケット名を記入している部分に注意してください。今回は`myultimatewebsite`としています。もし違う名前でバケットを作成した場合は、その名前を入力してください。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/761794e3-76bc-5e5d-0646-c88a7dce967c.png)

「変更の保存」をクリックしましょう。これで公開設定ができました。

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/0b4d0bd2-4e80-50e8-e879-8126a5210e35.png)

# 4. テスト用のHTMLファイルを作成する

今回作成するウェブサイトのホームページを作成します。
HTMLファイルであればなんでも良いです。
すぐに試したい場合は、AWSドキュメントにあった以下のサンプルファイルを使ってみてください。

```html
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>
```

ファイル名は先ほど設定した`index.html`としてください。

# 5. S3にHTMLファイルをアップロードする

先ほどのファイルをアップロードしましょう。
「オブジェクト」をクリックし、「アップロード」をクリックします。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/80cf2523-d95c-0145-b3a2-de9e5769abe1.png)

「ファイルを追加」を選択し、`index.html`をアップロードしてください。
先ほど注意書きにも書きましたが、このバスケットはインターネットに公開されていますので、貴重なファイル等をアップロードしないように注意してください。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/377c03d2-0f42-17d7-91e6-f72d7be1d73a.png)

`index.html`が追加されたことを確認し、「アップロード」をクリックします。

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/e05f3295-902d-12f4-7895-ac50d6fd3bd1.png)

# 6. ウェブサイトにアクセスする！

もうウェブサイトは完成しています！さっそくアクセスしてみましょう！
「プロパティ」を選択してください。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/cdb69607-5306-75c9-5b59-33461f168a0a.png)

下にスクロールして、ウェブサイトのurlをクリックしましょう！！

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/7f32e937-c8af-c6e7-bd57-e6d32ab7239a.png)

無事に接続できました！！

![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/58b3f3f4-ba9f-ff9d-024b-b8f412c2777b.png)

# 7. お掃除(ファイルの削除等)

ここ大事です。テストや勉強のためだけであれば、作った環境はその都度お掃除したほうが良いです。
セキュリティ事故や無駄な料金発生を防げますし、色々試しやすくなります。

まずはバケットを空にします。今回作ったバケットを選択し、「空にする」をクリックします。

![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/80d9d102-ffe9-4e92-09e6-0ce11ffa638f.png)

注意事項を読んで、「完全に削除」と入力し、「空にする」をクリックします。

![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/185bca81-8b52-f39f-f0f1-5e73e0e449d3.png)

次にバケットを削除します。同様にバケットを選択し、「削除」をクリックします。

![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/03efc1a6-fbdf-fb5e-37ce-d2d72d21577e.png)

バケット名(今回は`myultimatewebsite`)を入力して、「バケットを削除」をクリックします。

![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/25e1a5b0-7c3e-73e6-d783-72732f5af7cd.png)

これでお掃除完了です！

![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884434/fc1c7b56-cb7d-fab8-123e-dcedc55b79c9.png)

# 参考(公式ドキュメント)
- [Amazon S3 を使用して静的ウェブサイトをホスティングする](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html)
- [チュートリアル: Amazon S3 での静的ウェブサイトの設定](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html)