26

Sure I'm not the first one that tried to serve a domain example.com from a example.net/bbb, but I haven't found a solution yet.

My NGINX configuration follows the guidelines and looks something like this:

server {
    listen 80;
    server_name example.net;
    root /path/to/aaa;

    location /bbb/ {
        proxy_pass http://example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
    location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
        access_log off;
        log_not_found off;
        expires max;
    }
}

I can manage to render the root of example.com in example.net/bbb but:

ISSUE 1

example.net/bbb/some/path doesn't work as expected and the index.html of example.net is rendered.

ISSUE 2

Any asset in example.com/assets gives 404 because the browser look for example.net/assets. Be great if I could solve this without placing absolute paths everywhere.

HBruijn
  • 72,524
  • 21
  • 127
  • 192
a.barbieri
  • 403
  • 1
  • 5
  • 7
  • 1
    Are both domains pointing at the same instance of Nginx? – miknik Sep 25 '18 at 21:11
  • They are currently on the same server if it's that what you mean by being on the same Nginx instance. But it'd be great to find a solution that works even if they are on two separate servers. – a.barbieri Sep 25 '18 at 21:30

3 Answers3

46

The problem is basically that using a proxy_pass directive won't rewrite HTML code and therefor relative URL's to for instance a img src="/assets/image.png" won't magically change to img src="/bbb/assets/image.png".

I wrote about potential strategies to address that in Apache httpd here and similar solutions are possible for nginx as well:

  • If you have control over example.com and the how the application/content is deployed there, deploy in the same base URI you want to use on example.net for the reverse proxy
    --> deploy your code in example.com/bbb and then your proxy_pass will become quite an easy as /assets/image.png will have been moved to /bbb/assets/image.png: 

    location /bbb/ {
     proxy_pass http://example.com/bbb/;

  • If you have control over example.com and the how the application/content is deployed:
    change to relative paths, i.e. rather than img src="/assets/image.png"
    refer to img src="./assets/image.png" from a page example.com/index.html
    and to img src="../../assets/image.png"from a page example.com/some/path/index.html

  • Maybe you're lucky and example.com only uses a few URI paths in the root and non of those are used by example.net, then simply reverse proxy every necessary subdirectory: 

    location /bbb/ {
     proxy_pass http://example.com/; 
}
location /assets/ {
     proxy_pass http://example.com/assets/; 
}
location /styles/ {
     proxy_pass http://example.com/styles/;

  • give up using a example.com as subdirectory on example.net and instead host it on a subdomain of example.net: 

    server { 
  server_name bbb.example.net 
  location / {
     proxy_pass http://example.com/; 
  }
}

  • rewrite the (HTML) content by enabling the nginx ngx_http_sub_module. That will also allow you to rewrite absolute URL's with something similar to:

    location /bbb/ {
     sub_filter 'src="/assets/'  'src="/bbb/assets/';
     sub_filter 'src="http://example.com/js/' 'src="http://www.example.net/bbb/js/' ;
     sub_filter_once off;
     proxy_pass http://example.com/; 
}
asynts
  • 103
  • 4
HBruijn
  • 72,524
  • 21
  • 127
  • 192
  • I can definitely do the first option. The last one is pretty extreme but it's good to know there's such an alternative. – a.barbieri Sep 25 '18 at 21:28
  • Excellent explanation of the implementation options. I've been looking for a breakdown like this for quite some time, happy I finally found it. Thank you. – Sammy Oct 16 '19 at 09:32
0

if you want to subdir's html file for default index.html. for example, copy /main/mainView.html to /index.html and use base tag in index.html to set relative location's base path.

*I think adjusting client page's relative location's base path can be modified by not server-side but client-side(browser). because the page(client-side asset) has no way to know its real location in server-side.

someone
  • 1
0

I had issues like you , If i have two container , each of them load a different frontend app , you should change a base root url for each your project in html for example :

<base target="_blank" href="http://localhost:8081/react-app/" />

this is in another container , but main project is on 80 , so it can find style files and etc . and for change a base route for child route i found sth for react router as name basename that can set

tmohammad78
  • 1
  • 1