【AWS S3】はじめてのランディングページ①（静的サイトの公開）

・AWS S3 にHTMLページを配置する方法
・配置したHTMLページをインターネットに公開する方法

はじめに

ランディングページを作ろうと思いましたがせっかくならAWS混ぜ込みたいと思いS3に静的サイト（ランディングページ）を配置しようと考えました。
最終的にはこのサイトのドメインにマッピングする予定です。

まずは最初なのでテスト用のHTMLページをS3に配置して公開する方法の紹介となります。

AWSアカウントの作成は省略しています。

S3にてバケットを作成

S3に静的サイトを配置するには何はともあれS3に移動する必要があります。
下記URLからS3の管理画面に移動します。

https://console.aws.amazon.com/s3/

移動後「バケットを作成」ボタンを押しバケットを作成します。
S3はこのバケット単位でアクセス制御を行います。

バケットを作成画面に移動後はバケット名を入力します。
このバケット名がURLの一部になるためAWSリージョン単位で一意の値となります。
利用済の場合はエラーが表示されます。

バケット名を入力後はバケットに対するアクセス制御を行います。
今回はインターネットに公開するため、「このバケットのブロックパブリックアクセス設定」のチェックボックスは全て、未チェックとします。
未チェック時に表示される警告はチェックします。
この設定はバケット作成後でも変更可能です。

あとはデフォルト設定で問題無いため、「バケットを作成」ボタンを押してバケットを作成します。

バケット作成後の設定

静的ウェブサイトホスティングを有効にする

作成したバケットに移動して、「プロパティ」タブを選択します。

プロパティに移動後、一番下にある「静的ウェブサイトホスティング」の「編集」ボタンを押します。

編集画面に移動して「有効にする」にします。

インデックスページ・エラーページ設定

上記で静的ウェブサイトホスティングを有効にすると追加設定が表示されます。
その中にある「インデックスドキュメント」と「エラードキュメント – オプション」にHTMLページを設定します。

インデックスドキュメントは「index.html」を。
エラードキュメントは「error/error.html」とします。（エラードキュメントは無くても問題ありません）

あとはデフォルト設定で問題無いため、「変更の保存」ボタンを押します。

これによってブラウザからバケットを開いたときのデフォルトページが「index.html」ファイルが表示されます。
バケットに無いページをURLに指定した場合（404とか）は「error」フォルダにある「error.html」ファイルが表示されます。

バケットポリシーの設定

続いてはバケットポリシーの設定です。
これを設定しないと後述するHTMLファイルがアクセス出来ないため設定が必要です。

先程の「プロパティ」タブの隣にある「アクセス許可」タブに移動します。
移動したあとにある「バケットポリシー」の「編集」ボタンを選択します。

バケットポリシー編集画面にて下記のようなポリシーを入力します。

{
  "Id": "Policy1630221948368",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1630221945944",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::test-osusublog/*",
      "Principal": "*"
    }
  ]
}

11行目のResources部分は編集画面にある「バケットARN」の値を設定します。

バケットポリシーの内容については省略しますが、対象バケット配下にあるオブジェクト（アップロードするファイルやフォルダ）の取得（読み取り）を許可する内容となります。

ポリシー入力後は「変更の保存」を選択します。
ポリシーの内容が誤っている場合はエラーが表示されますので再度確認ください。

HTMLファイルのアップロード

上記で設定が完了したためHTMLファイルをアップロードします。
今回はインデックスページとエラーページをアップロードします。

インデックスページは上記の設定で「index.html」と指定しているためそれに合わせた下記をアップロードします。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>TOPページ</title>
  </head>
  <body>
    <h1>インデックスページです</h1>
  </body>
</html>

エラーページの内容は下記となります。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Errorページ</title>
  </head>
  <body>
    <h1>エラーページです</h1>
  </body>
</html>

アップロードの方法はバケットにある「アップロード」ボタンを押します。
アップロード画面に移動後、上記ファイルをドラッグ・アンド・ドロップ後、「アップロード」ボタンを押してアップロードします。