YMLib - other - Cloud FormationでS3静的ホスティング

ClouCloud FormationでS3静的ホスティング

2025/08/09

Cloud Formationを使ってS3バケットを作り静的ホスティングを試してみます。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

AWSTemplateFormatVersion: "2010-09-09"
Description: Create an S3 bucket

Resources:
  MyS3Bucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: my-bucket-ymlib-20250809
      PublicAccessBlockConfiguration:
        BlockPublicAcls: false
        BlockPublicPolicy: false
        IgnorePublicAcls: false
        RestrictPublicBuckets: false
      WebsiteConfiguration:
        IndexDocument: index.html
  MyS3BucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref MyS3Bucket
      PolicyDocument:
        Statement:
          - Sid: PublicReadGetObject
            Effect: Allow
            Principal: "*"
            Action:
              - s3:GetObject
            Resource: !Sub "${MyS3Bucket.Arn}/*"

Visual Studio Code (VSCode)でyamlファイルを開いたところ!Refと!Subにエラーが出ました。

VSCodeのextentionsでredhat.vscode-yamlを確認したところ既にインストール済でした。

歯車マークをクリックしSettingsをクリックします。

Yaml: Custom Tags欄のEdit in settings.jsonをクリックします。

何も設定されていませんでした。

以下のタグを追記します。

settings.json

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

{
    "yaml.customTags": [
        "!Ref",
        "!Sub scalar",
        "!Sub sequence",
        "!Join sequence",
        "!FindInMap sequence",
        "!GetAtt scalar",
        "!GetAtt sequence",
        "!Base64 mapping",
        "!GetAZs",
        "!Select scalar",
        "!Select sequence",
        "!Split sequence",
        "!ImportValue",
        "!Condition",
        "!Equals sequence",
        "!And",
        "!If",
        "!Not",
        "!Or"
    ]
}

VSCodeで出ていたエラーが消えました。

aws cloudformationコマンドは以下の通りです。

aws cloudformation create-stack ^
--stack-name my-static-site-stack ^
--template-body file://static-site.yaml

コマンドプロンプトで実行してみます。

>aws cloudformation create-stack ^
More?   --stack-name my-static-site-stack ^
More?   --template-body file://static-site.yaml
{
    "StackId": "arn:aws:cloudformation:ap-northeast-1:888111666777:st

ack/my-static-site-stack/aaaccc44-4555-1110-0088-8eee66655522"
}

S3のページを確認するとmy-bucket-ymlib-20250809が表示されました！

my-bucker-ymlib-20250809をクリックします。

プロパティタブをクリックします。

下にスクロールさせると静的ウェブサイトホスティングの設定がありました。ちゃんと有効になっていました。
画面の下の方にバケットウェブサイトエンドポイントのURLが表示されています。

バケットウェブサイトエンドポイントへアクセスしてみます。

index.htmlを作成します。

index.html

1:
2:
3:
4:
5:
6:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello S3 bucket</h1>
  </body>
</html>

s3 syncでindex.htmlをアップロードするコマンドは以下になります。

aws s3 sync ./ s3://my-bucket-ymlib-20250809 ^
  --exclude "*" ^
  --include "index.html" ^
  --exact-timestamps

オプションは以下を設定しました。

--exclude "*"	全部除外
--include "index.html"	index.html だけ除外を解除
--exact-timestamps	タイムスタンプを比較

実行してみます。

> cd .\src
>aws s3 sync ./ s3://my-bucket-ymlib-20250809 ^
More?   --exclude "*" ^
More?   --include "index.html" ^
More?   --exact-timestamps
upload: .\index.html to s3://my-bucket-ymlib-20250809/index.html

ブラウザでアクセスしてみます。

上手くいきました！

バケットを確認するとindex.htmlが表示されました。

正常に動作確認できたのでバケットは削除しておきます。

CloudFormationのページを見るとmy-static-site-stackが表示されました。

こちらも削除しておきます。

▲ PageTop ■ Home