S3で静的Webサイトホスティングを試してみる

# はじめに
この記事はサーバレスの勉強用として試したことまとめたものです。
今回はS3のWebサイトホスティング機能を利用してAPI Gatewayの連携を確認してみました。

# S3とは
* Amazon Simple Storage Serviceの略称である。
* AWSを代表するストレージサービスである。
* 安価で耐久性（99.99999999999%）が高い。
* バケットという格納先を作成しファイルをアップロードする。
* データレイクとしてS3にデータをためることもある。
* 公式ドキュメント<br>
https://aws.amazon.com/jp/S3/

# 静的コンテンツの作成
* 以下のようなHTMLファイルを作成する。

```html
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>s3 website hosting</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#button").click(function(){	
            var pokemon_name = $("#name").val();
            var params = {
		        "name": pokemon_name
		    };
        $.ajax({
	        url: 'https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev',
	        type: 'POST',
	        data: JSON.stringify(params),
	        dataType: "json",
		    success: function(json) {			 
			    var stringData = JSON.stringify(json);
                var parseData = JSON.parse(stringData);
                $('#type').text(parseData.type);
		    },
		    error: function() {
		       alert("error");
		    },
	  	});	
    });
});
</script>
</head>
	<body>
        <center>
    	    <div>
                <h3>ポケモン名を入力</h3>
                <label id="label">名前：</label>
                <input type="text" id="name" size="10" />
                <button id="button">確認</button>        
                <h3>確認結果を出力</h3>
	    	    <p>タイプ：<span id="type"></span></p>
            </div>
        </center>
	</body>
</html>
```

# API Gatewayの設定
* 以下のようにPOSTメソッドを作成しLambdaを呼び出すよう設定する。
<img width="525" alt="API_Gateway_POSTメソッド.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/7595d8d5-2790-80da-8b1b-ed0ef2ec52d3.png">
* HTTPメソッドについて（参考）

|メソッド|内容|
|---|---|
|POST|リソースのリクエスト、サーバへ情報を登録、その他|
|GET|リソースのリクエスト|
|PUT|リソースの登録、更新|
|DELETE|リソースの削除|
|HEAD|リソースヘッダー|

# Lambdaの設定
* 以下コードを作成してデプロイする。

```python
import json

def lambda_handler(event, context):
    pokemon_name = event["name"];
    if pokemon_name == 'ピカチュウ':
        type = {"type": "電気"}
    elif pokemon_name == 'イーブイ':
        type = {"type": "ノーマル"}
    else:
        type = {"type": "不明"}

    return type
```

# S3バケットの設定
* S3バケット作成して「Static website hosting」を有効にする。
<img width="539" alt="S3_statitc_website_hosting_有効.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/362024b0-12c5-4a19-7c96-ebd974fbdd8f.png">

# index.htmlファイルの配置
* S3へindex.htmlをアップロードしてアクセス権限、ストレージ暗号化設定などを行う。<br>
（ひとまず、全許可しています。）
<img width="640" alt="S3パブリックアクセス許可.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/4c688c60-77fe-0bd7-388f-84730af05767.png">

# エンドポイントへアクセス
* 「Static website hosting」で設定した際に出力されるS3エンドポイントにアクセスする。
<img width="551" alt="S3_website_アクセス.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/0abfe9fd-021e-004a-82db-48547b1ad330.png">

# 動作確認
* ピカチュウで確認ボタンを押下すると、ちゃんと電気と返してくれる。
<img width="549" alt="S3_website_ピカチュウ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/df2e3d10-1a0b-7a8d-6cbe-06be8a6a6d39.png">

* ホゲで確認ボタンを押下すると、不明と返してくれる。
<img width="549" alt="S3_website_ホゲ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466400/70d84bb4-55e3-3208-2ac4-bca4bef78af0.png">

# まとめ
* 今回はS3へのパブリックアクセスを許可してしまったのでバケットポリシー等を設定しておきたい。
* 次はCloudFrontとS3を連携して動作を確認してみたい。

# 参考
* https://www.tantan-biyori.info/blog/2019/01/amazon-api-gatewayapi.html