1 | Create and Configure an S3 bucket

1. Under the services tab, go to S3

   

2. Then, click "Create Bucket"

   

3. Put in the name of the bucket, and copy settings from the bucket. Then, click "Create"

   <aside> 💡 CONVENTION: The name of the S3 bucket has to be the same as the name of the staging when it is fully deployed. For instance, for the staging "inventory-staging.beautymnl.com", the source S3 bucket is also named "inventory-staging.beautymnl.com".

   </aside>

   

4. Search for the newly created S3 bucket and click it

   

5. Then, go to properties. And find "Static Website Hosting". Set the values for index and error documents, then hit save.

   <aside> 💡 You are required to add an Index document. Usually, that's index.html. During your vue-build processes, the npm automatically produces index.html

   </aside>

   

6. The properties pane should look like this, with bucket hosting enabled!

   

7. Go to the permissions tab, and under bucket policy, set the bucket policy. Just copy the JSON document below. Remember to remove the comment and change the resource

   <aside> 💡 Bucket policies are one of 2 ways to control access to an S3 bucket. The statement below allows anyone with the link to access our S3 bucket. This exposes all the contents of our S3 buckets, which makes it ideal for static website hosting.

   </aside>

   {
       "Version": "2008-10-17",
       "Statement": [
           {
               "Sid": "AllowPublicRead",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "*"
               },
               "Action": "s3:GetObject",
   						
   						// CHANGE THIS RESOURCE!! AND REMOVE THIS COMMENT!!
               "Resource": "arn:aws:s3:::inventory-develop-staging-2.beautymnl.com/*"
           }
       ]
   }
   

   

8. After hitting save, you will see this:

   

9. To test it, upload a picture

   

10. Then, go to that picture

    

11. You should see the picture you uploaded. This is the picture I happen to upload.

    <aside> 💡 What does this prove? Since you are in incognito, it proves that anyone access the contents of the S3 bucket. That it is public access!!

    </aside>

    

12. Create a custom error response

    1. Go to the “error pages”, and create
       1. HTTP Error 403 ⇒ /index.html HTTP 200
       2. HTTP Error 404 ⇒ /index.html HTTP 200

    

    

2 | Create a Cloudfront Distribution

1. Under the services tab, go to CloudFront

   <aside> 💡 What does CloudFront do? It is a Content Delivery Network that allows you to cache your website's assets such as JS, CSS, Images to a location nearer to your customers than if they'd have to retrieve it from the content's origin. In this case, instead of the customer having to fetch the static assets from Singapore's S3 bucket, it just fetches from an edge location in the Philippines.

   </aside>

   

2. Click "Create Distribution"

   

3. Choose Web (always!)

   

4. Follow the following condition

   • Origin Domain Name: type the name of the s3 bucket (and automatically as you type, you will see the dropdown below). Click the asset in the dropdown.