Website

Host Multiple Domains (website) on One Server

Mang Yang

• 3 min read

Domain is quite easy and cheap to register. You may want to host multiple website and for each of them you want one specific domain name. It is nice to have one running server with public ip address for each one of those domains. However, in most situation, you just have one single server. What you need to do is hosting multiple domains on one server.

Suppose you have two domains: a.com and b.com and one server with ip address: 1.2.3.4. We say, the website for a.com runs under NodeJS and the other one is a normal AngularJS which could run under any server (like http-server, apache, nginx).

Option 0

This is a stupid option: just use different port. For example, one website server(a.com) uses port 80 and the other (b.com) uses port 8080.

For the domains, we add one A Record: 1.2.3.4 for a.com and add one A Record: 1.2.3.4 for b.com.

I think no one would take this strategy since you need to type b.com:8080 in browsers to access the second website.

Option 1: Using Domain Redirect

This is like a quick fix to the option 0. The two project are also running under different ports:80 and 8080. The difference is settings on domain:b.com. We use Domain Redirect.

For example, the following settings for b.com

WechatIMG13

There are 3 types for Domain URL Redirect:

  1. Masked
  2. Unmasked (301 or 302)
The obvious difference between them is this: In Maksed, if you type a.com in browser, the page comes from http://1.2.3.4:8080. However, your browser will still display a.com in the address bar. The web page from 1.2.3.4:8080 is displayed in a frame called a.com.

The disadvantage is that, this frame (a.com) will not show the title or the icon from that real server (1.2.3.4:8080). Namecheap allows you to add META information on the redirect so you can set a static title to b.com. However, it could not solve the favicon issue for the website.

Option 2: Using nginx: proxy reverse

We want to use port 80 for both website and we also want keep the title and favicon for them. Is there any way we can do on our server so that: when request comes to port 80, we check which domain this request is targeting at and decide which port we can forward this request to.

Nginx provides a proxy_pass which can help us do this.

WechatIMG14
  1. add A Record (1.2.3.4) for both a.com and b.com
  2. install nginx and start nginx service on server at port 80 So all traffic towards a.com and b.com will be handled here
  3. start website services at different port: e.g 8080 and 4000
  4. use the following configuration in nginx.conf 
    server {
    listen 80;
    listen [::]:80;
    server_name a.com;
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_intercept_errors on;
        proxy_http_version 1.1;
        proxy_pass http://localhost:8080;
    }
}
server {
    listen 80;
    listen [::]:80;
    server_name b.com;
    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_intercept_errors on;
        proxy_http_version 1.1;
        proxy_pass http://localhost:4000;
    }
}
  5. Restart nginx via sudo nginx -s reload
 

After this, every request for http://a.com will be forwarded to http://yourip:8080 and request for http://b.com will be forwared to http://yourip:4000. Meanwhile, the browser will still display a.com or b.com. Same configuration apply to port 443 if you want to enable https.

Sign up for more like this.

Enter your email
Subscribe