0

I currently have four containerized React + Express applications (port 3001 exposed) sitting on four individual ECS instances with four different CNAMEs. They each sit behind their own nginx service as a reverse proxy.

Given that the number of applications may increase, I'm hoping to re-deploy this on ECS with an ELB, but I'm running into problems with the path routing. My goal is to have a system where <url_name>/service-1 will route traffic to the container referenced in service-1 and so on.

Currently, the services are all in a running state, but the routing provides a bunch of console errors saying the static js and css files produced by the react build command cannot be found at <url_name>/. Has anyone found a way to run multiple full-stack React + Express applications with path routing on ELB or a workaround of adding in an Nginx service or updating the React homepage to a fixed value?

# container_definition
[
  {
    "name": "service-1",
    "image": "<image-name>:latest",
    "cpu": 256,
    "memory": 256,
    "portMappings": [
      {
        "containerPort": 3001,
        "hostPort": 3001
      }
    ],
    "essential": true
  }
]

# rule.json
{
  "ListenerArn": "placeholder",
  "Conditions": [
    {
      "Field": "path-pattern",
      "Values": [
        "/service-1*"
      ]
    }
  ],
  "Priority": 1,
  "Actions": [
    {
      "Type": "forward",
      "TargetGroupArn": "placeholder"
    }
  ]
}

# server.js
const express = require('express'),
path = require('path');

const createServer = function () {

    const port = 3001;

    // Create a new Express server
    const app = express(),
        subpath = express();

    // Ensure every api route is prefixed by /api
    app.use('/api', subpath);

    // All routes related to access points
    const users = require('./routes/users');
    subpath.get('/users/:id', users.getUserById);

    // serve up static assets, i.e. HTML, CSS, and JS from /build
    app.use(express.static('build'));
    if (process.env.NODE_ENV)
        app.get('*', (req, res) => res.sendFile(path.join(__dirname + '/build/index.html')));

    // Start the HTTP listener using the given port
    return app.listen(port, () => console.log(`Express server (HTTP) listening on port ${port}`))
};
module.exports = createServer;
hotshotiguana
  • 1,520
  • 2
  • 26
  • 40
  • 1
    This sounds more like a problem with the apps than the routing; either change them to reference js/css files at relative URLs, or specify `service-1` etc. in the path to those files. – Logan Pickup Feb 24 '18 at 04:58
  • Something like setting `homepage` in `package.json` to `/service-1` and then building after that? – hotshotiguana Feb 24 '18 at 15:03
  • Something like that. I just guessing, which is why I'm commenting instead of answering - hopefully it's enough to help you figure it out :) – Logan Pickup Feb 25 '18 at 03:40

0 Answers0