AWS S3でウェブサイトを公開

SSKR

2023年3月21日 05:45

AWS S3を使って独自ドメインのウェブサイトを公開する
HTTPでのアクセスを試した後で
CloudFrontを導入したHTTPSでのアクセスにも対応してみる

大まかな流れ

ドメイン名を購入する
S3バケットを作成する
index.htmlをアップロードする
バケットポリシーを設定する
途中の動作確認
ホストゾーンを作成する
DNSレコードを追加する
HTTPで動作確認
CloudFrontを導入する
S3のバケットポリシーを修正する
ホストゾーンを編集する
HTTPSで動作確認

ドメイン名を購入する

Route53でドメイン名を購入する
.linkだと年間5ドルぐらいで購入できるので一つ購入しておくとAWSの勉強もはかどると思う

S3バケットを作成する

まずはAWS マネジメントコンソールにログインしS3ダッシュボードへ

[バケットを作成] を選択

バケット名：morningset.link
AWSリージョン：東京

バケット名はグローバルでユニークな名前ならばなんでもいいのだが
ドメインを指定してウェブサイトとして公開する場合は
バケット名＝URI
にする必要がある
今回はmorningset.linkの名前で公開する前提なので、バケット名もmorningset.linkとしなければいけない

ACL 無効

[パブリックアクセスをすべてブロック]のチェックを解除
このバケットの内容がすべて公開されるのを承認にチェック

バケットのバージョニング、デフォルトの暗号化、詳細設定
はデフォルトのままで

[バケットを作成]

成功するとバケットが追加されるので、追加されたバケットを選択する

[プロパティ]タブを選択

下の方にスクロールさせると
静的ウェブサイトホスティングがあるので[編集]を選択する

静的ウェブサイトホスティング：有効にする
ホスティングタイプ：静的ウェブサイトをホストする
インデックスドキュメント：index.html

[変更の保存]

index.htmlをアップロードする

適当に用意したindex.htmlを、作成したバケットにアップロードする
ちなみにこのサンプルはBootstrapのサンプルをもらってきたものだ

バケット情報の[オブジェクト]タブを選択し [アップロード]

ファイルをドラッグ＆ドロップする

アップロードしたいファイルにチェックを入れて [アップロード]

バケットポリシーを設定する

ポリシーを設定しないと外部からのアクセスははじかれるらしい
バケット情報から [アクセス許可] タブを選択し、バケットポリシーの [編集]

内容は以下の通りJSON形式のポリシーを設定する必要がある
目を通せば「外部からのすべてのGetを許可するよ」という記述らしいことは理解できるが、これを自力で書けと言われると難しい

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

バケット名の部分は今回の場合だとmorningset-staticwebsiteだ

ポリシーのところに張り付けてバケット名を書き換えたら
[変更の保存]

途中の動作確認

これでS3にアップロードしたindex.htmlを公開することができたので、
動作確認
バケット情報から[プロパティ]タブを選択し、
下の方にあるエンドポイントのリンクを押す

S3バケットでウェブページが公開されれいる

ホストゾーンを作成する

Route53でドメインを取得すると対応するホストゾーンも自動的に作られているので新たに作る必要はないが、他のドメインポータルサイトでドメインを取得した場合などではホストゾーンを作成しておく必要がある

DNSレコードを追加する

使いたいドメインに対応したホストゾーンに対してレコードを追加する

AWSコンソールからRoute53ダッシュボードに飛び
ドメインに対応したホストゾーンを選択
[レコードを作成] する

①レコード名：空白
②レコードタイプ：A
③エイリアス：ON
トラフィックのルーティング先
　④：S3ウェイブサイトエンドポイント
　⑤：東京
　⑥：s3-website-ap-northeast-1.amazonaws.com
⑦ルーティングポリシー：シンプルルーティング
⑧ターゲットのヘルス評価：いいえ