AWS S3を利用してHTMLを公開する | AWSサーバレス構築静的ウェブホスティング

ロードマップ

概要

S3にindex.htmlをアップロード。アップロード時に割り当てられるURLにブラウザでアクセスすれば表示される。jsデータもアップしてhtmlに読み込ませればjsも動く。

設定事項

ブロックパブリックアクセス
静的ウェブサイトホスティング
バケットポリシー

ブロックパブリックアクセス

Webページとして公開するのでアクセスを許可する設定に変更する。
デフォルトで「ブロックする」と設定されているので、ブロックしない設定に変更する。

f:id:dendouji:20210319174824p:plain

静的ウェブサイトホスティング

有効にするとURLが発行される。インデックスドキュメントは「index.html」と入力。このあとでindex.htmlを作成してS3にアップロードする。バケットウェブサイトエンドポイントURLにアクセスするとindex.htmlが表示される。

f:id:dendouji:20210319174841p:plain

f:id:dendouji:20210319174833p:plain

バケットポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

Effect:Allow ・・・指定のアクションを許可
Principal:* ・・・リソースへのアクセスが許可されるアカウントまたはユーザーを指定。「*」は誰でも
Action:s3:GetObject ・・・「S3」への「GetObject」の操作
Resource:s3:arn:aws:s3:::バケット名/* ・・・対象バケット

ポリシーとは？

AWSのサービスに権限を設定するための仕組み。ポリシーの記述によってどのサービスのどのアクションを許可するか、細かく指定ができます。

HTMLデータをアップロード

単に「Hello S3 WebHosting!」と表示されるページです。index.htmlをS3にアップロードし、URLにアクセスしてページが表示されればOK。

<!doctype html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>

<body>
<p>Hello S3 WebHosting!</p>

</body>
</html>

参考記事

・ウェブサイトのホスティングの有効化
・ウェブサイトアクセスのアクセス許可の設定
・IAM アクセス権をユーザーに付与