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

#aws #react #nginx #nelsoncode

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:latest

EXPOSE 80

# Frontend with production files

COPY  ./frontend/dist /usr/share/nginx/html

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

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