如何将 AWS 弹性负载均衡器与 React HTML5 页面一起使用

Question

I have an React-app web site that plays HTML5 video hosted on EC2. I have two instances running and I can view the web page on each of the two instances. If I set up an ELB that points to a single instance and use the load balancer's URL, the web page works as well. However, with both machines in the target group, the page fails about 50% of the time when going through the load balancer's URL.

This is the error in _ webpack_require_ :

TypeError: modules[moduleId] is undefined
modules[moduleId]: undefined

modules: (1) […]
modules["./node_modules/@babel/runtime/helpers/arr…dules/@babel/runtime/helpers/arrayWithoutHoles.js(module, exports)
installedModules: {…}

moduleId: "./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"

An inte.net search for an undefined modules[moduleId] looks like it's all over the place. And I'm not sure I know enough to ask this question properly.

It looks like some people use nginx ( https://www.freecodecamp.org/news/production-fullstack-react-express/ ), which presumably means not using the AWS ELB, which I expect is much harder to control than AWS.

Answer 1

Most streaming protocols require session affinity . Try setting up sticky sessions on your load balancer. Here's how to for classic ELB: https://docs.aws.amazon.com/elasticloadbalancing/latest/classic/elb-sticky-sessions.html

Unfortunately that also pins the other traffic as well, but better than 50% failure.