Amazon S3 で静的ページを公開する


https://qiita.com/advent-calendar/2022/miraito-inc

2日目は S3 を使って静的ページを公開する記事を書きます。

1日目に CSS の記事を [hoge](https://zenn.dev/suzuki_hoge/articles/2022-12-chrome-flexbox-5846a346663a67) さんが書いてくれたので、 HTML、 CSS　は書けたけど、外部に公開するにはどうすればいいの？って人向けに AWS の S3 を使って簡単に静的ページを公開する手順を記事にしました。

## この記事の目的

- S3 を使って自作した静的ページを公開できるようになる

(AWS の UI はたまに変わるのでご注意ください。)



## 静的ページと動的ページ

- 静的ページ
    - リクエストに対して、 HTML ファイルなどをそのまま返す
    - クライアント側で実行されるスクリプト(JavaScript など)を含めることもできる
- 動的ページ
    - リクエストに対して、サーバ側で処理をした結果を返す
    - サーバー側スクリプト (PHP、 Ruby、 Java など) の実行環境が必要


## S3 とは

- 容量無制限のストレージサービス
    - データのバックアップやログの保管場所など様々な用途に利用される
- 静的ページのホスティング機能がある

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/Welcome.html


## 手順

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html


https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step1-create-bucket-config-as-website

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

S3 コンソールに移動し、バケットを作成をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/e155d393-4e38-469e-1134-ad99bc2941b2.png)


![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f35363761363737332d653634662d363831382d623433352d3332363563393637623833652e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/12d3cdb5-7a74-2865-6094-0b14bb8a6dd0.png)


バケット名を入力し、リージョンを指定する

- バケット名は一意なものにする必要がある
- Route 53 で取得したドメイン名で公開したい場合は、ドメイン名と同じ名前で作成する（今回ドメインの取得は範囲外）

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f35643933313662352d373835612d646561372d626465312d6362383864656266393739642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f2c16a67-9e3c-b826-dda3-a0f13897a129.png)



`パブリックアクセスを全てブロック` のチェックを外す

今回は静的ウェブサイトホスティングを行いたいため、パブリックアクセスを許可する必要がある

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f61393561326239662d386232352d396233632d356166392d3639636132633031393038652e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/e787586a-d4c4-ad49-41d8-80ef1ea61d60.png)



`バケットの作成` をクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32623131376561642d393930642d653638332d626566322d3363373938323233333866642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/67a56d63-2de7-adcb-e28b-ef8c1f9d795d.png)



## Web サイトホスティングを有効化

S3 コンソールから作成したバケットをクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f64303136343339332d383837332d333339652d353436612d3633383365643234356166332e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/2f3dd788-402e-ea4c-d3ca-6171375e700f.png)


`プロパティ` の `静的ウェブサイトホスティング` を編集

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32356633336461612d646263622d663933662d336435302d3037343931636431316266382e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/b9317e76-e31c-60ac-93e1-cf07299c2586.png)


![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f38613261333739612d386535392d313039622d373438332d3162383334626539616433642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/bb9ac7e6-0c2a-1c96-b7a5-05534ca542d4.png)



静的ウェブサイトホスティングを有効にして、インデックスドキュメントを `index.html` に設定し、`変更の保存`をクリック


インデックスドキュメントはユーザーがウェブサイトのルートにアクセスした際に返されるページ
例えば、インデックスドキュメントを指定した`www.example.com` というドメインのサイトがあった場合、
`http://www.example.com`にアクセスした場合は `index.html` が返される

これを設定していない場合、`index.html` を見るには `http://www.example.com/index.html` にアクセスする必要がある

静的ホスティングの場合は、サイトのトップページを設定するのが一般的

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f39386139353963642d386238632d353139352d366133612d6335313262633639343563342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/d66ece9a-0fee-5d35-a192-bf0ad4a5c202.png)



### アクセス権限を編集

同じく作成したバケットをクリックし、`アクセス許可` のタブを選択する

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32666430383031332d343465302d313566662d663037372d3039313739336164643466362e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/64f5810c-0efa-9ebe-c000-372e59ba86aa.png)


バケットポリシーの編集をクリックし、次の json を貼り付けて、`変更の保存` をクリック
（ json は公式の[チュートリアル](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html#step4-add-bucket-policy-make-content-public)から取得した）

- `Bucket-Name` は自分が作成したバケット名に書き換える必要がある
- 今回の場合は、`myawsbucket-1667481997`になる
- json の先頭にスペースなどが入っているとエラーになるので注意
- Policy has invalid resource というエラーが表示された場合は、バケットポリシー内のバケット名がバケット名と一致していることを確認


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

バケットにある全てのファイルの取得を全ユーザーに許可しているような内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/28ee7d66-5988-cd8b-47b5-658921d9aecb.png)


問題なければバケットが公開されていることがわかる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/c9cc19e2-02f3-1823-7bc9-5dd24fa27442.png)


### ファイルのアップロード![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f61646332633432302d356235312d353166352d643534312d3034353437393833363564612e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/c5100ba6-79be-f2fd-52e3-4de5af05b3a1.png)


`オブジェクト` タグに戻り、`アップロード` を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/c22185a7-b318-672e-ff03-bffa757613aa.png)


適当な index.html をローカルで作成して、アップロード

```html
<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>静的 Web サイトホスティング</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <div>
      Hello!!
    </div>
  </div>
</body>
</html>
```

`アップロード` をクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f61646332633432302d356235312d353166352d643534312d3034353437393833363564612e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/1d0bf025-3efd-0a50-457d-566be6a52193.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/8a92ba29-e927-7b35-0b17-80026cfd470b.png)

`プロパティ` へ移動し、`静的ウェブサイトホスティング` から `バケットウェブサイトエンドポイント` を取得し

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/a2ee133b-952e-4abd-8968-9d1654c19752.png)

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f37383764623161332d363535362d323134362d313562332d3033626135666362653635342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f7ee3b57-24e3-275d-064c-2078924978eb.png)


エンドポイントへブラウザからアクセスすると index.html が取得できていることがわかる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/1515d6bd-cd65-67bd-e79d-eec5405ea23d.png)


### ディレクトリの作成

ディレクトリを作成して、 index.html から読み込むことも可能

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/using-folders.html

`フォルダの作成` から `css` フォルダを作成して、`style.css` をアップロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/e51ddf4c-22be-5bb8-6a24-f9f5b4ddda1d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/5da07601-b47f-7e1c-7100-270f9e5aa7fe.png)


```css:style.css
div {
  color: red;
}
```

ページをリロード or 再度アクセスすると css が適応されていることがわかる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/57edca16-bea0-6451-9168-816eb43acbbe.png)


同じように画像を読み込むことも可能。


## 終わり

次回の記事は @Nyokki さんが MySQL 関連の記事を上げてくれるそうです!!
（[去年](https://qiita.com/advent-calendar/2021/miraito-inc)も同じ流れだった気がする。）