An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
August 11, 2022 01:15 am GMT
Original Link: https://dev.to/nelsoncode/how-to-deploy-react-nginx-on-aws-ecs-fargate-24e8
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)
Cluster name and create VPC
Select Type, Task definition, service name and number tasks
Configure network
Verify status
App in production
GitHub Repository
Original Link: https://dev.to/nelsoncode/how-to-deploy-react-nginx-on-aws-ecs-fargate-24e8
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To