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)
To request a Certificate:
- Open Amazon Certificate Manager (ACM) and click on 'Request a certificate'
- 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
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.
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.
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.
Enter the following details:
- Type = CNAME
- Name = pasted in from ACM, 'CNAME name'
- Target = pasted in from ACM, 'CNAME value'
- Proxy status = OFF
- TTL = Auto
- Add comment if needed
- Click ‘Save’
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.)
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:
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
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'
3. (Create distribution) - Web Application Firewall (WAF)
- Select 'Do not enable security protections'
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'
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'.
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'
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) it shows it was successfully issued by Amazon.
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...
Top comments (0)