AWS S3 + CloudFront Deployment Guide

This document explains how to deploy the UBA-Pilot frontend to AWS S3 and serve it globally via CloudFront.

There are four deployment options:

  • Manual build & upload to S3

  • Manual build & push via AWS CLI

  • GitHub Actions pipeline (auto-deployment)

  • Hybrid option (manual trigger but automated pipeline)

⚠️ Before deploying, you need to complete the AWS setup below.

1. AWS Setup (Common for All Options)

1.1 Create an S3 Bucket

👉 Create S3 Bucket

  • Enter a unique bucket name and choose the region.

  • Uncheck “Block all public access” if you plan to serve static files publicly.

  • Click Create bucket.

1.2 Enable Static Website Hosting

👉 Enable Static Website Hosting

  • Set:

    • Index document: index.html

    • Error document: index.html (important for SPA routing)

1.3 Set Up CloudFront Distribution

👉 Create CloudFront Distribution

  • Select your S3 bucket as the origin.

  • Set Viewer Protocol Policy → Redirect HTTP to HTTPS.

  • Set Default Root Object → index.html.

  • Enable Origin Access Control (OAC) to restrict direct S3 access (recommended).

1.4 (Optional) Configure Custom Domain & SSL

👉 Request ACM Certificate

  • Go to Route 53 Hosted Zones → create an ALIAS or CNAME record pointing to CloudFront.

  • Attach an ACM SSL certificate (must be in us-east-1 for CloudFront).

  • Update CloudFront → include the Alternate Domain Name (CNAME).

1.5 Invalidate CloudFront Cache

👉 CloudFront Invalidations

  • Whenever you deploy new frontend assets, invalidate the cache.

2. Manual Build & Upload to S3 (AWS Console)

  • Build frontend locally:

yarn install
yarn build

  • Output folder: dist/ or build/.

  • Open your bucket → Upload all files from the dist/ folder. 👉 Go to S3 Buckets

  • Invalidate CloudFront cache (see step 1.5).

✅ Your frontend is updated.

3. Manual Build & Push Code to S3 (AWS CLI)

  • Build frontend locally:

yarn install
yarn build

  • Install AWS CLI (if not installed):

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install --update

👉 AWS CLI Install Guide

  • Configure AWS credentials:

aws configure
# Provide AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, region

  • Sync build to S3:

aws s3 sync dist s3://<bucket-name>/ --delete

  • Invalidate CloudFront cache:

aws cloudfront create-invalidation \
  --distribution-id <DISTRIBUTION_ID> \
  --paths "/*"

👉 AWS CLI Command Reference: create-invalidation

4. GitHub Actions: Automated Deployment

Tag-based deployment pipeline automatically builds and deploys the frontend to S3 & CloudFront.

Workflow: .github/workflows/deploy.yml (Your workflow as provided — unchanged)

How to deploy:

  1. Commit changes.

  2. Create a version tag:

git tag v1.0.0
git push origin v1.0.0

GitHub Actions will:

  • Build the frontend

  • Push artifacts to S3

  • Update CloudFront

  • Notify on Slack

✅ Fully automated. 👉 GitHub Actions Documentation

5. Hybrid: Manual Trigger of Pipeline (Optional)

Update workflow with:

on:
  workflow_dispatch:   # Manual trigger

Then:

  • Go to GitHub → Actions → Deploy to UBA-Pilot → Run workflow 👉 Run Workflow

  • Select environment (pilot/staging/prod).

The pipeline executes the same steps as automated tag deployment.

PreviousFrontend Deployment Guide

Last updated