如何在一个域名下托管多个应用程序？答案

【问题标题】：How can I host multiple apps under one domain name?如何在一个域名下托管多个应用程序？
【发布时间】：2019-03-19 04:07:19
【问题描述】：

假设我拥有一个域名：domain，并且我在 www.domain.com 上托管了一个静态博客。拥有静态网站的好处是我可以在netlify 等网站上免费托管它。

我现在想在同一个域名下拥有多个静态 Web 应用，因此我不必为每个 Web 应用购买一个域。我可以通过为我的应用程序添加一个子域来做到这一点。添加子域很容易。 This video 举例说明了如何使用 GoDaddy 进行操作。我可以为我的应用创建一个名为apps.domain.com 的页面，其中apps 是我的子域。

比如说，我有几个静态 webapp：app1、app2、app3。我不希望每个子域都有一个单独的子域，例如app1.domain.com。相反，我想要将每个应用程序作为apps 子域下的子文件夹。换句话说，我希望有以下端点：

apps.domain.com/app1
apps.domain.com/app2
apps.domain.com/app3

在apps.domain.com 主页上，我可能会有一个静态页面列出可以访问的各种应用程序。

我该如何进行设置？我是否需要在apps.domain.com 拥有某种服务器（例如nginx）？问题是我希望能够相互独立地开发和部署 app1、app2、app3 等，并且独立于应用程序子域。这些应用程序中的每一个都可能由 netlify 或类似的东西托管。

也许这个问题有一个明显的答案，但我现在不知道如何去做。我将不胜感激指向正确方向的指针。

【问题讨论】：

请考虑在 webmasters.stackexchange.com 上提问，但请考虑询问“什么是实现 X 的最佳方式”的问题是基于意见的，因此在整个网络中都是题外话。

标签： nginx web-applications dns hosting static-site

【解决方案1】：

如果您决定使用 nginx，下面的内容应该可以帮助您入门。这是一个非常基本的设置。您可能需要对其进行一些调整以满足您的要求。

apps.domain.com 将从/var/www 提供 index.html

apps.domain.com/app1 将从/var/www/app1 发送 index.html

apps.domain.com/app2 将从/var/www/app2 提供 index.html

apps.domain.com/app3 将从/var/www/app3 发送 index.html

http {
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  sendfile            on;
  tcp_nopush          on;
  tcp_nodelay         on;
  keepalive_timeout   65;
  types_hash_max_size 2048;
  include             /etc/nginx/mime.types;
  default_type        application/octet-stream;
  index               index.html;

  include /etc/nginx/conf.d/*.conf;

  server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  apps.domain.com;
    root         /var/www;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {

    }

    location /app1 {

    }

    location /app2 {

    }

    location /app3 {

    }    

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

【讨论】：

【解决方案2】：

只有一个补充：如果您将应用程序托管在外部服务器上，您可能需要设置 nginx 并使用代理插件将来自您的 nginx 安装的传入请求转发到外部网络服务器：

web-browser -> nginx -> external-web-server

对于需要转发的位置：

location /app1 {
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header Host $http_host;
   proxy_redirect off;
   proxy_pass https://url-of-external-webserver;
}

【讨论】：

【解决方案3】：

我最初使用 nginx 解决了这个问题。但是，我对此非常不满意，因为我需要为服务器付费，并且需要为其设置架构等。

据我所知，最简单的方法是利用 URL 重写。例如。 Netlify rewrites, Next.js rewrites.

重写允许您将传入请求路径映射到不同的目标路径。

Here 是我网站中的一个示例用法。

【讨论】：

【解决方案4】：

您似乎过早地问了这个问题——当您使用幼稚的方法做您想做的事情时，您遇到了哪些实际问题？！

通常最好让每个应用程序在自己的域或子域上运行；这样做是为了防止 XSS 攻击，其中一个应用程序中的漏洞可能会导致您的整个域变得容易受到攻击。这是因为安全功能通常在浏览器中以每个域为基础实现，其中假定整个域处于单方的控制之下（例如，在一天结束时运行单个应用程序）。

否则，在一个域上拥有多个应用程序确实没有什么特别需要做的。如果您在每个应用程序中的路径是正确的（例如，它们是相对的，或者是相对于特定应用程序位置的完整路径的绝对路径），坦率地说，真的没有任何需要注意的具体问题。

【讨论】：