Skip to content

Plan.md

Latest commit

 

History

History
58 lines (45 loc) · 3.95 KB

Plan.md

File metadata and controls

58 lines (45 loc) · 3.95 KB

Step 1: Prepare the Vite repo

  • Create/confirm a Vite app builds successfully and produces dist/ output (Vite's default build output directory is dist).
  • Add a buildspec.yml to the repo root so CodeBuild knows how to build and what to publish; use artifacts.base-directory to point at dist.
  • Add a visible "version" string (or change text) in the UI so each commit can be verified on the live site.

Step 2: Create the GitHub connection

  • In Terraform, create an aws_codestarconnections_connection (CodeConnections) for GitHub.
  • After the resource exists, complete the required one-time authorization/installation step in AWS so the connection becomes active for CodePipeline use.

Step 3: Provision S3 buckets and IAM (Terraform)

  • Create two private buckets:
    • artifact_bucket: For CodePipeline artifacts (private).
    • website_bucket: For website content (fully private — no static website hosting, no public access). signiance
  • Do NOT enable static website hosting on the website bucket (CloudFront will serve the content instead).
  • Create IAM roles:
    • CodePipeline role: Access to artifact bucket, permission to use the GitHub connection, permission to run CodeBuild, and permission to deploy to the website bucket.
    • CodeBuild role: Permission for logs + read/write artifacts.

Step 4: Create CloudFront + Origin Access Control (OAC) (Terraform)

  • Create an aws_cloudfront_origin_access_control resource:
    • signing_behavior = "always"
    • signing_protocol = "sigv4" (modern, short-lived credentials). aws.amazon
  • Create an aws_cloudfront_distribution pointing to the private S3 website bucket:
    • Configure the OAC as the origin identity.
    • Set cache behaviors with appropriate TTLs.
    • Enable HTTPS and HTTP/2.
  • Create an aws_s3_bucket_policy that:
    • Restricts s3:GetObject to CloudFront only.
    • Uses condition aws:SourceArn matching the distribution ARN. dev
  • Block public access on the website bucket (all four options set to true). signiance

Step 5: Create CodeBuild project (Terraform)

  • Create an aws_codebuild_project that uses source type CODEPIPELINE and reads buildspec.yml from the source artifact (repo).
  • Ensure the build artifact output is the Vite build directory by setting artifacts in the buildspec with base-directory: dist and files: '**/*'.

Step 6: Create CodePipeline with CloudFront Invalidation (Terraform)

  • Create an aws_codepipeline with 4 stages (updated from 3):
    • Source stage (GitHub): Use CodeStarSourceConnection with ConnectionArn, FullRepositoryId (owner/repo, case-sensitive), and BranchName.
    • Build stage (CodeBuild): Input is SourceOutput, output is BuildOutput.
    • Deploy stage (S3): Use S3 deploy action configured with BucketName and Extract=true to upload files to the private bucket.
    • NEW — Invalidation stage (CloudFront): Use CloudFront invalidate cache action to clear the distribution cache (/* path) after deployment. youtube

Step 7: Validate end-to-end

  • Run terraform apply, then commit a change to the configured branch and confirm the pipeline triggers.
  • Confirm:
    • CodeBuild produces a build artifact.
    • Deploy stage uploads files to the private S3 bucket.
    • CloudFront invalidation clears cache.
    • Direct S3 URL access returns 403 Forbidden. youtube
    • CloudFront domain URL (e.g., d1234.cloudfront.net) loads the React app securely via HTTPS.
    • The visible version/text change appears on the CloudFront domain (not S3 URL).