Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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