Run two different website in same domain name with nginx

Question

I'm new in server deployment. For my e-commerce app I've two react projects, one is storefront for customers and other is dashboard for admins. I've setup my nginx server with the following configuration. I can access my storefront going https://shop.saleortest.com, but I want to access my dashboard using https://shop.saleortest.com/dashboard. This might be done with reverse proxy, adding proxy_pass inside the location block. But I don't know how to achieve this. I've tried adding this block, here https://admin.shop.saleortest.com running the same server. But it's not working

location /dashboard/ {
   proxy_pass https://admin.shop.saleortest.com;
}

As example I can go to this site https://demo.saleor.io/ it's the storefront and if I go to https://demo.saleor.io/dashboard it takes me to dashboard app, those are two different react app using the same domain. Here both storefront and dashboard are running in single server? How can I achieve something like this. Thanks.

   
    server {
    server_name shop.saleortest.com;
    root /var/www/html/storefront;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html?$args;
}

    location /graphql/ {
    proxy_pass http://127.0.0.1:8000/graphql/;
  }

location /dashboard/ {
   proxy_pass https://admin.gethookedseafood.com;
}


    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/shop.saleortest.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/shop.saleortest.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

    server {
    if ($host = shop.saleortest.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;
    server_name shop.saleortest.com;
    return 404; # managed by Certbot


}

Please clarify what "it is not working" exactly means – Tero Kilkanen Nov 20 '20 at 22:37 — Tero Kilkanen, Nov 20 '20 at 22:37

Ivan Shatsky · Accepted Answer · 2020-11-23T05:02:43.460

If your primary React app located under /var/www/html/storefront directory and you can put your dashboard app under /var/www/html/storefront/dashboard directory, the most simple way to do it is to use the following configuration:

server {
    server_name shop.saleortest.com;
    root /var/www/html/storefront;

    # SSL configuration by certbot here

    index index.html;

    # frontend app
    location / {
        try_files $uri $uri/ /index.html?$args;
    }
    location /graphql/ {
        proxy_pass http://127.0.0.1:8000/graphql/;
    }

    # dashboard app
    location /dashboard/ {
        try_files $uri $uri/ /dashboard/index.html?$args;
    }
}

You would need to rebuild your dashboard React app according to your /dashboard URI prefix because all its routes should use that prefix and all links to its assets should be generated with this prefix (or they obviously will be served with your frontend app). Check this article for an example of how it can be done.

Run two different website in same domain name with nginx

1 Answers1