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

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 アクセス権をユーザーに付与

AWSサーバーレス構築 チュートリアル簡易版

AWSチュートリアル簡易版

AWSサーバーレス構築について、AWS公式のチュートリアルページがありますが、スタートアップとして大いに参考になりました。

AWSサーバレス構築 チュートリアル

このチュートリアルをよりシンプルな形に整理してみました。

チュートリアルの内容から、複雑なJS処理、サインイン機能を削って、単純にWebページからAPIを呼び出して、応答をブラウザのコンソールログに表示するという、Hello World的な内容に縮小しています。

21/03/29 追記
公式のチュートリアルのページ、ソースコードの在り処が更新されているようです。
・公式のチュートリアル最新版？（英語）
・公式のチュートリアル最新版 サンプルコード GitHub
ディレクトリは「aws-serverless-webapp-workshop/resources/code/WildRydesVue/public/js/」

最終的にできること

  • Webページからサーバー上のプログラムを呼び出すことができるようになる

  • サーバー上のプログラムには、単に文字列を返す処理を用意しておく

  • javascriptでサーバー上のプログラムを呼び出すと、ブラウザのコンソール上にサーバーから受信した文字列が表示される

ロードマップ