Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 11, 2022 01:15 am GMT

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 80COPY  ./frontend/dist /usr/share/nginx/html

Publish Image to Docker Hub

# BUILD FRONTENDcd ./frontend && npm run builddocker login -u $DOCKER_USER -p $DOCKER_PASSWORDdocker build . -t $DOCKER_USER/react-app:latestdocker 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-1aws ecs register-task-definition --cli-input-json file://task-definition.json

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


Original Link: https://dev.to/nelsoncode/how-to-deploy-react-nginx-on-aws-ecs-fargate-24e8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To