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

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

Dockerfile

FROM nginx:latestEXPOSE 80
# Frontend with production files
COPY ./frontend/dist /usr/share/nginx/html

Publish Image to Docker Hub

# BUILD FRONTENDcd ./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

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"]
}

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

Create cluster (FARGATE)

Cluster name and create VPC

Select Type, Task definition, service name and number tasks

Configure network

Verify status

App in production

GitHub Repository

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store