Hosting Static Website on AWS using S3, Route53, CloudFront
Tags: aws, s3, cloudfront, route53
Published: 2021-07-29 15:16:29


 
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oafwx4xep9dzeun4ogyp.png)
 
![Screenshot 2021-07-29 at 08.29.40](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nou8zvpg0y4o2mduppd4.png)
 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6uh9j1kabuv1h9hgh7g.png)



### S3: Configure Bucket Policy for Public Access
Add the bucket policy:
```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}
```
![Screenshot 2021-07-29 at 15.58.43](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7bhnhjztco7y8uqxsba.png)
 



### Create Static Web App
```
$> npx create-react-app staticsite

```

### Build a static site from react app
```
$> npm run build
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lyk09qbowssvjils7hp.png)

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


![Screenshot 2021-07-29 at 11.34.21](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dplj7cpccoxzacq5zq6x.png)
 

![Screenshot 2021-07-29 at 11.34.58](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/695nvtjor058gcfe5pmt.png)
 
![Screenshot 2021-07-29 at 11.35.11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3nkfvaqbcngctkrlpwt.png)
 



![Screenshot 2021-07-29 at 11.35.32](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2senelk9ytqqcuzsacx.png)
 


### 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.
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hh5uccehvmfock0tyrz.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gihig4xdbgwtswki7cx3.png)


![Screenshot 2021-07-29 at 13.24.45](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z2zv48sdkn75vmi9tjk.png)


![Screenshot 2021-07-29 at 14.26.51](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5tcfugyav0753ysj872.png)
 

![Screenshot 2021-07-29 at 13.28.21](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imez3izfx8s9tuuvxxrr.png)
   

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0bw95drmk67zn991hsu.png)


![Screenshot 2021-07-29 at 10.35.26](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4bk3mvhiau5dpkjnywc.png)

### Route53: Create a Record for a Sub Domain
Client "Create Record" and select "Simple routing"

![Screenshot 2021-07-29 at 10.38.35](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f2ahviqzjmz0v1n2w6m.png)

Define simple record

![Screenshot 2021-07-29 at 10.39.37](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qryj3w0clduvykdsr1zd.png)
 

![Screenshot 2021-07-29 at 17.07.23](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zovjklptt2755if7rz9.png)

 
![Screenshot 2021-07-29 at 17.07.45](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnejx20fu1232gatmzq8.png)
 

### 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.

```
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!