DEV Community

Cover image for How to deploy React + Nginx on AWS ECS (FARGATE)
Nelson Hernández
Nelson Hernández

Posted on

5 2

How to deploy React + Nginx on AWS ECS (FARGATE)

For this example I will use Vite to create the React project



npm create vite@latest frontend -- --template react-ts

Enter fullscreen mode Exit fullscreen mode




Project folders




├── Dockerfile
├── frontend
│ ├── index.html
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.tsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
└── task-definition.json

Enter fullscreen mode Exit fullscreen mode




Dockerfile




FROM nginx:latest

EXPOSE 80
# Frontend with production files
COPY ./frontend/dist /usr/share/nginx/html

Enter fullscreen mode Exit fullscreen mode




Publish Image to Docker Hub




# BUILD FRONTEND

cd ./frontend && npm run build && cd ..

docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
docker build . -t $DOCKER_USER/react-app:latest

docker push $DOCKER_USER/react-app:latest

Enter fullscreen mode Exit fullscreen mode




Task Definition

task-definition.json



{
"containerDefinitions": [
{
"essential": true,
"name": "app",
"image": "nelsoncode/react-app:latest",
"portMappings": [
{
"containerPort": 80,
"hostPort": 80,
"protocol": "tcp"
}
]
}
],
"cpu": "256",
"family": "fargate-task-definition",
"memory": "512",
"networkMode": "awsvpc",
"runtimePlatform": {
"operatingSystemFamily": "LINUX"
},
"requiresCompatibilities": ["FARGATE"]
}
Enter fullscreen mode Exit fullscreen mode




Register Task Definition




export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=
export AWS_DEFAULT_REGION=us-west-1

aws ecs register-task-definition --cli-input-json file://task-definition.json

Enter fullscreen mode Exit fullscreen mode




Create cluster (FARGATE)

Create cluster (FARGATE)

Cluster name and create VPC

Cluster name and create VPC

Select Type, Task definition, service name and number tasks

Select Type, Task definition and service name

task definition

Configure network

Configure network cluster AWS ECS

Verify status

verify status

App in production

ECS FARGATE WITH REACT JS AND NGINX

GitHub Repository

https://github.com/NelsonCode/aws-ecs-fargate-nginx-react

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay