Nuxtstop

For all things nuxt.js

Hosting Static Website on AWS using S3, Route53, CloudFront

#aws #s3 #cloudfront #route53
0 0

Here I show how I would host a static web site on AWS using S3, Route53 and CloudFront.

S3: Create an S3 bucket for your website

Open the AWS console navigate to S3 and create a bucket

Screenshot 2021-07-29 at 08.27.35

Screenshot 2021-07-29 at 08.29.40

Note uncheck the "Block all public access"

S3: Configure Bucket for Static Website Hosting

Under Properties of the bucket, edit the "Static website hosting" section

Screenshot 2021-07-29 at 08.48.16

S3: Configure Bucket Policy for Public Access

Add the bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-07-29 at 15.58.43

Create Static Web App 

$> npx create-react-app staticsite
Enter fullscreen mode Exit fullscreen mode

Build a static site from react app 

$> npm run build
Enter fullscreen mode Exit fullscreen mode

The static site now needs to be uploaded to S3 bucket

S3: Upload application to the bucket

Screenshot 2021-07-29 at 13.38.30

Certificate Manager: Request a certificate in the us-east-1 region

Screenshot 2021-07-29 at 11.34.21

Screenshot 2021-07-29 at 11.34.58

Screenshot 2021-07-29 at 11.35.11

Screenshot 2021-07-29 at 11.35.32

Domain Name Validation Config: Add a CNAME on your domain registrar for validation 

Name: _e0bexxxxxxxxxxxxx.staticsite.nanosoft.co.za
Type: CNAME, 
Value: _775axxxxxxxxxxxxxxxx.xxxxxxxxxx.acm-validations.aws.
Enter fullscreen mode Exit fullscreen mode

Note: do not include the dot at the end of the Name.

This validation might take up to 30 minutes for the changes to propagate.

Screenshot 2021-07-29 at 13.02.42

Once you subdomain has been validated the status will change to "Issued" and you are now ready to use the certificate.

CloudFront: Create a Distribution

Screenshot 2021-07-29 at 13.24.19

Screenshot 2021-07-29 at 13.24.45

Screenshot 2021-07-29 at 14.26.51

Screenshot 2021-07-29 at 13.28.21

Route53: Create a Hosted Zone

Create a hosted zone. I've created a nanosoft.co.za hosted zone here

Screenshot 2021-07-29 at 10.11.47

Screenshot 2021-07-29 at 10.35.26

Route53: Create a Record for a Sub Domain

Client "Create Record" and select "Simple routing"

Screenshot 2021-07-29 at 10.38.35

Define simple record

Screenshot 2021-07-29 at 10.39.37

Screenshot 2021-07-29 at 17.07.23

Screenshot 2021-07-29 at 17.07.45

DNS Config: Add a CNAME on your domain registrar for AWS Web hosting 

Name: staticsite.nanosoft.co.za
Type: CNAME, 
Value: s3-website.af-south-1.amazonaws.com.
Enter fullscreen mode Exit fullscreen mode

To check the progress of the DNS propagation use the tool:
https://dnschecker.org/#CNAME/staticsite.nanosoft.co.za

After a few minutes you'll be able to browse your secure custom domain url for your static site.

Done!

Add comment