LoginSignup
0
0
@ti_and6id

静的ウェブサイトホスティングでホスティングしてみる

Posted at

概要

本記事は AWSでWebアプリを構築してみる シリーズの1回目の記事です。

本記事で作成する構成

本記事では静的ウェブサイトホスティングでアプリケーションコンテンツをホスティングします。
AWS.drawio.png

静的ウェブサイトホスティングでホスティングしてみる

1. S3でバケットを作成する

  1. マネジメントコンソールからS3を開き、「バケットを作成」をクリック

    image.png

  2. 「AWSリージョン」で任意のリージョンを選択し、「バケット名」に任意のバケット名を入力する

    image.png

  3. 「オブジェクトの所有者」は「ACL無効（推奨）」を選択する

    image.png

  4. 「このバケットのブロックパブリックアクセス設定」はすべての選択を解除し、オブジェクトを公開するように設定する

    image.png

  5. バケットを作成する

    image.png

2. プロパティを更新する

  1. 作成したバケットのプロパティタブを開き、「静的ウェブサイトホスティング（最下部にある）」の「編集」をクリック

    image.png

  2. 「静的ウェブサイトホスティング」を有効にして、「ホスティングタイプ」で「静的ウェブサイトをホストする」を選択して、「インデックスドキュメント」を入力する（index.html）

    image.png

3. アクセス許可を更新する

  1. 作成したバケットのアクセス許可タブを開き、「バケットポリシー」の「編集」をクリック

    image.png

  2. バケットポリシーを編集する

    image.png

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

4. コンテンツを配置する

  1. ローカルPC上で以下のような内容のインデックスドキュメント（index.html）を作成する

    <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>

  2. 作成したバケットのオブジェクトタブを開き、さきほど作成したインデックスドキュメントを（ルート直下に）アップロードする

5. 静的ウェブサイトにアクセスする

  1. 作成したバケットのプロパティタブを開き、「静的ウェブサイトホスティング（最下部にある）」に記載されているバケットウェブサイトエンドポイントのリンクへアクセスし、無事ホスティングできていることを確認する

    image.png
    image.png

0
0
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
Sign upLogin
0
0