Summary
The Cloud Resume Challenge is a guided project to generate a resume webpage hosted in the cloud using cloud resources and development best practices. It comes in 3 flavours - AWS, Azure, and Google. Part 1 is to build a static webpage and then add a back-end to store a count of visitors that can be displayed on the page.
Architecture
Services
| Service | Description | Cost |
|---|---|---|
| Amazon Simple Storage Service (S3) | Amazon S3 is a highly available object storage service. | $0.01/month |
| Amazon CloudFront | Amazon CloudFront speeds up distribution of static and dynamic web content. When users request your content, CloudFront delivers it through a worldwide network of edge locations that provide low latency and high performance. | Free |
| Amazon API Gateway | Amazon API Gateway enables you to create and deploy your own REST and WebSocket APIs at any scale. | $1.16 per 1 million API calls/month |
| AWS Lambda | With AWS Lambda, you can run code without provisioning or managing servers. |
$0.0000166667 for every GB-second/month $0.20 per 1M requests |
| Amazon DynamoDB | Amazon DynamoDB is a fully managed NoSQL database service that provides fast and predictable performance with seamless scalability. |
$0.7423 per million write request units/month $0.1487 per million read request units/month First 25 GB stored/month is free |
| Total | $2.26/month after Free Tier | |
Description
An external domain name with TLS/SSL certification is used to access a Amazon CloudFront distribution, whose origin is an S3 bucket containing the static webpage files. The webpage files are automatically deployed from a GitHub repository using GitHub Actions
To update the visitor counter, whenever the webpage is loaded, javascript within the webpage makes a GET API call to the endpoint of the Amazon API Gateway HTTP API. The API call triggers the AWS Lambda function to increment the visitor counter and update the Amazon DynamoDB NoSQL database table. The API call returns the new value of the counter.
The initial stages of the challenge include:
- Set up accounts for development and production workloads using AWS Organizations and Organizational Units (OU). Accounts take advantage of the Free Tier from AWS during development.
- Secure login to the accounts using AWS SSO. SSO login applies temporary credentials to the user.
- Build the static website using HTML and CSS. Store the website files in an S3 bucket. Set up a GitHub repository to manage version control.
- Secure the site using Amazon CloudFront. Set up a CloudFront distribution using the S3 bucket as its origin.
- Point a custom domain name to the CloudFront distribution. Use an external domain name with an SSL certificate to route to the CloudFront distribution.
- Implement the front-end of the visitor counter using JavaScript. Select the counter element and update it by making a POST request to the back-end whenever the DOM is loaded
- Set up an Amazon DynamoDB table to hold the value of the visitor counter. The table uses a single number field to store the latest value of the visitor counter
- Create an HTTP API using Amazon API Gateway to allow the front-end to access the back-end. Enable Cross-Origin Resource Sharing (CORS) to allow the front-end to make API requests to API Gateway.
- Trigger an AWS Lambda function from API Gateway whenever a POST request is received from the front-end.
- Write the Lambda code using Python and boto3 SDK to take the current value of the counter and upload an incremented value to the database. Manage IAM permissions to allow the Lambda function to access the DynamoDB table.
- Deploy the front-end using GitHub Actions whenever the front- end code is updated. When the GitHub repository is synced, GitHub Actions uploads the new website files to the S3 bucket and invalidates the CloudFront distribution to update its cache.
Conclusion
This project shows my CV as a static webpage in the cloud with access to a serverless back-end to store and update a count of visitors to the page. It familiarised me with the practical issues of front-end and back-end serverless technologies to create a dynamic website.