Skip to content

Frontend Stack

The CdkFrontendStack manages the static site hosting and CI/CD pipelines for the React applications.

CI/CD Pipeline

The frontend pipeline builds the artifacts and syncs them to S3.

sequenceDiagram
    participant GitHub
    participant CodePipeline
    participant CodeBuild
    participant S3
    participant CloudFront

    GitHub->>CodePipeline: Push to Branch
    CodePipeline->>CodeBuild: Trigger Build Project
    CodeBuild->>CodeBuild: npm install & build
    CodeBuild->>S3: aws s3 sync (Frontend, Tablet, Booking)
    CodeBuild->>CloudFront: Create Invalidation

Components

  1. Pipeline (daily-desk-frontend-ci-pipeline)

    • Source: Connects to the GitHub repository via CodeStar Connection.
    • Build: Runs frontend-build-project.

  2. Build Project

    • Environment: Linux Standard 5.0.
    • Env Vars: Fetches NX_API_URL and other config from SSM Parameter Store.
    • Actions:
      1. Builds all three apps: frontend, tablet, online-booking.
      2. Syncs the dist/ folders to their respective S3 buckets.
      3. Invalidates the CloudFront distributions to ensure users see the latest version immediately.

3. S3 & CloudFront (External Resources)

The actual hosting resources (S3 Buckets and CloudFront Distributions) are not created by this CDK stack. They are external resources (likely created manually or via legacy stacks) that are referenced via SSM Parameters.

Infrastructure Strategy (External Hosting)

The CdkFrontendStack does NOT provision the S3 buckets or CloudFront distributions. These are stateful external resources managed outside of this stack (via legacy setup or manual creation). The stack simply creates the CodePipeline which deploys artifacts to them.

The target Bucket names and Distribution IDs are injected via SSM Parameters (sourced from configmaps).

Resource Inventory by Environment

Development (us-east-1)

Application S3 Bucket (Console Link) CloudFront Distribution (Console Link)
Main Web frontend-dev.dailydesk.com E1FJOMJWXITAUF
Tablet tablet-dev.dailydesk.com E1GMLWADZK38CV
Booking booking-dev.dailydesk.com E15X83WID28C00

Production (us-east-1)

Application S3 Bucket (Console Link) CloudFront Distribution (Console Link)
Main Web system.dailydesk.com E3UUY4WMI1YXKG
Tablet tablet.dailydesk.com E227NJ13RL1CVW
Booking booking.dailydesk.com E1BQPN1ROG2I8O

Certificate Management (HTTPS)

All CloudFront distributions use a single Wildcard Certificate stored in AWS Certificate Manager (ACM).

  • Domains: *.dailydesk.com
  • Type: Amazon Issued (Public)
  • Region: us-east-1 (Required for CloudFront)
  • ARN: ...ff452ea2ab5e

Configuration Details

  • S3 Access: Buckets are Public (BlockPublicAccess: false) with a Bucket Policy allowing s3:GetObject for Principal: "*".
  • Hosting: Static Website Hosting is Disabled on S3. CloudFront uses the S3 REST API endpoint.
  • Origin: CloudFront points to the S3 REST endpoint.

ConfigMap Reference

To change which Bucket/Distribution this stack targets, update configmaps/configmap.{env}.json: 

{
  "parameterName": "s3/website-bucket-name",
  "value": "frontend-dev.dailydesk.com"
},
{
  "parameterName": "cloudfront/distribution-id",
  "value": "E1FJOMJWXITAUF"
}