Deploy a static website to S3 with AWS CDK

Instructor: [0:00] Our app is now finished, but as we can see, it currently lives on in our localhost. We would like to deploy it to the Internet for others to enjoy it. We have to do two things. We have to build the app and deploy the app.

[0:11] First, I'll open up the terminal, navigate to frontend directory and then run npm run build in order to build the app. After it's done, we see a notification that the build folder is now ready to be deployed.

[0:21] In order to deploy the site, we are going to use the S3 bucket, because S3 not only can store static files, but it can also be used to host websites. First, upgrade a new bucket. I'm going to call it website-bucket. It is going to be a new S3.bucket. First argument is this, as usual. I'm going to call it website-bucket here as well.

[0:40] When it comes to the props, we have to set two. Similar to our logo-bucket, the website-bucket has to be public as well because otherwise, our users won't be able to access the website. Since this bucket is going to host a website, we have to specify a website index document. This is the name of the index document, for instance, index.html for the website. I'm going to call it [inaudible] .index.html.

[1:04] We definitely don't want to copy the build directory to the bucket manually. Instead, I'm going to copy this bucket deployment over here, paste that, and instead of deploy logo, I'm going to do deploy website. The destination bucket is going to be equal to website-bucket. When it comes to the sources, I'm going to set the asset directory to ..frontend/build.

[1:23] To recap, we are going to create a new bucket for our deployment. This bucket deployment is going to deploy the contents of the frontend build directory. We can see that over here. This is the build directory. This is going to be deployed to the website bucket.

[1:37] One more thing, after we deploy, it's useful to know the address of our site. I'm going to create a new CloudFormation output, CDK CfnOutput. I'm going to send to this website address, and the value is going to be equal to website-bucket.websiteURL, which is the address of our static website.

[1:54] Let's give it a shot, open up the terminal and run cdk deploy. Before we can deploy, it is going to ask us whether we are OK with allowing the CDK bucket deployment to be able to access the data from the S3 bucket. We are OK with that, so I'm going to hit Yes. This took a second, but afterwards we can see the website address over here.

[2:13] After I click on it, we can see it in the browser. The app is now public. I can add a new-todo and also delete the deploy-to-app-todo, because we just did that.