同一端口的后端和前端

Question

I have a ec2 Windows instance on AWS, which responds with a frontend on port 80. My backend is running on port 5000. Is there any way I can host both frontend and backend on same port without using any port on a client for the rest API?

Frontend:

www.example.com

Current Backend:

www.example.com:5000

What I'd like it to be:

www.example.com/backend/

How do I to write a single index.js or server.js file for both Backend and Frontend routes?

Answer 1

I recommend you to separate your service Endpoints in Subdomains

Service Endpoint

The endpoint is a connection point where HTML files or active server pages are exposed. Endpoints provide information needed to address a Web service endpoint. The endpoint provides a reference or specification that is used to define a group or family of message addressing properties and give end-to-end message characteristics, such as references for the source and destination of endpoints, and the identity of messages to allow for uniform addressing of "independent" messages. The endpoint can be a PC, PDA, or point-of-sale terminal Reference: Definition of service endpoint .

For your Frontend endpoint the recommended subdomain is:

• http:// www .example.com
• http://example.com For this case you have to redirect to subdomain www

For your Backend endpoint you can use whatever you want, but the recommended subdomains for Backend are:

• http:// api .example.com (The most used)
• http:// backend .example.com

So, in your case the recommendations are:

• Frontend: http://www.example.com
• Backend: http://api.example.com

You can accomplish that using either a Reverse Proxy like Nginx or getting the Subdomain from the request object in NodeJs.

Nginx is a web server which can also be used as a reverse proxy, load balancer, and HTTP cache. The software was created by Igor Sysoev and first publicly released in 2004. A company of the same name was founded in 2011 to provide support.

First approach

Using Nginx as HTTP load balancer

You can configure Nginx to balance the requests to your server as follow:

http {
    upstream backend {
        server localhost:5000;
    }

    upstream frontend {
        server localhost;
    }

    server {
        listen 80;

        server_name api.example.com;
        location / {
            proxy_pass http://backend;
        }
    }

    server {
        listen 80;

        server_name www.example.com example.com;
        location / {
            proxy_pass http://frontend;
        }
    }
}

Second approach

Use expressjs to get the subdomain from request object.

req.subdomains

An array of subdomains in the domain name of the request.

Documentation:

// Host: "tobi.ferrets.example.com"
req.subdomains
// => ["ferrets", "tobi"]

In your case your possible subdomains are: www or api

// Host: "www.example.com"
req.subdomains
// => ["www"]

Or

// Host: "api.example.com"
req.subdomains
// => ["api"]

This is how you have to process the request within your server.js

var subDomain = req.subdomains[0];

if (subdomain === 'api') {
    processBackendRequest();
} else {
    processFrontendRequest();
}

Answer 2

The only real way to prevent having to specify a port number is use post 80 for HTTP, or 443 for HTTPS.

If you're running IIS you can have your front end running as a website called "example.com", and then under that website have another "application" called "backend".

All HTTP requests for www.example.com would go to the root website. Requests to www.example.com/backend would route to the "backend" application under the example.com website.

ServerFault may be a more appropriate place to ask IIS questions however.

Answer 3

Sure, it's trivial to host both on the same port(s), it's just a question of routing.

For example, using express.js and having static files (CSS, images, HTML, etc) in a folder named public :

const express = require('express')
const app = express()

app.use('/', express.static('public'))
app.get('/backend', (req, res) => res.send('Hello World!'))

app.listen(80, () => console.log('Example app listening on port 80!'))

If you make a file public/index.html :

<html>HI</html>

Then you can get it (the "frontend") by running curl 'localhost:80/' :

$ curl 'localhost:80/'
<html>HI</html>
$

You can also access your 'backend':

$ curl 'localhost:80/backend'
Hello World!
$