【AWS】S3上にHTMLファイルをアップロードして、静的なWebサイトを表示する

はじめに

AWSのS3にHTMLを配置して、Hello Worldを表示するまでの手順メモです。AWSの知識がゼロで、「S3って何?」「バケットって何?」というような初心者の方に参考になればよいなと思います。

AWSに動的なサイトを公開するまでの手順は、以下の記事を参照してください。
AWS EC2上にPHPのWebサイトを公開して、「Hello World」を表示するまでの全手順

AWSとは

AWSとは、Amazon Web Serviceの略で、Amazonが提供する世界最大のクラウドサービスのことです。
クラウドサービスとは、ネットワーク上にあるさまざまなサービスを必要に応じて利用するシステム形態のことです。

S3とは

「Amazon S3」(Amazon Simple Storage Service)とはクラウド上でストレージを提供するサービスの名称です。Amazon S3は、クラウド上でファイルを共有できるAWSの中のひとつのサービスで、Webサイトのコンテンツ配信やバックアップなどに使用できます。S3は静的なページのみ対応しており、PHPなど動的なページには対応していません。

S3は初期費用や固定費がかからないので費用を安く抑えることができます。

AWS基本用語

  • バケットとは、データの入れ物のことです。
  • オブジェクトとは、バケットに保存するファイルのことです。

バケットを作成する

AWSアカウントがない場合はアカウントを作成します。AWSにログインして、検索ボックスに「S3」で検索して、S3にアクセスします。

↓「バケットを作成」をクリックし、バケット名を入力、リージョンは「アジアパシフィック(東京)」を選択、オブジェクト所有者は「ACL無効(推奨)」を選択します。

↓今回はS3に配置したHTMLを不特定多数に公開するため「パブリックアクセスをすべてブロック」のチェックをすべて外します。

↓過去のバージョンを保存するとS3の費用が増えるため、「バケットのバージョニング」を「無効にする」を選択します。不特定多数に公開するHTMLファイルのため、「デフォルトの暗号化」は「無効にする」を選択します。「バケットを作成」をクリックして、バケットを作ります。

↓ バケットを作成できました。

HTMLファイルを作成する

メモ帳を開いて、以下を入力します。ファイル名を「index.html」として、文字コードを「UTF-8」で保存します。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
html1.PNG

作成したHTMLファイルをS3に保存する

↓さきほど作成したバケットが記載されている赤枠部のリンクをクリックします。

↓「アップロード」をクリックして、先ほど作成したHTMLファイルをアップロードし、「アップロード」をクリックします。

↓アップロードに成功しました。

↓「オブジェクトURL」をクリックして、試しにアップロードしたHTMLファイルにアクセスしてみると、”This XML file does not appear to have any style information associated with it. The document tree is shown below.”と表示され、AccessDeniedとなり、表示できません。

バケットポリシーが空白状態のため、アクセス制限がかかってしまっています。S3で静的ウェブサイトを公開するためには、バケットのパブリックアクセスブロック設定を OFF にした後で、バケットへのパブリック読み取りアクセスを許可する必要があります。

参考サイト:AWS バケットの内容の公開を許可するバケットポリシーを追加する

↓「アクセス許可」のタブをクリックして、バケットポリシーの「編集」をクリックします。

↓バケットポリシーを以下のように編集して、バケットのコンテンツへのフルアクセスを許可し、「変更の保存」をクリックします。

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

↓さきほどのオブジェクト URLにアクセスすると、無事Hello Worldが表示されました!

今の状態だとHTTP表示されていて、HTTPS化されていません。HTTPS化するには以下を参照してください。

コメント

タイトルとURLをコピーしました