AWS Lambda S3 動的ウェブサイト設定方法（その2）

2025年12月9日 2025年12月9日 admin

前提条件

S3のウェブサイトの開放設定していることが前提となります。

こちらの内容をご参考にしてください。

前提条件S3を利用した静的ウェブサイト公開設定方法になります。S3 静的ウェブサイト公開設定方法1. 「S3」をクリックする。2. 「汎用パケット」をクリックし「パケットを作成」をクリックする。3. 「パケット名」をお好きなアルファベットで入力してください。「パケットを作成」をクリックする。4. パケット作成が完了したら「汎用パケット」をクリックし対象パケットの「名前」をクリックする。5. 「アクセス許可」をクリックしブロックパブリックアクセス（パケット設定）の「編集」をクリックする。6. 「パブリックアクセスをすべ...

D1J株式会社

https://www.d1j.com/archives/5572

Lambda S3 静的ウェブサイト設定方法（その2）

1. 「S3」をクリックする。

2. 「汎用パケット」をクリックし対処の「名前」をクリックする。

※すでにS3パケット作成、ウェブサイトとして設定済みであるとする。

3. 「オブジェクト」をクリックし「アップロード」をクリックする。

4. PCでメモ帳などでindex.htmlを作成いたします。

HTML（ソースコード）説明

HTML（ソースコード）	説明
<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <body> <h2>名前を入力してください</h2> <input id="name" /> <button onclick="callApi()">送信</button> <p id="result"></p> <script> async function callApi() { const name = document.getElementById("name").value; const url = "Lambdaの関数URL" + `?name=${encodeURIComponent(name)}`; const res = await fetch(url); const data = await res.json(); document.getElementById("result").textContent = data.message; } </script> </body> </html>	HTML（ソースコード）を貼りつけてください。「Lambdaの関数URL」に変更してください。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<body>

<h2>名前を入力してください</h2>
<input id="name" />
<button onclick="callApi()">送信</button>

<p id="result"></p>

<script>
async function callApi() {
  const name = document.getElementById("name").value;
  const url = "Lambdaの関数URL" + `?name=${encodeURIComponent(name)}`;
  const res = await fetch(url);
  const data = await res.json();

  document.getElementById("result").textContent = data.message;
}
</script>

</body>
</html>

HTML（ソースコード）を貼りつけてください。
「Lambdaの関数URL」に変更してください。

5. PCからドラッグアンドドロップでアップロードいたします。

「アップロード」をクリックする。