Friday, 6 March 2026

end-to-end guide to host your React UI + Java backend on AWS and point mywebsite.com to AWS so visitors load your site from AWS

 Below is a beginner-friendly, end-to-end guide to host your React UI + Java backend on AWS and point mywebsite.com to AWS so visitors load your site from AWS.

I’ll use a setup that’s popular, low-cost, and easy to maintain:

  • React (UI) → Amazon S3 + CloudFront (CDN)

  • Java (Backend API) → AWS Elastic Beanstalk (runs your Spring Boot/JAR or WAR with minimal ops)

  • Domain + HTTPS → Route 53 + ACM certificates

  • Optional (recommended): mywebsite.com for UI, api.mywebsite.com for backend API

1) What you’re building (simple architecture)

When a user opens mywebsite.com:

  1. CloudFront serves your React static files globally (fast + HTTPS).

  2. React calls your backend at api.mywebsite.com.

  3. Elastic Beanstalk runs your Java app behind a load balancer.

This is a clean separation and avoids mixing static hosting with server APIs.

2) Prerequisites

  • An AWS account

  • Your domain: mywebsite.com (registered anywhere is fine)

  • React project builds correctly locally (npm run build)

  • Java backend packaged (commonly Spring Boot JAR)

3) Deploy the React UI to S3 + CloudFront

Step 3.1 — Build your React app

From your React project folder:

npm install
npm run build

This creates a build/ directory (or dist/ depending on your toolchain).

Step 3.2 — Create an S3 bucket for hosting

In AWS Console → S3 → Create bucket:

  • Bucket name: something like mywebsite-ui-prod-<unique>

  • Region: choose one (any is fine)

  • Block all public access: keep it ON (recommended)

Why keep it private? Because CloudFront can securely access it while the bucket stays private.

Step 3.3 — Upload the build output to S3

You can upload via Console or CLI.

CLI method (recommended):

aws s3 sync build/ s3://YOUR_BUCKET_NAME --delete

Step 3.4 — Create a CloudFront distribution in front of S3

AWS Console → CloudFront → Create distribution:

  • Origin domain: your S3 bucket

  • Origin access: choose Origin Access Control (OAC) (recommended) and let AWS update bucket policy

  • Default root object: index.html

Important for React SPA routing: configure CloudFront to return index.html for unknown paths (so /about works). AWS provides a prescriptive pattern for React SPA on S3 + CloudFront.

4) Deploy the Java backend to Elastic Beanstalk

Elastic Beanstalk is beginner-friendly for Java: you upload your app, and it provisions EC2 + load balancer + scaling.

Step 4.1 — Package your backend

For Spring Boot (Maven), typically:

mvn clean package

You’ll get something like:

  • target/myapp.jar

Elastic Beanstalk’s Java SE platform can run compiled JAR apps directly.

Step 4.2 — Create an Elastic Beanstalk application

AWS Console → Elastic Beanstalk → Create application:

  • Environment: Web server environment

  • Platform: Java

  • Upload your application code (your JAR/WAR)

  • Choose a sample instance type (e.g., t3/t4g small) for dev

After creation, Elastic Beanstalk will give you a URL like:
http://your-env.eba-xyz.region.elasticbeanstalk.com

Step 4.3 — Check your API works

Test:

  • https://your-env.../health or any endpoint you expose

Step 4.4 — CORS (don’t skip)

If your UI runs on https://mywebsite.com and API on https://api.mywebsite.com, you must allow CORS in your backend.

For Spring Boot, configure CORS to allow your frontend domain.

5) Add HTTPS (SSL) certificates with ACM

You’ll want HTTPS on both:

  • mywebsite.com (CloudFront)

  • api.mywebsite.com (Load balancer / EB)

Step 5.1 — Certificate for CloudFront must be in us-east-1

For CloudFront, AWS requires the ACM certificate to be requested/imported in US East (N. Virginia) us-east-1.

So:
AWS Console → Certificate Manager (ACM) → switch region to us-east-1 → Request certificate for:

  • mywebsite.com

  • www.mywebsite.com (optional but common)

Use DNS validation.

Step 5.2 — Certificate for the backend (Elastic Beanstalk LB)

For the backend load balancer, you can request the certificate in the same region where your Elastic Beanstalk environment is running (not necessarily us-east-1). CloudFront’s us-east-1 rule is the special case.

Then attach that cert to the load balancer listener (HTTPS 443). Elastic Beanstalk can manage ALB listeners via configuration, or you can adjust in EC2 Load Balancers depending on how your environment is set up.

6) Point your domain (mywebsite.com) to AWS

You have two common situations:

Option A (easiest): Use Route 53 as your DNS provider

  1. Route 53 → Hosted zones → create hosted zone for mywebsite.com

  2. Update nameservers at your domain registrar to Route 53 NS records

Then create records:

For the UI

Create an A (Alias) record:

  • Name: mywebsite.com

  • Alias to: your CloudFront distribution

Route 53 alias records are the AWS-native way to route apex domains to CloudFront.

(Optional) also:

  • www.mywebsite.com → Alias to same CloudFront distribution

For the API

Create:

  • api.mywebsite.com → Alias/CNAME to the Elastic Beanstalk load balancer DNS name (or EB CNAME)

Option B: Keep DNS at your current provider

If you don’t want Route 53, create DNS records where your DNS is hosted:

  • For UI: point www to CloudFront using CNAME (easy)

  • For apex mywebsite.com: many DNS providers support ALIAS/ANAME at apex. If not, moving DNS to Route 53 is usually simplest.

7) Make the React app call the right backend

Recommended:

  • UI: https://mywebsite.com

  • API: https://api.mywebsite.com

In React, set an environment variable:

.env.production

REACT_APP_API_BASE_URL=https://api.mywebsite.com

Build and redeploy UI after changes.

8) Production checklist (quick but important)

  • CloudFront SPA routing is configured (unknown routes → index.html)

  • HTTPS works on mywebsite.com (ACM cert in us-east-1)

  • Route 53 alias to CloudFront for apex domain

  • Backend has CORS allowing https://mywebsite.com

  • Backend uses HTTPS and you redirect HTTP→HTTPS

  • Add monitoring:

    • CloudWatch logs (EB)

    • CloudFront access logs (optional)

9) Simple CI/CD idea (optional)

Once the manual flow works, automate:

  • UI:

    • GitHub Actions: build → aws s3 sync → CloudFront invalidation

  • Backend:

    • Elastic Beanstalk: deploy new JAR on push (EB CLI or GitHub Actions)

Common beginner mistakes (and fixes)

  1. CloudFront + SSL not working for your domain

    • You likely created the ACM cert in the wrong region.

    • For CloudFront it must be us-east-1

  2. React refresh on /some-route gives 403/404

    • You need SPA routing behavior (serve index.html)

  3. UI can’t call API (CORS error)

    • Fix backend CORS config to allow your UI domain.

at
Labels: ,

No comments:

Post a Comment

Note: only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)