24-deploy-a-static-website-to-s3-with-aws-cdk.md

Deploy a static website to S3 with AWS CDK

📹 Video

Let's deploy our frontend app (that currently lives on localhost) to the Internet.

First, let's build the app! Go to frontend directory and run:

• yarn run build

We'll be using a new s3 bucket to host our frontend app! Add the new bucket to the stack file:

const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
    // so that it's publicly available
    publicReadAccess: true,
    // the index document
    websiteIndexDocument: "index.html"
});

Instead of copying the contents of the build folder manually, let's deploy it automatically by adding this:

new s3Deployment.BucketDeployment(this, "DeployWebsite", {
    destinationBucket: websiteBucket,
    // path to our build directory
    sources: [s3Deployment.Source.asset("../frontend/build")]
});

Lastly, just like with the logo url, let's output the website url.

new cdk.CfnOutput(this, "WebsiteUrl", {
    value: websiteBucket.bucketWebsiteUrl
});