Coding the solution
Congratulations, you have designed an architecture that fulfills all your requirements. It’s time to build it. During this chapter, you are going to do it using the AWS console in the N. Virginia region.
Editing the website
Start by downloading the assets in the Git repository of this book at https://github.com/PacktPublishing/AWS-Cloud-Projects. You can do it from your workstation terminal using the Git tool, or by downloading the repository as a ZIP file. A detailed step-by-step guide on how to use Git and GitHub is beyond the scope of this book, but if you want to deep dive into the topic, the book Mastering Git, available at https://www.packtpub.com/product/mastering-git/9781783553754, covers it holistically.
You will find three files in the chapter2/code folder. Open index.html in your favorite code editor. There, you will find a standard HTML that references some styles in the header, along with an HTML body with multiple divisions, highlighted with the tags div, populated with CV information:
<!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow&family=Julius+Sans+One&family=Open+Sans&family=Source+Sans+Pro&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css"> </head> <body> <page size="A4"> <div class="container"> <div class="leftPanel"> <img src="avatar.png"/> <div class="details"> <div class="item bottomLineSeparator"> <h2> CONTACT </h2> ### OUTPUT OMMITED ###
If you are not familiar with HTML, this is the 1,000-foot overview: HTML files are what browsers read to render web pages. They are represented by the.html or .htm extensions. HTML documents have a series of elements, represented in between tags. Tags are represented with a word between <> symbols. There are opening and closing tags; the content is between them. There are well-defined tags, for example, <p>, which means paragraph. To represent a paragraph, you would do the following:
<p>This is a paragraph in HTML</p>
You can find documentation about many other tags on the w3school website at https://www.w3schools.com/tags/.
However, if you just use plain HTML, your website will not have a good aesthetic. To visualize this, open the index.html file in your browser. If you haven’t modified it yet, it will look like Figure 2.2.
Figure 2.2 – index.html browser visualization
Now, open it in a text editor and remove these link tags in the header:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow&family=Julius+Sans+One&family=Open+Sans&family=Source+Sans+Pro&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css">
Refresh your browser page. Now, it will look like Figure 2.3:
Figure 2.3 – index.html browser visualization without styles
Hopefully, you see the value. Styles in HTML add style to an element, such as color, font, size, and more. Everything in HTML can be styled, even div elements. Re-add the five link tags you have removed.
Now, open the file named index.css in a text editor. In this code, you can find specific font sizes and colors for each type of tag used in your HTML file. Likewise, you can find positioning attributes:
h1 {
font-family: 'Julius Sans One', sans-serif;
}
h2 { /* Contact, Skills, Education, About me, Work Experience */
font-family: 'Archivo Narrow', sans-serif;
}
h3 { /* Accountant */
font-family: 'Open Sans', sans-serif;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.leftPanel {
width: 27%;
background-color: #484444;
padding: 0.7cm;
display: flex;
flex-direction: column;
align-items: center;
}
## OUTPUT OMMITED ### Contrast the names found here, such as leftPanel or container, with the div class attributes of your index.html file.
The third file, avatar.png, is just a photo. To insert an image in an HTML, use the <img> tag.
Now that you understand the three files and how they relate to each other, replace the content with your own CV information and photo. If you feel confident, alter some of the styles as well.
Publishing the website
So far, all you have done is use your local workstation. In this section, we are going to make your website globally available.
Access your AWS account using the Console like in Chapter 1. Navigate to S3: https://s3.console.aws.amazon.com/s3/home?region=us-east-1#.
Create a bucket. In its configuration settings, give it a unique name, and leave Block all public access checked.
Navigate inside the newly created S3 bucket and upload the three files that you downloaded earlier from the book’s GitHub repository: index.html, index.css, and avatar.png. These, as mentioned, were example files, and you can and should replace them with your own. If you have not done this by the end of this chapter, you will have a website of one of the book’s authors’ CVs.
Navigate to the CloudFront console (https://us-east-1.console.aws.amazon.com/cloudfront/v4/home?region=us-east-1#/distributions) and create a new distribution:
- Select your bucket as Origin domain.
- Change Origin access from Public to Origin access control settings.
- Create a new OAC with the default options, and select it under Origin access control.
- Under the Web Application Firewall (WAF) section, do not enable the security protections.
- Before creating your distribution, read through all the options. Notice some interesting ones, such as the cache policy, the ability to compress objects automatically, and the different types of pricing.
When you create the distribution, a yellow popup will appear at the top of your screen, like the one shown in Figure 2.4. Select Copy policy, followed by Go to S3 bucket permissions to update policy.
Figure 2.4 – CloudFront OAC popup
You will be presented with your S3 bucket settings. Select Edit under the Bucket policy section, paste the policy you copied, and save it.
The policy should look like the following one. It allows the CloudFront service to access the resources inside your bucket. In this case, that’s the cloudprojectwebsitebucket bucket:
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::cloudprojectwebsitebucket/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::111111111111:distribution/E33NUQ32Z0XQZB"
}
}
}
]
} Navigate back to your CloudFront distribution and note the distribution name. Note that the CloudFront distribution might take a minute or two to become available.
Append index.html at the end, and after your distribution status shows Enabled, open it in your browser. The URL should have the following format; the highlighted part should be different in your case:
https://d1hjtv5xjv873g.cloudfront.net/index.html
However, nobody likes to have to write index.html at the end of the URL, right?
Navigate to your CloudFront distribution and select Edit under Settings. In the Default root object field, insert index.html and save your changes.
Your distribution state will change to Deploying momentarily, as shown in Figure 2.5, under the Last modified column.
Figure 2.5 – CloudFront distribution status during an update
When the distribution finishes propagating your changes, the status column shows the Enabled status, and the Last modified column shows a date as shown in Figure 2.6.
Figure 2.6 – CloudFront distribution status after an update
Refresh your CV page, this time without the path, as shown in the following line. Remember to replace the highlighted string with your own domain:
https://d1hjtv5xjv873g.cloudfront.net/
Et voilà! Your CV is now online and available for recruiters to visit it.
Monitoring the website
Your website is online, you can share the URL with other people and they will always have access to your latest CV. However, how do you know whether they actually accessed it, or whether they are having a good experience?
You already know the answer; it’s CloudWatch metrics:
- Navigate to the CloudWatch metrics console (https://us-east-1.console.aws.amazon.com/cloudwatch/home?region=us-east-1#metricsV2).
- In the Browse tab, you will find all kinds of AWS services. Select CloudFront, followed by Per-Distribution Metrics.
- If you have more than one distribution, you will need to identify the relevant one by ID. If you just have one, select BytesDownloaded, Requests, 5xxErrorRate, and 4xxErrorRate.
CloudWatch will plot a graphic for you on the top of your screen, like the one shown in Figure 2.7. At 16h25, 18K bytes were downloaded and some users were facing HTTP 400 errors. These metrics were calculated as five-minute averages.
Figure 2.7 – CW metrics graph for CloudFront
These metrics are free and were automatically populated without you having to do anything other than just configuring CloudFront. However, if you want more detailed metrics such as 4xx and 5xx error rates by the specific HTTP status code, or cache hits as a percentage of total cacheable requests, you can enable that in your CloudFront distribution at a cost.
Explore CloudWatch metrics further and see what other metrics were automatically populated. Here’s a hint: consider your file storage service.
Cleaning up
AWS resources incur costs. Although most services initially fall under the free tier, eventually that runs out, and you will incur costs. We recommend that you delete every application after you are done playing with it.
Start by deleting your CloudFront distribution:
- Navigate to CloudFront console (https://us-east-1.console.aws.amazon.com/cloudfront/v4/home?region=us-east-1#/distributions).
- Select and disable your CloudFront distribution.
- After it’s disabled, delete the distribution.
Next, delete your S3 bucket:
- Navigate to S3 console (https://s3.console.aws.amazon.com/s3/home?region=us-east-1).
- Select your bucket. Inside, delete all three files. Buckets can only be deleted if they are empty.
- Delete your bucket.
