<!DOCTYPE html>

Cloud Resume Challenge: Hosting a React CV using S3, CloudFront, Route 53, Lambda, DynamoDB and GitHub Actions for CI/CD

<br> body {<br> font-family: sans-serif;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code> h1, h2, h3 { text-align: center; } code { background-color: #eee; padding: 2px 4px; border-radius: 3px; } img { display: block; margin: 20px auto; max-width: 100%; } </code></pre></div> <p>

Cloud Resume Challenge: Hosting a React CV using S3, CloudFront, Route 53, Lambda, DynamoDB and GitHub Actions for CI/CD

Introduction

The Cloud Resume Challenge is a popular way for developers to showcase their skills and build a professional online presence. In this article, we'll dive into how to create a stunning React CV hosted on AWS using a comprehensive suite of services including S3, CloudFront, Route 53, Lambda, DynamoDB, and GitHub Actions for automated CI/CD.

Why This Matters

Modern Portfolio: A cloud-hosted React CV is a modern and engaging way to present your skills and experience.
- Scalability: AWS provides the infrastructure to scale your CV website to handle a large number of visitors.
- Cost-Effective: AWS offers free tiers for many services, making it an affordable option for hosting your CV.
- Automated Deployment: GitHub Actions automate the build and deployment process, ensuring your CV is always up-to-date.
  Deep Dive into AWS Services
  Let's break down the AWS services we'll use:
- S3 (Simple Storage Service): Stores your static React website files (HTML, CSS, JavaScript, images) as objects.
- CloudFront: Acts as a content delivery network (CDN) to deliver your website files quickly and efficiently to users globally.
- Route 53: AWS's DNS service for mapping your custom domain name (e.g., yourname.com) to your CloudFront distribution.
- Lambda: Serverless compute service used for dynamic content generation or API endpoints. In this case, we'll use it for redirecting users to a custom "404" page when they try to access a non-existent page.
- DynamoDB: A fully managed NoSQL database that can be used to store data about your website visitors (for example, analytics).
- GitHub Actions: A CI/CD platform for automatically building, testing, and deploying your code to AWS whenever you push changes to your GitHub repository.
  Step-by-Step Guide
  ### 1. Create a React Project and Deploy to S3

Create a React Project:

   npx create-react-app my-cloud-resume
   cd my-cloud-resume

Build the React App:

   npm run build

This will generate a build folder containing the production-ready files.

Configure S3 Bucket:
- Go to the AWS S3 console and create a new bucket.
- Set the bucket name to something descriptive (e.g., my-cloud-resume-bucket).
- Choose a region that's geographically close to your target audience for faster content delivery.
Upload to S3:
- Navigate to your newly created S3 bucket.
- Choose "Upload" and select the build folder from your React project.
Set Permissions (Optional):
- For public accessibility, grant read permissions to "Everyone" on your S3 bucket. You can do this by creating a bucket policy or by using the bucket's permissions settings.

2. Configure CloudFront

Create a CloudFront Distribution:
- Go to the CloudFront console and create a new distribution.
- Choose "Web" as the distribution type.
- In the "Origin Settings" section, select "S3 Bucket" and choose your previously created S3 bucket.
- Optionally, you can enable features like caching and compression.
- Click "Create Distribution."
Get Distribution Domain Name:
- Once the CloudFront distribution is created, you'll receive a domain name (e.g., d123456789abcdef.cloudfront.net). This is the address of your hosted website.

3. Set Up Route 53

Create a Hosted Zone:
- Go to the Route 53 console and create a new hosted zone.
- Enter your desired domain name (e.g., yourname.com).
Create an Alias Record:
- In the "Create Record Set" section, choose "Alias" as the record type.
- Enter your domain name in the "Name" field (e.g., www).
- In the "Alias Target" field, choose "CloudFront Distribution" and select your CloudFront distribution.
- Click "Create Record Set."

4. Deploy a Custom "404" Page with Lambda

Create a Lambda Function:
- Go to the Lambda console and create a new function.
- Choose "Python" as the runtime (or your preferred language).
- Name the function (e.g., custom-404).

Write Lambda Code:

Replace the default Lambda code with this:

 import json
 import base64

 def lambda_handler(event, context):
     # Decode the body of the request
     body = base64.b64decode(event['body']).decode('utf-8')

     # Check if it's a 404 page
     if event['httpMethod'] == 'GET' and 'errorMessage' in body:
         return {
             "statusCode": 200,
             "headers": {
                 "Content-Type": "text/html"
             },
             "body": "
<html>
<head>
<title>
 Page Not Found
</title>
</head>
<body>
<h1>
 404 - Page Not Found
</h1>
</body>
</html>
"
         }
     else:
         return {
             "statusCode": 404,
             "body": "Resource not found."
         }

Configure API Gateway Integration:
- In the Lambda function's configuration, navigate to "Triggers."
- Create a new trigger of type "API Gateway."
- Choose "REST API" as the API type.
- Specify the desired path (e.g., /{proxy+}).
Deploy API Gateway:
- Deploy the API Gateway integration by clicking the "Deploy" button.
- Take note of the generated API endpoint URL.
Update CloudFront Configuration:
- Go back to your CloudFront distribution.
- In the "Error Pages" section, configure a custom error page for status code 404.
- In the "Custom Error Response" field, paste the generated API endpoint URL from API Gateway.

5. Implement CI/CD with GitHub Actions

Create a deploy.yaml File:
- In the root of your React project, create a file named deploy.yaml.
Add GitHub Actions Code:

   name: Deploy to AWS

   on:
     push:
       branches: [ main ]

   jobs:
     build-and-deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout Code
           uses: actions/checkout@v3

         - name: Install Dependencies
           run: npm install

         - name: Build React App
           run: npm run build

         - name: Configure AWS Credentials
           uses: aws-actions/configure-aws-credentials@v1
           with:
             aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
             aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
             aws-region: ${{ secrets.AWS_REGION }}

         - name: Upload to S3
           uses: aws-actions/aws-s3@v3
           with:
             bucket: ${{ secrets.AWS_S3_BUCKET_NAME }}
             region: ${{ secrets.AWS_REGION }}
             source: build/
             acl: public-read

         - name: Invalidate CloudFront Cache
           uses: aws-actions/aws-cloudfront-invalidate@v1
           with:
             distributionId: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }}
             paths: "/*"

Create GitHub Secrets:
- Go to your GitHub repository's "Settings" -> "Secrets" -> "Actions."
- Add the following secrets:
  - AWS_ACCESS_KEY_ID
  - AWS_SECRET_ACCESS_KEY
  - AWS_REGION
  - AWS_S3_BUCKET_NAME
  - AWS_CLOUDFRONT_DISTRIBUTION_ID
Enable GitHub Actions:
- Commit and push your changes to your GitHub repository.
- GitHub Actions will automatically run, build your React app, and deploy it to AWS.

6. (Optional) Use DynamoDB for Analytics

Create a DynamoDB Table:
- Go to the DynamoDB console and create a new table.
- Set the table name (e.g., resume-analytics).
- Create a primary key with an appropriate name (e.g., visitId).
- Add other attributes as needed (e.g., timestamp, userAgent, location).
Update React App to Collect Data:
- In your React app, use the AWS SDK to write data to your DynamoDB table. This data can include timestamps, user agent information, and geographic location.
Analyze Data (Optional):
- You can use AWS Athena or other tools to query your DynamoDB data and gain insights into your CV website traffic.
  Conclusion
  Hosting your React CV using AWS provides a powerful combination of scalability, cost-effectiveness, and modern development practices. By leveraging S3, CloudFront, Route 53, Lambda, and DynamoDB, you can create a robust and dynamic online presence for your resume. GitHub Actions automate the deployment process, ensuring your CV is always up-to-date.

Remember to follow security best practices, configure appropriate permissions, and monitor your infrastructure for performance and security. With this comprehensive guide, you're equipped to launch a professional and engaging Cloud Resume that showcases your skills in a modern and engaging way.