1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【AWS】S3で静的WEBサイトホスティングを使ってWEBページを公開する

Posted at

#はじめに
S3とはSimple Storage Serviceの略で、その名の通りファイルをアップロードして保存することができるストレージサービスです。
しかしS3は単なるストレージサービスではなく、HTMLファイルをアップロードして簡単なWEBページを作成することができます。

#簡単な用語の説明
・バケット……オブジェクトを格納するためのコンテナのこと。いわゆる頂点となるフォルダ。
・オブジェクト……S3バケットに格納されるデータのこと。ファイルなど。

#用意するもの
次のHTMLファイル

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
  This is Test Page!
 </body>
</html>

#手順
S3のコンソールを開きます。バケットを作成をクリックします。
S3_1.png
バケット名はグローバルに一意である必要があります。つまり他のどんなS3バケットと名前が被ってはいけません。
リージョンはアジアパシフィック(東京)を選択します。
今回は外部に向けてWEBページを公開したいので「パブリックアクセスのブロック」はオフにします。
他の設定はデフォルトのままでバケットを作成します。
S3_2.png
バケットが作成されたのでバケットを開きます。
オブジェクトをアップロードします。
S3_3.png
ファイルを追加で用意したindex.htmlをアップロードします。
S3_4.png
アップロードが成功しました。
S3_5.png
バケットのプロパティを開きます。
S3_6.png
下へスクロールして静的ウェブサイトホスティングを編集します。
S3_7.png
静的ウェブサイトホスティングを有効にします。
インデックスドキュメントは「index.html」とします。
変更の保存をクリックします
S3_8.png
これだけではまだブラウザから目的のページにアクセスできません。
試しにオブジェクトのURLからアクセスしてみます。
S3_9.png
このようなエラーが返されます。これはS3バケットの権限が足りていないため生じるエラーです。
S3_10.png
バケットのアクセス許可を開きます。
S3_11.png
下へスクロールし、バケットポリシーを編集します。
S3_12.png
画像のようにポリシーを記述します。
S3_13.png
このJSONテキストは公式ドキュメントから参照可能です。
xxxxxxxxの部分がバケット名です。

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

各項目を簡単に見て行きましょう。
Versionは「ポリシーを処理するために使用される言語構文ルール」を指定します。2012-10-17が現行バージョンです。
Statementはポリシーの主要な要素です。
SidはステートメントIDの略で、ポリシーの任意の識別子です。
Effectはステートメントの結果を許可するか拒否するかを指定します。許可する場合はAllow、拒否する場合はDenyです。
Principalは「リソースへのアクセスを許可または拒否するユーザー、アカウント、サービス」などを指定します。*はワイルドカードで、誰でもアクセスできることを意味します。
Actionは対象(リソース)に対して許可または拒否したいアクションを指定します。GetObjectはS3からオブジェクトを取得できるアクションです。その他アクションはこちら(英語版公式ドキュメント)
ResourceはバケットやオブジェクトなどのARN(Amazon Resource Name)を指定します。バケットのARNの後ろに/*と追記してあげることでバケットに格納されているオブジェクトすべてを指定しているわけです。

さて、WEBページを公開する準備は整いました。
オブジェクトURLからページを開いてみましょう。
S3_14.png
無事に表示されました。

#参考


この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?