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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)