Guides
React App के लिए AWS पर CI/CD कैसे सेटअप करें
By Ravindra Bagale, DevOps trainer · LinkedIn · Published: · Last updated:
React build, S3 sync, CloudFront invalidate, curl। OIDC पसंद।
Friends, React static files love S3 plus CloudFront. Chala mitrano — build on push, sync, invalidate, verify.
मित्रांनो, React static files S3 + CloudFront प्रेम करतात. Chala mitrano — push वर build, sync, invalidate, verify.
मित्रों, React static files S3 + CloudFront पसंद करते हैं। Chala mitrano — push पर build, sync, invalidate, verify।
Quick answer
Hold this vertical picture:
- Local build।
- Workflow।
- Sync।
- Invalidate।
- curl+OIDC।
Language: English · मराठी · हिंदी
React CI/CD on AWS
यह मार्ग क्यों
React build के बाद static — S3+CloudFront Infosys client pattern।
Why: हर push पर deploy।
What: build → sync → invalidate।
How: Workflow sketch।
Example 1: Local production build
Type this:
printf "%s\n" "npm ci" "npm run build" "ls dist | head"
You will see:
npm ci
npm run build
ls dist | head
What it means: CI must run the same clean install and build your laptop uses.
Example 2: Workflow sketch (no secrets in file)
Type this:
mkdir -p /tmp/react-ci/.github/workflows && printf "%s\n" "name: deploy-react" "on:" " push:" " branches: [main]" "jobs:" " build-deploy:" " runs-on: ubuntu-latest" " steps:" " - uses: actions/checkout@v4" " - run: npm ci && npm run build" " - run: aws s3 sync dist/ s3://APP_BUCKET/ --delete" " - run: aws cloudfront create-invalidation --distribution-id DIST_ID --paths /*" > /tmp/react-ci/.github/workflows/deploy.yml && wc -l /tmp/react-ci/.github/workflows/deploy.yml
You will see:
16 /tmp/react-ci/.github/workflows/deploy.yml
What it means: Skeleton only — replace APP_BUCKET and DIST_ID; prefer OIDC role assumption over stored keys.
Example 12: React AWS card
Type this:
printf "%s\n" "1 npm ci build 2 s3 sync 3 invalidate 4 curl verify 5 OIDC not long keys"
You will see:
1 npm ci build 2 s3 sync 3 invalidate 4 curl verify 5 OIDC not long keys
What it means: Memorize for CI/CD interviews.
Concept 1: Build+sync
CI dist बनाती है; sync upload।
Why: समान artifacts।
What: npm ci; s3 sync
How: --delete सावधानी।
Example 1: Local production build
Type this:
printf "%s\n" "npm ci" "npm run build" "ls dist | head"
You will see:
npm ci
npm run build
ls dist | head
What it means: CI must run the same clean install and build your laptop uses.
Example 4: Sync command meaning
Type this:
printf "%s\n" "aws s3 sync dist/ s3://APP_BUCKET/ --delete"
You will see:
aws s3 sync dist/ s3://APP_BUCKET/ --delete
What it means: --delete removes old assets not in dist — careful on shared buckets.
Example 8: Cache node modules (optional)
Type this:
printf "%s\n" "actions/setup-node with cache: npm speeds CI"
You will see:
actions/setup-node with cache: npm speeds CI
What it means: Faster pipelines without changing the build result.
Concept 2: CloudFront/SPA
Cache और deep links।
Why: नया JS; index.html errors।
What: invalidate; curl
How: Verify।
Example 5: Invalidate edge cache
Type this:
printf "%s\n" "aws cloudfront create-invalidation --distribution-id DIST_ID --paths /*"
You will see:
aws cloudfront create-invalidation --distribution-id DIST_ID --paths /*
What it means: Without invalidation users may see old JS for minutes or hours.
Example 9: Verify after deploy
Type this:
printf "%s\n" "curl -I https://www.example.com" "curl -s https://www.example.com | head"
You will see:
curl -I https://www.example.com
curl -s https://www.example.com | head
What it means: Check status and that new bundle hashes appear.
Example 11: SPA routing note
Type this:
printf "%s\n" "CloudFront error pages: 403/404 -> /index.html for client routers"
You will see:
CloudFront error pages: 403/404 -> /index.html for client routers
What it means: React Router deep links need this when using S3 origin.
Concept 3: Security
OIDC; rollback योजना।
Why: Deploy auth।
What: OIDC; versioning
How: Reviewers।
Example 3: S3 bucket for static site notes
Type this:
printf "%s\n" "Block public access appropriately" "Origin Access Control to CloudFront" "Versioning optional for rollback"
You will see:
Block public access appropriately
Origin Access Control to CloudFront
Versioning optional for rollback
What it means: Do not open the bucket to the world if CloudFront is the front door.
Example 6: OIDC note
Type this:
printf "%s\n" "Prefer role assumption via OIDC" "Avoid long-lived AWS keys in repository secrets when policy allows"
You will see:
Prefer role assumption via OIDC
Avoid long-lived AWS keys in repository secrets when policy allows
What it means: Interviewers at Amazon-style teams ask this.
Example 7: Environment protection
Type this:
printf "%s\n" "Use a production environment with required reviewers for main deploys"
You will see:
Use a production environment with required reviewers for main deploys
What it means: Pairs with the manual approval guide later in this series.
Example 10: Rollback idea
Type this:
printf "%s\n" "Keep previous dist in S3 versioning or redeploy last known good tag"
You will see:
Keep previous dist in S3 versioning or redeploy last known good tag
What it means: Plan rollback before peak sale days like Flipkart Big Billion style events.
React AWS card
1 build 2 sync 3 invalidate 4 curl 5 OIDC
Suppose: Blank page
Invalidation/path।
Suppose: Deep link 404
Error pages → index.html।
Ravindra Bagale's Tip
Infosys and TCS front-end pipelines often use OIDC to AWS — no long-lived access keys in the workflow.
Infosys/TCS front-end pipelines अनेकदा OIDC वापरतात — workflow मध्ये long-lived keys नाहीत.
Infosys/TCS front-end pipelines अक्सर OIDC इस्तेमाल करते हैं — workflow में long-lived keys नहीं।
Check yourself (quiz)
Q1. S3+CF?
Static edge serve
Q2. Invalidate?
पुराना JS मिटाएँ
Q3. OIDC?
Short-lived role
Q4. SPA?
404→index.html
Q5. Verify?
curl
Q6. Rollback?
versioning/redeploy
Reading tracking
Mark this guide when you finish. Your browser remembers it on this device.
build → sync → invalidate → curl.
Did you understand? Let us try it once more.
Frequently asked questions
Why S3 and CloudFront?
Static hosting at the edge after npm build.
Why invalidate?
Old JS may stay cached without it.
OIDC?
Short-lived role assumption instead of long-lived keys.
SPA 404 fix?
Map CloudFront errors to /index.html.
Verify?
curl -I and check the page.
Rollback?
S3 versioning or redeploy last good build.