Cloud Resume Challenge - Infrastructure & Frontend

You’re experiencing this project right now: Home

NOTE
Instead of creating the project through the console, then converting it to use IaC later on, I started with creating the infrastructure through Terraform.

Frontend#

For the frontend I decided to go with Astro, and I ended up using this template. It was by far, the most intuitive one that I could find.

I also decided to go with Astro so that I could gain exposure to a new tool, and it is very interesting. Astro uses Islands architecture, so instead of rendering the entire website with Javascript, you render some select components, making the user experience smoother and more seamless.

I also decided not to re-invent the wheel, which is why I went with a pre-made template. I wanted my project to focus more on DevOps rather than focusing on the many intricate choices for the frontend.

Some changes I made to the website was adding more pages which involved creating new astro source files that utilize the prebuilt layouts and components. By doing so, I also had to update multiple config.ts files to allow the navigation bar to navigate between the extra files.

Some thing I plan to add is adding a language option. I currently have English, Spanish, Korean, and German as my four language options in the source files, but I need to create functions and UI to allow the user to pick.

Infrastructure as Code#

I chose to go with Terraform instead of CloudFormation for a couple of different reasons:

Terraform is cloud-agnostic, so if I wanted to deploy this project on Azure or GCP then I could add them as a provider and make some adjustments following Terraform’s documentation.
Although I know AWS the best, I don’t want to be siloed, I want my skills to be transferrable to any cloud provider.
HashiCorp Configuration Language (HCL) is very readable and more intuitive.
There is also the ability to preview changes through Terraform Plan which I added as an option to my automation.
Terraform is industry relevant and provides flexibility

The learning curve was a bit difficult, I went with no experience in Terraform, but by the end I was able to debug and adjust as necessary.

I keep my IaC in my Cloud repository:

nicoxmcd

cloud

Waiting for api.github.com...

00K

Waiting...

backend.tf basically supplies terraform with information to access the state file. That way I don’t have to import each resource individually and it also prevents duplication and other potential issues (all of which I’ve run into)!

1
terraform {
2
  backend "s3" {
3
    bucket         = "nicoxmcdportfolio-tfstate"
4
    key            = "terraform.tfstate"
5
    region         = "us-east-1"
6
    dynamodb_table = "terraform-locks"
7
    encrypt        = true
8
  }
9
}

terraform.tfvars sets up the project’s input variable values: domain_name and bucket_name that way I can reuse this across environments.

1
domain_name = "nicoxmcd.com"
2
bucket_name = "nicoxmcdportfolio"

variables.tf defines input variables for the domain_name, bucket_name, and region, while also providing descriptions and default values to make the configuration a bit more flexible.

1
variable "domain_name" {
2
  type = string
3
  description = "Name of the domain"
4
}
5
variable "bucket_name" {
6
  type = string
7
  description = "Name of the bucket."
8
}
9
variable "region" {
10
    type = string
11
    default = "us-east-1"
12
}

provider.tf specifies the required Terraform provider (AWS) and configures it to use us-east-1 region.

1
terraform {
2
  required_providers {
3
    aws = {
4
      source = "hashicorp/aws"
5
      version = "6.0.0"
6
    }
7
  }
8
}
9

10
provider "aws" {
11
  region = "us-east-1"
12
}

s3.tf creates an S3 bucket to host nicoxmcdportfolio and configures it as a static website, defining the index_document and error_document.

1
resource "aws_s3_bucket" "portfolio" {
2
  bucket = "${var.bucket_name}"
3
  tags = {
4
    Project = var.domain_name
5
  }
6
}
7

8
resource "aws_s3_bucket_website_configuration" "website_config" {
9
  bucket = aws_s3_bucket.portfolio.bucket
10

11
  index_document {
12
    suffix = "index.html"
13
  }
14

15
  error_document {
16
    key = "404.html"
17
  }
18
}

versioning.tf enables versioning on the S3 bucket and sets up a lifecycle rule to delete noncurrent versions after 30 days, which improves data durability and cost efficiency.

1
resource "aws_s3_bucket_versioning" "versioning" {
2
  bucket = aws_s3_bucket.portfolio.id
3

4
  versioning_configuration {
5
    status = "Enabled"
6
  }
7
}
8

9
resource "aws_s3_bucket_lifecycle_configuration" "versioning_lifecycle" {
10
  bucket = aws_s3_bucket.portfolio.id
11

12
  rule {
13
    id     = "expire-noncurrent-versions"
14
    status = "Enabled"
15

16
    filter {}
17

18
    noncurrent_version_expiration {
19
      noncurrent_days = 30
20
    }
21
  }
22
}

policy.tf configures the S3 bucket to allow public read access, enables cross-origin requests (CORS), sets ownership controls, and adjusts public access settings to allow website hosting.

1
resource "aws_s3_bucket_policy" "bucket_policy" {
2
  bucket = aws_s3_bucket.portfolio.bucket
3

4
  policy = jsonencode({
5
    Version = "2012-10-17",
6
    Statement = [
7
      {
8
        Sid       = "AllowPublicRead",
9
        Effect    = "Allow",
10
        Principal = "*",
11
        Action    = "s3:GetObject",
12
        Resource  = [
13
          "${aws_s3_bucket.portfolio.arn}",
14
          "${aws_s3_bucket.portfolio.arn}/*"
15
          ]
16
      }
17
    ]
18
  })
19
  depends_on = [ aws_s3_bucket_public_access_block.public_access ]
20
}
21

22
resource "aws_s3_bucket_ownership_controls" "ownership" {
23
  bucket = aws_s3_bucket.portfolio.bucket
24

25
  rule {
26
    object_ownership = "BucketOwnerPreferred"
27
  }
28
  depends_on = [aws_s3_bucket_public_access_block.public_access]
29
}
30

31
resource "aws_s3_bucket_acl" "acl" {
32
  bucket = aws_s3_bucket.portfolio.bucket
33
  acl    = "public-read"
34
  depends_on = [aws_s3_bucket_ownership_controls.ownership]
35
}
36

37
resource "aws_s3_bucket_public_access_block" "public_access" {
38
  bucket = aws_s3_bucket.portfolio.bucket
39

40
  block_public_acls       = false
41
  block_public_policy     = false
42
  ignore_public_acls      = false
43
  restrict_public_buckets = false
44
}
45

46
resource "aws_s3_bucket_cors_configuration" "cors" {
47
  bucket = aws_s3_bucket.portfolio.bucket
48
  cors_rule {
49
    allowed_headers = ["Authorization", "Content-Length"]
50
    allowed_methods = ["GET", "POST"]
51
    allowed_origins = ["https://${var.domain_name}","https://www.${var.domain_name}"]
52
    max_age_seconds = 3000
53
  }
54
}

route53.tf creates a Route 53 hosted zone for the domain and sets up DNS records to route both the root domain and www subdomain to the CloudFront distribution.

1
resource "aws_route53_zone" "main" {
2
  name = var.domain_name
3

4
  tags = {
5
    Project = var.domain_name
6
  }
7
}
8

9
# Alias using DNS records pointing to CloudFront not directly to S3
10
# Direct www.nicoxmcd.com to www.nicoxmcd.com
11
resource "aws_route53_record" "www_a" {
12
  zone_id = aws_route53_zone.main.zone_id
13
  name    = "www.${var.domain_name}"
14
  type    = "A"
15

16
  alias {
17
    name    = aws_cloudfront_distribution.cdn.domain_name
18
    zone_id = aws_cloudfront_distribution.cdn.hosted_zone_id
19
    evaluate_target_health = false
20
  }
21
}
22

23
# Redirect apex (nicoxmcd.com) to www.nicoxmcd.com
24
resource "aws_route53_record" "apex_redirect" {
25
  zone_id = aws_route53_zone.main.zone_id
26
  name    = var.domain_name
27
  type    = "A"
28

29
  alias {
30
    name                   = aws_cloudfront_distribution.cdn.domain_name
31
    zone_id                = aws_cloudfront_distribution.cdn.hosted_zone_id
32
    evaluate_target_health = false
33
  }
34
}

cloudfront.tf creates a CloudFront distribution that cahces and serves the S3-hosted site over HTTPS, using a custom domain and an ACM SSL certificate with error handling and optimization settings.

1
resource "aws_cloudfront_distribution" "cdn" {
2
  origin {
3
    domain_name = aws_s3_bucket_website_configuration.website_config.website_endpoint
4
    origin_id   = "S3-${aws_s3_bucket.portfolio.bucket}"
5

6
    custom_origin_config {
7
      http_port              = 80
8
      https_port             = 443
9
      origin_protocol_policy = "http-only" # required for S3 static website hosting
10
      origin_ssl_protocols   = ["TLSv1", "TLSv1.1", "TLSv1.2"]
11
    }
12
  }
13

14
  enabled             = true
15
  is_ipv6_enabled     = true
16
  comment             = "CloudFront distribution for ${aws_s3_bucket.portfolio.bucket}"
17
  default_root_object = "index.html"
18

19
  aliases = [ "${var.domain_name}","www.${var.domain_name}" ]
20

21
  custom_error_response {
22
    error_caching_min_ttl = 0
23
    error_code            = 404
24
    response_code         = 200
25
    response_page_path    = "/404.html"
26
  }
27

28
  default_cache_behavior {
29
    allowed_methods        = ["GET", "HEAD", "OPTIONS"]
30
    cached_methods         = ["GET", "HEAD"]
31
    target_origin_id       = "S3-${aws_s3_bucket.portfolio.bucket}"
32
    viewer_protocol_policy = "redirect-to-https"
33

34
    forwarded_values {
35
      query_string = false
36
      cookies {
37
        forward = "none"
38
      }
39
    }
40
    min_ttl                = 31536000
41
    default_ttl            = 31536000
42
    max_ttl                = 31536000
43
  }
44

45
  price_class = "PriceClass_100"
46

47
  restrictions {
48
    geo_restriction {
49
      restriction_type = "none"
50
    }
51
  }
52

53
  viewer_certificate {
54
    acm_certificate_arn      = aws_acm_certificate_validation.cert_validation.certificate_arn
55
    ssl_support_method       = "sni-only"
56
    minimum_protocol_version = "TLSv1.2_2021"
57
  }
58

59
  tags = {
60
    Project = var.domain_name
61
  }
62
}

certificate.tf requests an ACM SSL certificate for the domain and its www subdomain, using DNS validation to prove domain ownership.

1
resource "aws_acm_certificate" "cert" {
2
  domain_name       = "${var.domain_name}"
3
  subject_alternative_names = ["www.${var.domain_name}"]
4
  validation_method = "DNS"
5

6
  tags = {
7
    Project = var.domain_name
8
  }
9

10
  lifecycle {
11
    create_before_destroy = true
12
  }
13
}

validation.tf creates DNS records in Route53 to validate the ACM certificate via DNS, and completes the certificate validation process needed for CloudFront to serve HTTPS traffic.

1
resource "aws_route53_record" "cert_validation" {
2
  allow_overwrite = true
3
  name    = tolist(aws_acm_certificate.cert.domain_validation_options)[0].resource_record_name
4
  type    = tolist(aws_acm_certificate.cert.domain_validation_options)[0].resource_record_type
5
  records = [tolist(aws_acm_certificate.cert.domain_validation_options)[0].resource_record_value]
6
  zone_id = aws_route53_zone.main.zone_id
7
  ttl     = 300
8
}
9

10
resource "aws_route53_record" "cert_validation_www" {
11
  allow_overwrite = true
12
  name            = tolist(aws_acm_certificate.cert.domain_validation_options)[1].resource_record_name
13
  type            = tolist(aws_acm_certificate.cert.domain_validation_options)[1].resource_record_type
14
  records         = [tolist(aws_acm_certificate.cert.domain_validation_options)[1].resource_record_value]
15
  zone_id         = aws_route53_zone.main.zone_id
16
  ttl             = 300
17
}
18

19
resource "aws_acm_certificate_validation" "cert_validation" {
20
  certificate_arn         = aws_acm_certificate.cert.arn
21
  validation_record_fqdns = [
22
    aws_route53_record.cert_validation.fqdn,
23
    aws_route53_record.cert_validation_www.fqdn
24
  ]
25
}

Automation and CI/CD#

The first issues I had when deploying the infrastructure was originally not maintaining a state file or importing the resources. Terraform would recreate each resource every time you ran the workflow. It was resolved by importing the specific resources, that way Terraform would recognize that those resources do not need to be created, just updated. I went back and implemented a state file by manually creating a new S3 bucket nicoxmcdportfolio-tfstate and a DynamoDB table for locking terraform-locks.

Frontend#

The frontend is deployed directly from its repository upon any changes made to the main branch. deploy.yml configures OpenID Connection (OIDC) to AWS which allows the repository to update resources in AWS using a predefined role. The role in AWS only allows these requests from the main branches of nicoxmcd/nicoxmcdportfolio and nicoxmcd/Cloud. I run a check for Astro to ensure that Astro is configured correctly, if so, it then builds the project, which creates a /dist folder with all of the built .html files. From there I sync the /dist folder to my nicoxmcdportfolio S3 bucket.

1
name: Deploy Static Site
2

3
on:
4
    push:
5
      branches:
6
        - 'main'
7
    workflow_dispatch:
8

9
env:
10
  AWS_REGION : "us-east-1"
11
  BUCKET_NAME: nicoxmcdportfolio
12

13
permissions:
14
      id-token: write   # This is required for requesting the JWT
15
      contents: read    # This is required for actions/checkout
16

17
jobs:
18
  Deploy:
19
    runs-on: ubuntu-latest
20
    steps:
21
      - name: Configure AWS Credentials
22
        uses: aws-actions/configure-aws-credentials@v4
23
        with:
24
          role-to-assume: ${{ secrets.ROLE_DEPLOY }}
25
          role-session-name: GitHub_to_AWS_via_FederatedOIDC
26
          aws-region: ${{ env.AWS_REGION }}
27

28
      - uses: pnpm/action-setup@v4
29
        name: Install pnpm
30
        with:
31
          version: 10
32
          run_install: false
33

34
      - name: Install Node.js
35
        uses: actions/setup-node@v4
36
        with:
37
          node-version: 22
38

39
      - name: Checkout Repository
40
        uses: actions/checkout@v4
41

42
      - name: Install Dependencies
43
        run: pnpm install --no-frozen-lockfile
44

45
      - name: Run Astro Check
46
        run: pnpm astro check
47

48
      - name: Run Astro Build
49
        run: pnpm astro build
50

51
      - name: Deploy to S3
52
        run: |
53
          aws s3 sync dist/ s3://${{ env.BUCKET_NAME }}

nicoxmcd

nicoxmcdportfolio

Waiting for api.github.com...

00K

Waiting...

IaC#

The infrastructure is deployed directly from the Cloud repository via a workflow_dispatch with an option for only generating the Terraform plan (which is automatically True).

GitHub Workflow dispatch

terraform.yml configures OpenID Connection (OIDC) to AWS which allows the repository to update resources in AWS using a predefined role. We initialize the Terraform project, I then set up the Terraform plan. From there, if Terraform Plan Only is False, then it will apply the plan and invalidate the CloudFront cache.

1
name: Deploy Terraform
2
run-name: Deploy ${{ inputs.project }} with ${{ inputs.resource }} resource(s)
3

4
on:
5
  workflow_dispatch:
6
    inputs:
7
      project:
8
        description: 'Which project are we deploying?'
9
        required: true
10
        type: choice
11
        options:
12
          - nicoxmcdportfolio
13
      dry_run:
14
        description: 'True for PLAN ONLY'
15
        required: true
16
        default: true
17
        type: boolean
18

19
permissions:
20
      id-token: write   # This is required for requesting the JWT
21
      contents: read    # This is required for actions/checkout
22

23
jobs:
24
  Terraform:
25
    runs-on: ubuntu-latest
26
    defaults:
27
      run:
28
        shell: bash
29
        working-directory: ./Terraform/${{ inputs.project }}
30

31
    steps:
32
    - name: Checkout code
33
      uses: actions/checkout@v4
34

35
    - name: Set up Terraform
36
      uses: hashicorp/setup-terraform@v3
37
      with:
38
        terraform_version: 1.8.0
39

40
    - name: Configure AWS Credentials
41
      uses: aws-actions/configure-aws-credentials@v4
42
      with:
43
        role-to-assume: ${{ secrets.ROLE_DEPLOY }}
44
        role-session-name: GitHub_to_AWS_via_FederatedOIDC
45
        aws-region: us-east-1
46

47
    - name: Terraform Init
48
      run: terraform init
49

50
    - name: Terraform Plan
51
      run: |
52
        terraform plan
53

54

55
    - name: Terraform Apply
56
      if: ${{ inputs.dry_run == false }}
57
      run: |
58
        terraform apply -auto-approve
59

60
    - name: Invalidate CloudFront Cache
61
      if: ${{ inputs.dry_run == false }}
62
      run: |
63
        aws cloudfront create-invalidation \
64
          --distribution-id E2XW953XY0MSBC \
65
          --paths "/*"

nicoxmcd

cloud

Waiting for api.github.com...

00K

Waiting...

Reflection
Later on, I want to continue using the one terraform.yml workflow for all my project, so I want to use configuration as code with JSON or YAml to define the CloudFront distribution instead of hard coding it into the workflow