S3에서 정적 웹 사이트 호스팅을 사용해보십시오

소개

이 기사는 서버리스 공부용으로 시도한 것 정리한 것입니다.
이번에는 S3의 웹 사이트 호스팅 기능을 이용하여 API Gateway의 제휴를 확인해 보았습니다.

S3이란?

Amazon Simple Storage Service의 약자입니다.

AWS를 대표하는 스토리지 서비스입니다.

저렴하고 내구성(99.99999999999%)이 높다.

버킷이라는 저장 위치를 만들고 파일을 업로드합니다.

데이터 레이크로서 S3에 데이터를 사용하기도 한다.

공식 문서
htps : // 아 ws. 아마존. 이 m/jp/S3/

정적 콘텐츠 만들기

다음과 같은 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를 호출하도록 설정한다.

HTTP 메소드에 대해서 (참고)

방법
내용

POST
리소스 요청, 서버에 정보 등록, 기타

GET
리소스 요청

PUT
리소스 등록, 업데이트

DELETE
리소스 삭제

HEAD
리소스 헤더

Lambda 설정

다음 코드를 작성하고 배치하십시오.

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