AWS S3を使用してHTMLを公開する

# 概要
本書ではS3のバケットにHTMLをアップロードし、バケットに配置したHTMLをインターネット上に公開できるように設定します。

## 0. 事前準備
* AWSのアカウントを作成していること。
* VSCodeなどのHTMLファイルを作成するエディターをインストールしていること。
<br>※本書ではWindows10を使用します。

## 1. HTMLファイルの作成
S3でHTMLを公開するためには「index.html」「error.html」のファイルが最低限必要です。VSCodeなどのエディターで「index.html」「error.html」を作成します。本書では下記のHTMLファイルを作成しました。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>S3テスト</title>
        <style>
            body{
                background-color: #FFD5EC;
            }
            div {
                background-color: #FFEEFF;
                border-radius: 20px;
                border: 3px solid #FF88FF;
                width: 400px;
                text-align: center;
                margin: auto;
            }
            h1 {
                color:#AA0000;
                font-style: italic;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>S3 Test!!</h1>
            <h2>静的htmlをS3で表示します</h2>
        </div>
    </body>
</html>
```

```html:error.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
        <style>
            body{
                background-color: #BBFFFF;
            }
            div {
                background-color: #EEFFFF;
                border-radius: 20px;
                border: 3px solid #55FFFF;
                width: 400px;
                text-align: center;
                margin: auto;
            }
            h1 {
                color:#000077;
                font-style: italic;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Error!!</h1>
            <h2>WEBページを表示できません!</h2>
        </div>
    </body>
</html>
```

## 2. S3バケットの作成

1. AWSにログインし「サービス」→「S3」をクリックする。
![001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/1ca85e0f-8fdd-4a91-9521-5439f0acbe07.jpeg)

2. 「バケットを作成する」をクリックする。
![002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/acac69f0-9961-1eeb-8fc3-1a4a52c9cc44.jpeg)

3. 「名前とリージョン」画面にて下記の内容を入力し、「次へ」をクリックする。
 * バケット名 : (任意の名称を入力)
 * リージョン : アジアパシフィック(東京)
![003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/2607059c-a61d-880a-fe82-7f9007d81da4.jpeg)

4. 「プロパティ」画面にて設定する内容がなければ「次へ」をクリックする。
![004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/37793e1e-2f3e-a4e6-2ede-6108534964a5.jpeg)


5. 「ブロックパブリックアクセス(バケット設定)」画面にて「パブリックアクセスをすべてブロック」のチェックを外し「次へ」をクリックする。
![018.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/fc9b8ad9-1e88-ef86-75c7-f86b5d2b0014.jpeg)

6. 確認画面が表示されるので「バケットを作成」をクリックする。
![019.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/3cab9b0a-6c7f-314b-5d7f-4818df657ed6.jpeg)


7. バケットが作成されたことを確認する。
![020.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/8df264ab-8636-ea69-bd9b-9a993c3b19b1.jpeg)

## 3. HTMLファイルの配置

1. 作成したバケットをクリックする。
![020.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/1958cff8-e91e-f8b5-c946-ff700e1ad9ba.jpeg)

2. 「アップロード」をクリックする。
![008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/b3f09e77-3bdd-e3c7-5080-660409eb451b.jpeg)


3. 作成したHTMLファイルを追加する。
![009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/91327420-1ca8-2e33-1a7d-fcf70b412104.jpeg)

4. 「index.html」「error.html」ファイルが選択されていることを確認し「次へ」をクリックする。
![026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/034499be-9069-916a-bbdf-c7fd11058dd8.jpeg)

5. アクセス許可設定画面にて下記の内容を選択し「次へ」をクリックする。
 * パブリックアクセス許可を管理する : このオブジェクトにパブリック読み取りアクセス権限を付与する
![035.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/56cc7b98-b3fa-b02a-3f86-4694432d72fd.jpeg)

6. 「ストレージクラス」画面にて「スタンダード」を選択し、「次へ」をクリックする。
![028.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/b2f464b5-9a98-9ec9-91ee-90063385b43d.jpeg)

7. 確認画面が表示されるので「アップロード」をクリックする。
![029.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/28cc7997-0419-1cf0-47c8-864cfaf34260.jpeg)

8. 「index.html」「error.html」がアップロードされたことを確認する。
![036 - コピー.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/f3db899b-c8d5-6dd3-93a4-d9e02ac31c4b.jpeg)

## 4. Static website hostingの有効化

1. 上部メニューから「プロパティ」をクリックする。
![024.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/fc2e5f5e-8439-716b-728c-2e184bc82d8b.jpeg)

2. 「Static website hosting」をクリックする。
![022.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/a8d4330c-34fb-e6fc-069d-509db1776b71.jpeg)

3. 「このバケットを使用してウェブサイトをホストする」を選択し、下記の内容を入力する。その後「保存」をクリックする。
 * インデックスドキュメント : index.html
 * エラードキュメント : error.html　　　　　　　　　　　　　　　　
![032 - コピー.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/22568da0-9b9e-e0d1-a9f7-9620ddf2d942.jpeg)

4. 「パケットホスティング」にチェックマークが付いたことを確認する。

![033.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/cc66f596-3c30-ab6b-8e9c-c1ec63879312.jpeg)

## 5. HTMLの公開設定

1. 3章でアップロードしたHTMLファイルを選択し「アクション」をクリックする。
![036.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/1bf097c0-4a7b-f4e9-f65b-b896720f88d5.jpeg)

2. 「公開」をクリックする。
![037.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/ceab0aab-8e46-08d4-735f-d0599ad5bd09.jpeg)

3. 確認画面が表示されるので「公開する」をクリックする。
![038.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/5be8cfb4-b34f-f7bd-6f7c-86bac9144b27.jpeg)

## 6. HTMLの確認

1. 4章の「Static website hosting」画面を表示し、「エンドポイント」に記載されているリンクを任意のブラウザに貼り付ける。
![032.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/e7019385-c8da-ee04-d99f-8cd9010342aa.jpeg)

2. アップロードしたindex.htmlが表示されたことを確認する。
![041.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/54ac31a7-a01c-997b-1af5-d626c5c98755.jpeg)

3. S3バケットに存在しないリンク先を入力し、error.htmlが表示されたことを確認する。
![042.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307261/706ef047-b79a-7436-ee92-7c4a15290842.jpeg)

## 最後に
S3の「Static website hosting」機能を使用することでS3バケットにアップロードしたHTMLファイルをインターネット上に公開することができます。これによって簡単なホームページやポートフォリオの公開ができます。