10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-10-06

はじめに

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

S3とは

  • Amazon Simple Storage Serviceの略称である。
  • AWSを代表するストレージサービスである。
  • 安価で耐久性(99.99999999999%)が高い。
  • バケットという格納先を作成しファイルをアップロードする。
  • データレイクとしてS3にデータをためることもある。
  • 公式ドキュメント

    https://aws.amazon.com/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を呼び出すよう設定する。
API_Gateway_POSTメソッド.png * 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

S3バケットの設定

  • S3バケット作成して「Static website hosting」を有効にする。
S3_statitc_website_hosting_有効.png

index.htmlファイルの配置

  • S3へindex.htmlをアップロードしてアクセス権限、ストレージ暗号化設定などを行う。

    (ひとまず、全許可しています。)
S3パブリックアクセス許可.png

エンドポイントへアクセス

  • 「Static website hosting」で設定した際に出力されるS3エンドポイントにアクセスする。
S3_website_アクセス.png

動作確認

  • ピカチュウで確認ボタンを押下すると、ちゃんと電気と返してくれる。
S3_website_ピカチュウ.png
  • ホゲで確認ボタンを押下すると、不明と返してくれる。
S3_website_ホゲ.png

まとめ

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

参考

10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?