Run two different website in same domain name with nginx
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
}
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.