AWS s3 website add cloudfront

first one: open the new s3 bucket and cloudfront

if you don’t know how to use cdk, please read my before story:

How to use aws CDK create s3?

import * as cdk from 'aws-cdk-lib';
import {Construct} from 'constructs';
import {aws_cloudfront_origins, aws_s3} from "aws-cdk-lib";
// import * as sqs from 'aws-cdk-lib/aws-sqs';

export class S3Stack extends cdk.Stack {
    constructor(scope: Construct, id: string, props?: cdk.StackProps) {
        super(scope, id, props);

        const s3 = new aws_s3.Bucket(this, 'MyEncryptedBucket', {
            encryption: aws_s3.BucketEncryption.S3_MANAGED,
            publicReadAccess: true,
            bucketName: "webproject0352250",
            removalPolicy: cdk.RemovalPolicy.DESTROY,
            websiteIndexDocument: 'index.html',
        });
        const cdn = new cdk.aws_cloudfront.Distribution(this, 'distro', {
            defaultBehavior: {
                origin: new aws_cloudfront_origins.S3Origin(s3),
            },
            defaultRootObject: "index.html",
        });

        // The code that defines your stack goes here

            // example resource
            // const queue = new sqs.Queue(this, 'S3Queue', {
            // visibilityTimeout: cdk.Duration.seconds(300)
            // });
        }
    }

then you should created new s3 bucket and cloudfront

new s3 bucket

new cloudfront

then you need upload your webpage name index.html from local to your s3

then i got d3bd8ai4b50t7i.cloudfront.net in cloudfront

s3 link is https://webproject0352250.s3.ap-southeast-1.amazonaws.com/index.html

you can compare two different in your website!!

aws s3 look like is your driver, aws cloudfront is cdn services in aws, cloudfront is create cache for your website then make your page more fast,

next , you can add the cloudfront like to your route53 hz to use your domain go your website