AWSTemplateFormatVersion: '2010-09-09'
Description: 'S3 + CloudFront Static Website Hosting with S3 Access Logs'

Parameters:
  BucketNamePrefix:
    Type: String
    Description: 'S3 bucket name prefix for hosting website'
    Default: 'static-website'

Resources:
  # S3 Bucket for static website content
  S3Bucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Sub '${BucketNamePrefix}-${AWS::AccountId}-${AWS::Region}'
      PublicAccessBlockConfiguration:
        BlockPublicAcls: true
        BlockPublicPolicy: true
        IgnorePublicAcls: true
        RestrictPublicBuckets: true

  # S3 Bucket for CloudFront access logs
  LogBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Sub '${BucketNamePrefix}-logs-${AWS::AccountId}-${AWS::Region}'
      OwnershipControls:
        Rules:
          - ObjectOwnership: BucketOwnerPreferred
      PublicAccessBlockConfiguration:
        BlockPublicAcls: false
        BlockPublicPolicy: true
        IgnorePublicAcls: false
        RestrictPublicBuckets: true
      LifecycleConfiguration:
        Rules:
          - Id: DeleteOldLogs
            Status: Enabled
            ExpirationInDays: 90

  # S3 Bucket Policy for CloudFront
  S3BucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref S3Bucket
      PolicyDocument:
        Statement:
          - Sid: AllowCloudFrontServicePrincipalReadOnly
            Effect: Allow
            Principal:
              Service: cloudfront.amazonaws.com
            Action: 's3:GetObject'
            Resource: !Sub '${S3Bucket.Arn}/*'
            Condition:
              StringEquals:
                'AWS:SourceArn': !Sub 'arn:aws:cloudfront::${AWS::AccountId}:distribution/${CloudFrontDistribution}'

  # CloudFront Origin Access Control
  CloudFrontOriginAccessControl:
    Type: AWS::CloudFront::OriginAccessControl
    Properties:
      OriginAccessControlConfig:
        Name: !Sub '${BucketNamePrefix}-${AWS::AccountId}-OAC'
        OriginAccessControlOriginType: s3
        SigningBehavior: always
        SigningProtocol: sigv4

  # CloudFront Distribution
  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - Id: S3Origin
            DomainName: !GetAtt S3Bucket.RegionalDomainName
            S3OriginConfig:
              OriginAccessIdentity: ''
            OriginAccessControlId: !GetAtt CloudFrontOriginAccessControl.Id
        Enabled: true
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: S3Origin
          ViewerProtocolPolicy: redirect-to-https
          AllowedMethods:
            - GET
            - HEAD
          CachedMethods:
            - GET
            - HEAD
          Compress: true
          ForwardedValues:
            QueryString: false
            Cookies:
              Forward: none
        CustomErrorResponses:
          - ErrorCode: 403
            ResponseCode: 403
            ResponsePagePath: /403.html
            ErrorCachingMinTTL: 300
          - ErrorCode: 404
            ResponseCode: 404
            ResponsePagePath: /404.html
            ErrorCachingMinTTL: 300
        PriceClass: PriceClass_100
        HttpVersion: http2
        Logging:
          Bucket: !GetAtt LogBucket.DomainName
          Prefix: cloudfront-logs/
          IncludeCookies: false

Outputs:
  CloudFrontDomainName:
    Description: 'CloudFront Distribution Domain Name'
    Value: !GetAtt CloudFrontDistribution.DomainName
  CloudFrontDistributionId:
    Description: 'CloudFront Distribution ID'
    Value: !Ref CloudFrontDistribution
  S3BucketName:
    Description: 'S3 Bucket Name for website content'
    Value: !Ref S3Bucket
  LogBucketName:
    Description: 'S3 Bucket Name for access logs'
    Value: !Ref LogBucket

```Save this as a file named `s3-cloudfront-static-website.yaml` and upload it to your Code Server environment, then
deploy it to the Tokyo region yourself using the following command.

※ To ensure the S3 bucket name is unique, please replace the `BucketNamePrefix` value with one of your choice.

```bash
aws cloudformation deploy \
  --template-file s3-cloudfront-static-website.yaml \
  --stack-name my-static-website-stack \
  --parameter-overrides BucketNamePrefix=cm-ogura \
  --capabilities CAPABILITY_IAM \
  --region ap-northeast-1

		

			
			Please check the my-static-website stack in the Tokyo region. This stack was created from s3-cloudfront-static-website.yaml located locally.

		

			
			> ## Stack Verification Results

The status of the my-static-website-stack in the Tokyo region (ap-northeast-1) is as follows:

### Stack Basic Information
• **Status**: CREATE_COMPLETE (successfully created)
• **Creation Date**: 2025-07-11 01:21:02 UTC
• **Last Update**: 2025-07-11 01:21:08 UTC
• **Parameters**: BucketNamePrefix = "cm-ogura"

### Created Resources
1. S3 Bucket (Main Content)
   • Bucket Name: cm-ogura-XXXXXXXXXXXX-ap-northeast-1
   • Stores static website content

2. S3 Bucket (For Logs)
   • Bucket Name: cm-ogura-logs-XXXXXXXXXXXX-ap-northeast-1
   • Stores CloudFront access logs

3. CloudFront Distribution
   • Distribution ID: XXXXXXXXXXXXXX
   • Domain Name: XXXXXXXXXXXXX.cloudfront.net

4. CloudFront Origin Access Control
   • ID: XXXXXXXXXXXXXX
   • Controls secure access to S3 bucket

5. S3 Bucket Policy
   • Allows access only from CloudFront

### Key Output Values
• **CloudFront Domain**: XXXXXXXXXXXXX.cloudfront.net
• **Main S3 Bucket**: cm-ogura-XXXXXXXXXXXX-ap-northeast-1
• **Log S3 Bucket**: cm-ogura-logs-XXXXXXXXXXXX-ap-northeast-1

All resources have been created successfully, and static website hosting is ready. You can access the website using the CloudFront domain name.

		

			
			Please create the sample HTML files needed for this template. I'll upload them later.

		

			
			(omitted)

> ## Creation Complete!

Sample HTML files corresponding to the CloudFormation template have been created:

### 📁 List of Created Files

1. index.html - Main Page
   • Website homepage
   • Introduction to technologies and architecture
   • Responsive design

2. 403.html - Access Denied Error Page
   • Displayed when permission errors occur
   • User-friendly error explanation
   • Link guiding back to home

3. 404.html - Page Not Found Error Page
   • Displayed when accessing non-existent pages
   • Includes search box
   • Site navigation suggestions

4. about.html - Site Overview Page
   • Detailed explanation of architecture
   • Technical specifications and security features
   • Performance statistics

5. contact.html - Contact Page
   • Multiple contact methods
   • Contact form (for demo)
   • FAQ section

### 🎨 Design Features

• **Unified Design**: Consistent color theme and layout across all pages
• **Responsive**: Properly displayed on mobile devices
• **Accessibility**: Readable fonts and contrast
• **Modern UI**: Gradient backgrounds and card layouts

### 📤 Next Steps

Upload these files to the S3 bucket (cm-ogura-XXXXXXXXXXXX-ap-northeast-1), and the website will be displayed at the CloudFront domain (XXXXXXXXXXXXX.cloudfront.net).

For uploading, you can use the following command:
bash
aws s3 sync . s3://cm-ogura-XXXXXXXXXXXX-ap-northeast-1 --exclude "*.yaml" --exclude "*.deb"

````index.html` and `403.html` weren't the only HTML files it created for us.

It will also upload them for us.


		

			
			
It seems it also handled the CloudFront cache. After the upload is complete, open the CloudFront URL in your browser. If `index.html` displays correctly, then it's working properly.

![vscode-drop-1752213020080-otq1mbvj6xm.png](https://devio2024-2-media.developers.io/upload/3Rd9YmKyq0fFGB8M8yX4Ow/2025-07-11/AOKAfuJoO5xU.png)
*The actual displayed index.html*### Creating WAF from Attack Requests

Using your PC's browser, access the following URLs several times.
These contain strings that are considered malicious access attempts. We will have them recorded in the access logs for later analysis with the Q CLI.

:::message alert
As these requests are considered malicious, please do not send them to any environment other than the one created for this exercise!