Guides

React App साठी AWS वर CI/CD कसे सेटअप करावे

By Ravindra Bagale, DevOps trainer · LinkedIn · Published: 28 October 2026 · Last updated: 28 October 2026

React build, S3 sync, CloudFront invalidate, curl. OIDC पसंत.

Language: English · मराठी · हिंदी

हा मार्ग का

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.

Check yourself (quiz)

build → sync → invalidate → curl. Did you understand? Let us try it once more.