0
0

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.

S3をWebサーバーにしてコンテンツを公開する①(S3パブリック編)

Last updated at Posted at 2021-03-08

S3をWebサーバーにして静的コンテンツを公開する方法を紹介します。

  1. S3パブリック編 ←コレ!
  2. S3署名付きURL編
  3. CloudFrontパブリック編
  4. CloudFront署名付きURL編 
  5. CloudFront署名付きCookie編

手順

バケットの作成

まずはバケットを作成しましょう。

マネジメントコンソールでS3のページを開きます。
バケットを作成をクリックします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad).png

バケットの名前を入れて、リージョンを選択します。
バケット名は世界中のS3で一意である必要があります。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (1).png

一般公開するので、パブリックアクセスを許可する必要があるため、「パブリックアクセスをすべてブロック」のチェックを外し、「現在の設定により、・・・」にチェックを入れます。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (2).png

これでバケット作成は完了です。

HTMLの格納

作成したバケットを選択します。
そして、HTMLファイルをドラッグアンドドロップします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (3).png

設定が色々ありますが、画面最下部のアップロードを実行します。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (4).png

複数ファイルやフォルダーまるごとアップロードすることも可能です。

公開する

公開する方法は2種類あります。

  • ウェブサイトエンドポイントとして公開
  • REST API エンドポイント

ウェブサイトエンドポイントと REST API エンドポイントの主な違い
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html#WebsiteRestEndpointDiff

公開する(ウェブサイトエンドポイント)

バケットの設定画面の「プロパティ」タブを選択します。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (5).png

プロパティタブの一番下の「静的ウェブサイトホスティング」の「編集する」をクリックします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (6).png

静的ウェブサイトホスティングを有効にし、インデックスドキュメントを指定します。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (7).png

続いて、バケットの設定画面の「アクセス許可」タブを選択し、バケットポリシーに以下のJSONを指定します。(何故かコピペが使えず、一つ一つ手入力しました。。)

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

s3.console.aws.amazon.com_s3_buckets_website-2721ae93_region=ap-northeast-3&tab=objects(iPad).png

これで設定完了です。

アクセスURLは以下となります。
http://[バケット名].s3-website.[リージョン名].amazonaws.com/

公開する(REST API エンドポイント)

こちらは方法が2つあって、

  • バケットポリシーで設定
  • アクセスコントロールリスト(ACL)で設定

バケットポリシーで設定する方法は、先程のウェブサイトエンドポイントの手順で説明した、アクセス許可の設定だけすればOKです。

アクセスコントロールリスト(ACL)する方法は、公開したいオブジェクトを選択して、「アクション」の「公開する」を選択します。

s3.console.aws.amazon.com_s3_buckets_website-2721ae93_region=ap-northeast-3&tab=objects(iPad) (1).png

アクセスURLは以下となります。
https://[バケット名].s3.[リージョン名].amazonaws.com/index.html

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?