Hosting react and nodejs on same server using multiple domain

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 :

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.

The goal of this article is to teach you how to create a opposite proxy then that in the end you lot’ll be able to utilise meaningful urls for your projects.

Merely like that:

http(southward)://domain.ext/nameOfYourProject/route

Instead of having to remember which port your app is listening on.

First, what is a contrary proxy ?

A picture is worth thousand words.

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.

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.