AWS: Amplify の使い方 (その2)

こちらのプログラムを改造しました。
[AWS: Amplify の使い方](https://qiita.com/ekzemplaro/items/83eb098bd116340f96df)

次のような表示をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f17b1561-d63d-597e-b583-a184d7becbfc.png)

フォルダー構造

```text
$ tree dist
dist
├── fetch.js
├── index.html
└── tochigi.json
```

```html: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>
```

```js: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)
}

// -----------------------------------------------------------------------
```

```json: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 の前にテストをする方法 ##

```bash
~/.yarn/bin/serve -s dist
```

```text
$ ~/.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   │
   │                                                  │
   └──────────────────────────────────────────────────┘
```