Im trying to host my personal project on AWS ECS with RDS. Its a simple CRUD Application with React,Express,nginx and RDS for database. I launched 2 ec2 instances with Auto scalling group and deployed a service with 2 tasks, so each task on 1 instance. I also created a load balancer and target group with these 2 instances. When i try to launch the web app with the task ip address it works fine. Both the task ips work fine. But the problem arrises when i try to access the web app via the load balancer. The load balancer loads nothing and lots of errors pop up in the console.
Here are the errors:
- Loading module from “http://elb.us-east-1.elb.amazonaws.com/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=615def3a” was blocked because of a disallowed MIME type (“”).
- Loading module from “http://elb.us-east-1.elb.amazonaws.com/node_modules/.vite/deps/react.js?v=b9988ec1” was blocked because of a disallowed MIME type (“”).
- [vite] failed to connect to websocket. your current setup: (browser) elb.us-east-1.elb.amazonaws.com/ <--[HTTP]--> localhost:5173/ (server) (browser) elb.us-east-1.elb.amazonaws.com:/ <--[WebSocket (failing)]--> localhost:5173/ (server)
One more thing i noticed is, when only one instance with one task is running in a target group the load balancer is able to load the web app successfully.
Heres my task defination:
{
"family": "webapp-td",
"containerDefinitions": [
{
"name": "react"
"image": "public.ecr.aws/"
"cpu": 0,
"portMappings": [
{
"name": "react-5173-tcp",
"containerPort": 5173,
"hostPort": 5173,
"protocol": "tcp",
"appProtocol": "http"
}
],
"essential": true,
"environment": [],
"mountPoints": [],
"volumesFrom": []
},
{
"name": "expressapi",
"image": "public.ecr.aws/",
"cpu": 0,
"portMappings": [
{
"name": "expressapi-3000-tcp",
"containerPort": 3000,
"hostPort": 3000,
"protocol": "tcp",
"appProtocol": "http"
}
],
"essential": true,
"environment": [
{
"name": "PGHOST",
"value": "rds.amazonaws.com"
},
{
"name": "PGPORT",
"value": "5432"
},
{
"name": "PGUSER",
"value": "postgres"
},
{
"name": "PGDATABASE",
"value": "webapp"
},
{
"name": "PGPASSWORD",
"value": "postgres123"
}
],
"mountPoints": [],
"volumesFrom": []
},
{
"name": "nginx",
"image": "public.ecr.aws/",
"cpu": 0,
"links": [
"react",
"expressapi"
],
"portMappings": [
{
"name": "nginx-80-tcp",
"containerPort": 80,
"hostPort": 80,
"protocol": "tcp",
"appProtocol": "http"
}
],
"essential": true,
"environment": [],
"mountPoints": [],
"volumesFrom": []
}
],
"taskRoleArn": "arn:aws:iam:::role/ecsTaskExecutionRole",
"executionRoleArn": "arn:aws:iam:::role/ecsTaskExecutionRole",
"networkMode": "bridge",
"requiresCompatibilities": [
"EC2"
],
"cpu": "256",
"memory": "256",
"runtimePlatform": {
"cpuArchitecture": "X86_64",
"operatingSystemFamily": "LINUX"
}
}
Heres my nginx config:
upstream client {
server react:5173;
}
upstream api {
server expressapi:3000;
}
server {
listen 80;
location / {
proxy_pass http://client;
}
location /api {
rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}