Part 1: Building the frontend
Tags: aws, cloudresumechallenge, tutorial, cloud
Published: 2023-10-04 09:16:01

## Included in this chapter... 
- Objective
- AWS services used
- S3 bucket
- AWS Certificate Manager (ACM)
- CloudFlare (www.cloudflare.com)
- AWS CloudFront
- Testing
- Summary


---
## Objective

To begin the first part of the project I needed to create a simple landing page that end users will be able to open from the web, this will act as my single-page online resume. 

I used a html/css template that I used to display and stylise  my resume details. The two files were then stored in an S3 bucket enabled for static website hosting.

One of the requirements for this section is that the S3 website **URL should default to use https**, to enable this I needed to use AWS CloudFront.

I also purchased a domain name (simon-green.uk) from a third-party registrar (CloudFlare) that I would later need to configure to point to CloudFront. 

The following is the step-by-step process I used to overcome this part of the challenge.

---

### AWS services used for this part:
- Amazon S3
- CloudFront
- Amazon Certificate Manager (ACM)

---
### S3 bucket 
With the website files added to the bucket, **initial testing** was done locally and **using the S3 website endpoint URL** that can be found on the bucket page, 'Properties' tab, at the bottom in the 'Static website hosting' section.

One important thing to note here is that the **bucket had to be named with the 'www' subdomain and the root domain**, ie 'www.simon-green.uk', otherwise the functionality would not work.

---

### AWS Certificate Manager (ACM)

I purchased a domain name from CloudFlare which I then needed to route to CloudFront by configuring certificates and DNS settings, CloudFront here will point to the S3 bucket and will also be used to enforce an https connection.

The below diagram shows the process to request a Public Certificate using Amazon Certificate Manager (ACM)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya4fv122d2jptdftkiiq.png)

---

**To request a Certificate:**
- Open **Amazon Certificate Manager (ACM)** and click on '**Request a certificate**'

![ACM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c9x3ld0lltc1kp14m5g.png)

<br /><br />

- Request '**Public certificate**'
- Add '**Fully qualified domain name**' (simon-green.uk)
- Validation method should be **DNS validation** (and not 'Email validation)'
- Click the orange '**Request**' button at the bottom


![request_certificate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gkapy4ad2p2u4i9mdme.png)

<br /><br />

Now under **ACM** → **List certificates**, I see the requested certificate with **Status = 'Pending Validation'**. This won't resolve until I complete the next step/s.


![cert pend val](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5t7e51gzkas0b1jaw6.png)

<br /><br />

Click on the blue '**Certificate ID**' and in the '**Domains**' section, I'm interested in the string values under '**CNAME name**' and the '**CNAME value**'. These will be used to create DNS records on CloudFlare.


![domain details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7pezg23eofy6a4h03qi.png)

---

### CloudFlare
In the third-party **CloudFlare** console I navigated to the '**Domain name management console** and on the left-hand side clicked on '**DNS**', here under **DNS management for '[Domain Name]**' -  click on '**Add record**' which will expand the box where you can input details.


![CloudFlare 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z75q58mh17qevb368g7i.png)

<br /><br />

Enter the following details:

1. Type = **CNAME**
2. Name = **pasted in from ACM, 'CNAME name'**
3. Target = **pasted in from ACM, 'CNAME value'** 
4. Proxy status = **OFF**
5. TTL = **Auto**
6. Add comment if needed
7. Click ‘**Save**’



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufw3wc92w8y2z1afn166.png)

<br /><br />

With this done, back in **ACM**, the **previously requested certificate will soon show 'Status = Issued'** (in my experience this typically took less than 5 minutes.)


![ISSUED](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3hnnf53q68s9jw7hcun.png)

---

### AWS CloudFront
Now I need to create a **CloudFront distribution**, this will act as the public accessible endpoint (that CloudFlare will point to), the distribution will then server content from the S3 bucket hosting the website using **https**.

In **CloudFront**, click '**Create distribution**' and update the following **four** sections:  

<br /><br />

#### 1. (Create distribution) - Orign

- For the '**Origin domain**' drop down, select the S3 bucket where the website is hosted
- There will be a warning box appear suggesting to '**Use website endpoint**' rather than the 'bucket endpoint'
- Click the button '**Use website endpoint**'
- Origin path = leave **empty**
- Name = **leave as is**
- Origin access = **Public**
- Enable Origin Shield = **No**



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0wfq2ozr5fe2l6uu1ak.png)

![Icloudfront1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is9vfy1t7j0nyt8bww19.png)

<br /><br />

#### 2. (Create distribution) - Default cache behavior
  * Compress objects automatically = **No**
  * Viewer Protocol Policy = **Redirect HTTP to HTTPS**
  * Cache key and origin requests
      - Select '**Cache policy and origin request policy (recommended)**'
      - Under '**Cache Policy**' select **'Caching disabled'**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j4iaa5rtguy8092yksc.png)

<br /><br />

#### 3. (Create distribution) - Web Application Firewall (WAF)
  * Select '**Do not enable security protections**'

<br /><br />

#### 4.Create distribution) - Settings
  - Select '**Use only North America and Europe**'
  - In section '**Alternate domain name (CNAME)**'
      - Click on the '**Add item**' button
      - Enter domain name ('**simon-green.uk**')
      - Again click ‘**Add item**’ and add '**www.simon-green.uk**'
   - Under '**Custom SSL certificate - optional**'
      - Click on '**Choose certificate**' box
      - Click the drop-down and under the heading '**ACM certificates**', select the  certificate that was created in above step (it starts with the domain name), see below screenshot, in my case it is the only option.
  - Scroll to the bottom and click '**Create Distribution**'

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bxuoolon9yv0uc09i6f.png)

---

### With the distribution created

The CloudFront distribution will be in a '**Deploying**' status for **around 5 minutes** until 'Deploying' is replaced with a '**Last modified date**'.

The final step is to **point** the **domain name** on CloudFlare **to** the **CloudFront** distribution's URL.

Once the distribution has finished 'Deploying', open it and under '**General**' →' '**Details**' click to copy the '**Distribution domain name**'.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnnjh3g5sqzhan4j460q.png)


Now navigate one more time to the **CloudFlare DNS section** and click '**Add record**' and complete it with the following details:

- Type = **CNAME**
- Name = **domain name** (simon-green.uk)
- Target = **paste in the CloudFront 'Distribution domain name' URL**, from above. 
   - Important, you need to remove the network protocol ('https://')
- Click '**Save**'



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqdvi0t5zhdo7wn9684v.png)

---

### Testing
After some **five minutes** to allow for propagation, I tested the following and worked well on **various browsers and devices**.

- The following addresses opened the site (resolving to https)
   - **simon-green.uk**
   - **www.simon-green.uk**
- If an http request was served (**http**://www.simon-green.uk), it automatically resolved to https (**https**://www.simon-green.uk)

Also when confirming the **Domain name / SLL certificate** (using   [dnschecker.org](https://dnschecker.org/ssl-certificate-examination.php)) it shows it was successfully issued by Amazon.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvm8frk0bthd7elgvlm5.png)

---

### Summary

Initially I had some issues with incorrect config, where the webpage was displaying correctly on some devices but was returning **403 (Service Unavailable)** on others. 

The solution was in understanding the correct configuration of **DNS certificates** and **DNS settings** on both **ACM** and **CloudFlare**. 

This was an interesting part of the project, I now have a much better understanding of the components and how the configuration works (especially with a third-party involved). Also the testing and resolution process was 

Next step, configure the back end...