Host a static website on AWS

I have just published my first static website on AWS and it was easy.

1. Run “npm run build” in the terminal, this creates the folder “dist” for Angular or “build” for React (make sure that these folders are included in the .gitignore file)
2. Zip the folder “dist”/”build”
3. Start the static website wizard in the AWS Management Console to create the website. Enter a name for the website and upload the zip file, press Create new website.

The wizard did the following:

1. It configured S3 bucket containing the static resources
2. It set up the rights automatically for HTTP access
3. It set up CloudFront CDN and assigned CloudFront URL

I navigated to a route within my page and sn0wcat hinted that I should try to refresh this page, it did not work and I got a 403 error because the routes are handled by Angular/React router and these only exist on the client side. In order to fix this, we created custom error responses in CloudFront under the Error Pages section which redirects to the index.html page es returns a 200 HTTP response, as follows:

Finally, we configure DNS name to map the alias to the CloudFront URL.

You can see the deployed static websites here:

• angular.coding4fun.rocks
• react.coding4fun.rocks
• vue.coding4fun.rocks