Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

AWS上に簡単なServerless環境を作ってみよう。②

S3のバケット作成

1. サービス画面からS3をクリックする。

2. バケット作成をクリックし、以下のように情報を入れ、作成をクリックする。
※ほかの情報はディフォルトのまま
バケット名:自分の名前-serverlesswebsite
リージョン:アジアパシフィック(東京)

3. index.htmlの中身の"YOUR-API-GATEWAY-LINK-HERE"を先ほど作成したAPIGatewayのURLに変更する。

index.html
<html>
<script>

function myFunction() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("my-demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "APIGateway URL ", true);
    xhttp.send();

}

</script>
<body><div align="center"><br><br><br><br>
<h1>Hello <span id="my-demo">Stylez AWS member!</span></h1>
<button onclick="myFunction()">Click me</button><br>
<img src="S3バケットURL"></div>
</body>
</html>

4. S3バケット画面から自分が作成したS3バケットにチェックを入れ、「パブリックアクセス設定を編集する」をクリックし、以下のように進める。
①「選択されたバケットのパブリックアクセス設定」は何も選択せずに保存をクリックする。
②「確認」と入力する。

5. 作成したバケットをクリックし、「アップロード」→「index.html、error.html」のファイルを追加する。

error.html
<html><body><h1>There has been an error!</h1></body></html>

S3ファイルアップロード②.PNG

6.「index.html、error.html」をそれぞれクリックし、「アクション」→「公開する」を選択する。
S3ファイルアップロード③.PNG

7.「プロパティ」→「Static website hosting」をクリックし、以下の情報を入力、保存する。
インデックスドキュメント :index.html
エラードキュメント:error.html

S3プロパティ変更.PNG

8.「Static website hosting」の保存できていることを確認した上で、S3エンドポイントをクリックする。
S3プロパティエンドポイントクリック.PNG

9.表示された画面からClick meを押してみる。
click me.PNG

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?