DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.