Cloud Resume Challenge - Visitor Counter API & Infrastructure

You’re experiencing this project right now: Home

The Goal
The main idea behind this section of the Cloud challenge was implementing a visitor counter using the API Gateway, Lamdbda, and DynamoDB.

Problems Solved#

The infamous CORS issue

CORS
Initializing the first item in DynamoDB
JSON formatting from Lambda (Outputs, decimals, etc.)
API URL injection

Infrastucture#

Since the last past, I’ve added a couple more resources.

api.tf routes calls and specifies what’s allowed, allowing the site to fetch from lambda.

1
resource "aws_apigatewayv2_api" "api" {
2
  name          = "nicoxmcdportfolio-api"
3
  protocol_type = "HTTP"
4

5
  cors_configuration {
6
    allow_origins     = ["*"]
7
    allow_methods     = ["GET","OPTIONS"]
8
    allow_headers     = ["*"]
9
    expose_headers    = []
10
    allow_credentials = false
11
    max_age           = 3600
12
  }
13
}
14

15
resource "aws_lambda_permission" "api_invoke" {
16
  statement_id  = "AllowAPIGatewayInvoke"
17
  action        = "lambda:InvokeFunction"
18
  function_name = aws_lambda_function.view_counter.function_name
19
  principal     = "apigateway.amazonaws.com"
20
  source_arn    = "${aws_apigatewayv2_api.api.execution_arn}/*/*"
21
}
22

23
resource "aws_apigatewayv2_integration" "lambda_integration" {
24
  api_id           = aws_apigatewayv2_api.api.id
25
  integration_type = "AWS_PROXY"
26
  integration_uri  = aws_lambda_function.view_counter.invoke_arn
27
  integration_method = "POST"
28
  payload_format_version = "2.0"
29
}
30

31
resource "aws_apigatewayv2_route" "default_route" {
32
  api_id    = aws_apigatewayv2_api.api.id
33
  route_key = "GET /"
34
  target    = "integrations/${aws_apigatewayv2_integration.lambda_integration.id}"
35

36
}
37

38
resource "aws_apigatewayv2_stage" "default_stage" {
39
  api_id      = aws_apigatewayv2_api.api.id
40
  name        = "$default"
41
  auto_deploy = true
42
}

db.tf sets up the DynamoDB table with its attributes.

1
resource "aws_dynamodb_table" "db" {
2
  name           = "nicoxmcdportfolio-views"
3
  billing_mode   = "PAY_PER_REQUEST"
4
  hash_key       = "ID"
5

6
  attribute {
7
    name = "ID"
8
    type = "S"
9
  }
10

11
  tags = {
12
    Project = var.domain_name
13
  }
14
}

Another Problem Solved#

Originally I had the initial item `nicoxmcdportfolio-views’ set to 0.

1
resource "aws_dynamodb_table_item" "initial_view_count" {
2
  table_name = aws_dynamodb_table.db.name
3
  hash_key   = "ID"
4
  item       = jsonencode({
5
    ID    = { S = "nicoxmcdportfolio" },
6
    views = { N = "0" }
7
  })
8
}

However, whenever I would make updates to the infrastructure, this number would reset to 0. Which is not ideal. So, I decided to make the initial value manually through the AWS CLI instead.

1
aws dynamodb put-item \
2
  --table-name nicoxmcdportfolio-views \
3
  --item '{"ID": {"S": "nicoxmcdportfolio"}, "views": {"N": "0"}}'

That way, it’s not stored in the Terraform state tf and therefore wouldn’t be changed when updating the infrastructure.

Eventually, I would like to make this an automated process. I want each blog post to have their own ID in the table, so I would need to make a script to do this.

lambda.tf also sets up a role that allows lambda to interact with DynamoDB, this is necessary because OIDC only provides permission for my GitHub repositories to interact with AWS resources. For those resources to interact with each other is a different story and needs its own role.

I also zip the python script for updating the view counter, I found it easier to do it here, than in the workflow.

1
resource "aws_iam_role" "lambda_exec_role" {
2
  name = "lambda_exec_role"
3

4
  assume_role_policy = jsonencode({
5
    Version = "2012-10-17",
6
    Statement = [{
7
      Action = "sts:AssumeRole",
8
      Effect = "Allow",
9
      Principal = {
10
        Service = "lambda.amazonaws.com"
11
      }
12
    }]
13
  })
14
}
15

16
data "archive_file" "lambda" {
17
  type        = "zip"
18
  source_file = "view-counter.py"
19
  output_path = "view-counter.zip"
20
}
21

22
resource "aws_iam_role_policy_attachment" "lambda_dynamodb_access" {
23
  role       = aws_iam_role.lambda_exec_role.name
24
  policy_arn = "arn:aws:iam::aws:policy/AmazonDynamoDBFullAccess"
25
}
26

27
resource "aws_lambda_function" "view_counter" {
28
  function_name = "nicoxmcdportfolio-view-counter"
29
  handler       = "view-counter.lambda_handler"
30
  runtime       = "python3.11"
31
  role          = aws_iam_role.lambda_exec_role.arn
32
  filename      = data.archive_file.lambda.output_path
33

34
  source_code_hash = data.archive_file.lambda.output_base64sha256
35

36
  environment {
37
    variables = {
38
      TABLE_NAME = aws_dynamodb_table.db.name
39
    }
40
  }
41
}

view-counter.py contains the functions code that gets uploaded to Lambda. The script grabs the views value from the ID nicoxmcdportfolio and increments it by one and stores the updated value back in the table. If this is successful, it returns a StatusCode: 200 and the view count.

1
import boto3
2
import json
3
import os
4

5
dynamodb = boto3.resource("dynamodb")
6
table = dynamodb.Table(os.environ["TABLE_NAME"])
7

8
def lambda_handler(event, context):
9
    # Retrieve the current visitor count
10
    item = table.get_item(Key={"ID":"nicoxmcdportfolio"})
11
    views = int(item["Item"]["views"])
12

13
    # Increment the visitor count
14
    views += 1
15

16
    # Update the DynamoDB table with the new count
17
    table.put_item(Item={"ID":"nicoxmcdportfolio", "views": views})
18

19
    return {
20
        "statusCode": 200,
21
        "headers": {
22
            "Content-Type": "application/json"
23
        },
24
        "body": json.dumps({"views": views})
25
    }

Frontend#

I decided to edit the Home button in the navigation bar to be the view-counter. I replaced the original icon and added a <span id="view-counter"></span> inside the original button. With the view-counter id, I can easily update the value to represent the number of views.

1
<a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"> <!-- home button that I wanna replace -->
2
    <div class="flex flex-row text-[var(--primary)] items-center text-md">
3
        <Icon name="fa6-regular:eye" class="text-[1.75rem] mb-1 mr-2" />
4
        <span id="view-counter"></span>
5
    </div>
6
</a>

This is the script for fetching the view count from AWS. It basically just gets the returned value from the python script.

1
<script>
2
async function fetchViewCount() {
3
  try {
4
    const response = await fetch("__VIEW_COUNTER_URL__");
5
    const data = await response.json();
6

7
    const counter = document.getElementById("view-counter");
8
    if (counter) {
9
      counter.textContent = `${data.views}`;
10
    }
11
  } catch (e) {
12
    console.error("Error fetching view count:", e);
13
  }
14
}
15

16
if (document.readyState === "loading") {
17
  document.addEventListener("DOMContentLoaded", fetchViewCount);
18
} else {
19
  fetchViewCount();
20
}
21
</script>

Some Solved Issues:#

Injecting the API URL so it would not be directly in my GitHub repository, to accomplish this, I added it as API_URL in GitHub secrets and referenced it when building the project in the deploy script.

1
- name: Add API URL
2
    run: |
3
      API_URL=${{ secrets.API_URL }}
4
      sed -i "s|__VIEW_COUNTER_URL__|$API_URL|g" src/components/Navbar.astro

Object might be null error, to fix this I implemented a conditional therefore bypassing the error.

1
    const counter = document.getElementById("view-counter");
2
    if (counter) {
3
      counter.textContent = `${data.views}`;
4
    }

Conclusion#

So, the total rundown of this section is that I finally implemented the visitor counter! I successfully configured the API to communicate from the backend to the frontend. This is a great step forward and I’m excited for what’s next.

Reflection#

I found the Javascript the toughest, Javascript is not my strong suit. I think another part that still frustrates me is that I haven’t automated the initial item in the database yet, so I want to go back and fix that up.

For this section, I really like the mod ideas, I want to add a portion to make sure the only unique visitors will be counted as a new visitor. I also noticed that when going to different pages, that because it using the navigation bar component, the visitor counter will update too. So if you explore the website after a while, you’ll have contributed 10+ views. (Thank you, but I should really fix that!)

For the next portion of the challenge, I will move on to automated testing, afterwards I plan to add more of the mods.

News
I will also redo the entire challenge upon completion, because I am changing my name! So, I have to make sure that the infrastructure can be updated easily!