Hosting react and nodejs on same server using multiple domain

“Person holding a plastic coffee cup in front of colorful wall at Venice Embankment” by Marion Michele on Unsplash

Hosting multiple apps on the same server — Implement a reverse proxy with Node

Whenever I choose a new cloud-hosting programme in lodge to have a remote server for my developments, I’m often to run multiple apps on it.

There are many reasons to this, for instance:

  • It allows me to
    keep my computer clean
    from the garbage that comes with downloading and installing tons of IDEs, libraries, packages, etc.
  • It allows me to
    have a server running 24/vii
    so that my
    customers can follow my progression
    whenever they desire.
  • It removes the
    hassle of configuring my box to permit public visitors

    on my projects.
  • Basically a physical server is a estimator just like any other, so why would I host only 1 app per server ?

Now comes the implementation part, and if yous’ve tried yourself at this practise you know that it oftentimes ends like this :

Multiple projects, each 1 is running on a specific port

What has to be noticed hither is that once yous’re running a project, it listens on a specific port and you have to go on a list of which ports are used if you lot don’t desire to stumble across a fatal fault :

EADDRINUSE: This port is already in use

The other pain point is that when you’re interacting with your program, your requests will expect something like this :

http(southward)://domain.ext:port/road

With
port
being the port your project listens on.

First, what is a contrary proxy ?

A picture is worth thousand words.

Credits to myself 😆

In brief, a reverse proxy will match incoming requests with their component.

It’s just a request organizer. Its part is to redirect requests based on criteria (URL parts, asking body, basically anything can be a criterion) and to give the response dorsum from the component the request has been redirected to.

In this case, the contrary proxy running on port 443 volition proxy Residual requests to the Python REST API listening on port 5000 and information technology volition proxy website requests to the Apache server listening on port fourscore.

For this detail case (a real use-instance I dealt with), the benchmark was the URL part later on the domain name, similar this :

https://website.com/residue
-> Python Balance API

https://website.com/spider web
-> Apache spider web server

How to implement one ?

Before we start, make certain that you take the following :

  • Node :
    https://nodejs.org/en/
  • Express :
    npm install limited
  • HTTP Proxy Middleware :
    npm install http-proxy-middleware

Express will allow you to run a server, and HTTP Proxy Middleware will proxy requests to the endpoints you configured.

Finally, we’ll use a JSON config file which will comprise a mapping like this :

It means that one time
/project1
is requested, the request is proxied to
http://localhost:1001
.

Assuming y’all created a JSON file and a JS file to run a server, this is what you should end with:

/project
app.js
config.json

And this is the code you accept to insert into
app.js
:

The explanation is:

  • Line 6
    : Turning the JSON file into a JS object via
    crave
  • Line 10
    : Iterating over all the routes, 1 by one
  • Line 11
    : Using
    app.use(route,handler)
    ways that no thing the HTTP method used in the requests, the server volition use
    handler
    when
    road
    is requested.
  • Line 12
    : Create an bearding handler which will proxy requests (documentation hither)
  • Line xiii
    : The target is where the request volition be sent to
  • Line 14
    :
    pathRewrite
    can be a part. We divers ours so that it strips the sugar part. Let me explain.
Popular:   Virtuozzo to showcase new PaaS for WordPress and Hybrid Server Solutions at CloudFest 2022|||

To access
project1
, you volition open your browser and type:
http://domain.ext/project1/road/parameters/blabla

When called,
pathRewrite
will fill up the
path
parameter with what comes juste later the domain part.

In our case,
path
will be equal to :
/project1/route/parameters/blabla

But in fact, your app only needs what comes after
/project1
.

That’due south how you get rid of it :

  • path.divide('/')
    =['','project1','route','parameters','blabla']
  • .slice(ii)
    =
    ['road','parameters','blabla']
  • .bring together('/')
    =
    route/parameters/blabla
    (the leading
    /
    before
    route
    isn’t necessary)
  • Line 21
    : Run the server and y’all’re practiced to go 😃

I recommend running your reverse proxy daemonized with a crash-proof launcher like

pm2

or any other utility and then that if it breaks it will restart automatically without compromising the projects it redirects to.

For instance :

pm2 start app.js

You should now exist able to utilize meaningful URLs to access your different projects on the aforementioned server, without having to specify the port manually for each asking.

Note that this reverse proxy would also work using
https
(that’southward what I’m personally up to).

Author’southward note

This commodity brings a useful trick I often use in my daily developer life.

You lot could be thinking “well, I don’t have to type the port anymore just I still have to type a keyword”.
Which one is more meaningful to you ?

Like always, you’re free to brand your choices.

Hosting react and nodejs on same server using multiple domain

Source: https://itnext.io/hosting-multiple-apps-on-the-same-server-implement-a-reverse-proxy-with-node-a4e213497345