0

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;
        }
}

Jon
  • 1
  • 2

0 Answers0