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.