こちらのプログラムを改造しました。
AWS: Amplify の使い方
次のような表示をします。
フォルダー構造
$ tree dist
dist
├── fetch.js
├── index.html
└── tochigi.json
dist/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
<script src="fetch.js"></script>
<title>AWS Amplify CLI Demo</title>
</head>
<body>
<p>AWS Amplify CLI Hosting S3+CloudFront Demo</p>
<p>おはよう</p>
<p>こんにちは</p>
<p>今晩は</p>
<div class="contents">contents</div>
<blockquote>
<p>Jul/17/2022 PM 20:17</p>
</blockquote>
</body>
</html>
dist/fetch.js
// -----------------------------------------------------------------------
function to_table_proc(str_in)
{
const data_aa = JSON.parse(str_in)
var str_out = ""
str_out += "<table>"
for (var key in data_aa)
{
str_out += "<tr>"
str_out += "<td>" + data_aa[key].name + "</td>"
str_out += "<td>" + data_aa[key].population + "</td>"
str_out += "<td>" + data_aa[key].date_mod + "</td>"
str_out += "</tr>"
}
str_out += "</table>"
return str_out
}
// -----------------------------------------------------------------------
function read_fetch_proc(url)
{
fetch(url).then((response) => {
if(!response.ok) {
console.log('Read error!')
throw new Error('error')
}
console.log('Read ok!')
return response.text()
}).then((data) => {
console.log(data)
const str_out = to_table_proc(data)
document.querySelector(".contents").innerHTML = str_out
}).catch((error) => {
console.log(error)
})
}
// -----------------------------------------------------------------------
window.onload = ()=>{
const url="./tochigi.json"
read_fetch_proc(url)
}
// -----------------------------------------------------------------------
dist/tochigi.json
{
"t0921": {
"name": "宇都宮",
"population": "42761",
"date_mod": "1957-2-20"
},
"t0922": {
"name": "小山",
"population": "17895",
"date_mod": "1957-8-15"
},
"t0923": {
"name": "佐野",
"population": "71564",
"date_mod": "1957-12-14"
},
"t0924": {
"name": "足利",
"population": "93672",
"date_mod": "1957-5-9"
},
"t0925": {
"name": "日光",
"population": "72351",
"date_mod": "1957-6-4"
},
"t0926": {
"name": "下野",
"population": "35187",
"date_mod": "1957-3-21"
},
"t0927": {
"name": "さくら",
"population": "31246",
"date_mod": "1957-10-23"
},
"t0928": {
"name": "矢板",
"population": "65792",
"date_mod": "1957-8-26"
},
"t0929": {
"name": "真岡",
"population": "74139",
"date_mod": "1957-2-15"
},
"t0930": {
"name": "栃木",
"population": "29831",
"date_mod": "1957-8-7"
},
"t0931": {
"name": "大田原",
"population": "54927",
"date_mod": "1957-5-12"
},
"t0932": {
"name": "鹿沼",
"population": "36842",
"date_mod": "1957-4-24"
},
"t0933": {
"name": "那須塩原",
"population": "93875",
"date_mod": "1957-2-9"
},
"t0934": {
"name": "那須烏山",
"population": "38254",
"date_mod": "1957-3-21"
}
}
amplify publish の前にテストをする方法
~/.yarn/bin/serve -s dist
$ ~/.yarn/bin/serve -s dist
ERROR: Cannot copy server address to clipboard: Couldn't find the `xsel` binary and fallback didn't work. On Debian/Ubuntu you can install xsel with: sudo apt install xsel.
┌──────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - On Your Network: http://172.33.23.30:3000 │
│ │
└──────────────────────────────────────────────────┘