Veu.jsをS3へ配置してブラウザからアクセスできるようにする

バケットの作成

①左上の「サービス」をクリック

②「ストレージ」をクリック

③「S3」をクリック

④「バケットを作成」をクリック

⑤以下を入力して一番下にある「バケットを作成」をクリック
バケット名 ： 任意　例) veu-todo
AWS リージョン ： アジアパシフィック(東京)

Veu.jsの各ファイルをアップロード

①作成したバケットをクリックする

②「アップロード」をクリック

③「ファイルを追加」や「フォルダを追加」をクリックして以下を追加する
・ファイル「index.html」
・フォルダ「css」
・フォルダ「script」

④「アップロード」タブをクリック

⑤「閉じる」タブをクリック

⑥「プロパティ」タブをクリック

⑦1番下にある「静的ウェブサイトホスティング」の「編集」をクリック

⑧「有効にする」にチェックを入れる

⑨「インデックスドキュメント」に「index.html」を入力する

⑩「変更の保存」をクリック

バケットポリシーの設定

①「アクセス許可」タブをクリック

②「ブロックパブリックアクセス (バケット設定)」の「編集」をクリック

③「パブリックアクセスをすべて ブロック」のチェックを外す

④以下の2つのみチェックを付ける
・新しいアクセスコントロールリスト (ACL) を介して～
・任意のアクセスコントロールリスト (ACL) を介して～

⑤「確認」を入力して「確認」をクリック

⑦「バケットポリシー」の「編集」をクリック

⑧エディタ欄に以下のJSONを入力する
※「Bucket-Name」は「作成したバケット名」にする。

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

上記のJSONは公式サイトからコピペした。

⑨「変更の保存」をクリック

ブラウザでアクセス

「プロパティ」タブの1番下にある「静的ウェブサイトホスティング」の「バケットウェブサイトエンドポイント」のリンクをクリック