Amplifyが動的に動かせると思っていた
Amplifyでは以下のようにpythonファイルを指定しても呼べなかった。
- 修正前
<script>
var callAPI = (input)=>{
var myHeaders = new Headers();
console.log(input)
myHeaders.append("Content-Type", "text/html");
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: input,
redirect: 'follow'
};
fetch("test.py", requestOptions)
.then(response => response.text())
.then(result => console.log('success', result))
.catch(error => console.log('error', error));
}
</script>
</head>
<body>
<form>
<label>文字を入力してください</label>
<input type="text" id="input">
<button type="button" onclick="callAPI(document.getElementById('input').value)">入力</button>
</form>
</body>
htmlから呼び出したいpythonファイルをLambdaにほぼコピペしたら実行したいpythonプログラムを実行できた。
動的にするにはただデプロイするだけでは足りないよう。
- 修正後
<body>
<form>
<label for="inhput" class="cl1">文字を入力してください</label>
<input type="text" id="input">
<button type="button" onclick="callAPI(document.getElementById('input').value)">入力</button>
</form>
<script>
var callAPI = (input)=>{
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({"input":input});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("ここにAPI GatewayのURLを書く", requestOptions)
.then(response => response.text())
.then(result => alert(JSON.parse(result).body))
.catch(error => console.log('error', error));
}
</script>
</body>