1
0

【AWS×Webアプリ】S3静的Webサイトホスティング(SAM)

Last updated at Posted at 2024-04-29

目的

・AWS上にS3バケットを作成し、静的Webサイトホスティング設定を行う。

前提条件

・SAMを使用してAWS上にリソースを作成する。

完成イメージ

image.png

SAMテンプレート

template.yaml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31

Resources:
  WebBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Sub ${AWS::StackName}-webbucket-${AWS::AccountId}
      VersioningConfiguration:
        Status: Enabled
      WebsiteConfiguration:
        IndexDocument: index.html
      PublicAccessBlockConfiguration:
        IgnorePublicAcls: false
  WebBucketBucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref WebBucket
      PolicyDocument:
        Version: '2012-10-17'
        Statement:
          - Action:
              - s3:GetObject
            Effect: Allow
            Resource:
              - !Sub ${WebBucket.Arn}/*
            Principal: '*'
Outputs:
  WebsiteURL:
    Description: URL for website hosted on S3
    Value: !GetAtt WebBucket.WebsiteURL

①WebBucket(S3バケット)
・VersioningConfiguration:バージョニング有効化(Status: Enabled)
・WebsiteConfiguration:静的Webサイトホスティング有効化(IndexDocument: ~)
・PublicAccessBlockConfiguration:パブリックアクセス有効化(IgnorePublicAcls: false)

②WebBucketBucketPolicy(バケットポリシー)

動作確認

①作成されたS3バケットへ「index.html」をアップロードする

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>

②Webサイトへアクセス
image.png

1
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
1
0