☰

使用 nginx 在同一个域名下运行两个不同的网站

tag-icon • tag-icon nginx reverse-proxy https deployment
使用 nginx 在同一个域名下运行两个不同的网站

我是服务器部署方面的新手。对于我的电子商务应用，我有两个 React 项目，一个用于storefront客户，另一个dashboard用于管理员。我使用以下配置设置了我的 nginx 服务器。我可以通过以下方式访问我的店面https://shop.saleortest.com，但我想使用https://shop.saleortest.com/dashboard。这可以通过在块内reverse proxy添加来完成。但我不知道如何实现这一点。我试过在这里添加这个块proxy_passlocationhttps://admin.shop.saleortest.com运行相同的服务器。但它不起作用

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

例如我可以访问此网站https://demo.saleor.io/这是店面，如果我去https://demo.saleor.io/dashboard它带我进入dashboard应用程序，这是两个使用相同域的不同 React 应用程序。这里店面和仪表板都在单个服务器中运行？我该如何实现这样的功能。谢谢。

   
    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


}

答案1

如果您的主要 React 应用程序位于/var/www/html/storefront目录下，并且您可以将仪表板应用程序放在/var/www/html/storefront/dashboard目录下，那么最简单的方法是使用以下配置：

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;
    }
}

您需要根据/dashboardURI 前缀重建仪表板 React 应用程序，因为其所有路由都应使用该前缀，并且其资产的所有链接都应使用此前缀生成（否则它们显然将由您的前端应用程序提供）。检查这文章中提供了一个如何实现的示例。

相关内容