同一域上的静态网站和 Angular 2 应用程序

Question

我有两个应用程序。

1. 静态（html、css）
2. 角度2

域名：xyz.com

操作系统：Ubuntu 16.04.2 LTS

网络服务器：nginx/1.10.3

目的：

打开 xyz.com 应该从名为 static

的目录中提供内容

和 xyz.com/app 应该从名为 angular2

的目录中提供内容

angular2 AOT构建应用文件结构

服务器配置

    server {
    listen 80;
    listen [::]:80;

    server_name xyz.com;

    location / {

        alias /var/www/html/static/;
        # First attempt to serve request ais file, then
        # as directory, then fall back to displaying a 404.i
        index index.html;
        try_files $uri $uri/ /index.php?$query_string /index.html =404;
    }

    location /app {
        alias /var/www/html/angular2/;
        index index.html;
        try_files $uri $uri/ index.html;
    }

    location /api {
        proxy_pass http://localhost:8086;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
    #
    #   # With php7.0-cgi alone:
    #   fastcgi_pass 127.0.0.1:9000;
    #   # With php7.0-fpm:
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht { 
        deny all;
    }
  }

网页包配置

output: {

  /**
   * The output directory as absolute path (required).
   *
   * See: http://webpack.github.io/docs/configuration.html#output-path
   */
  path: helpers.root('dist'),

  publicPath: '/app/',
  /**
   * Specifies the name of each output file on disk.
   * IMPORTANT: You must not specify an absolute path here!
   *
   * See: http://webpack.github.io/docs/configuration.html#output-filename
   */
  filename: '[name].[chunkhash].bundle.js',

  /**
   * The filename of the SourceMaps for the JavaScript files.
   * They are inside the output.path directory.
   *
   * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
   */
  sourceMapFilename: '[file].map',

  /**
   * The filename of non-entry chunks as relative path
   * inside the output.path directory.
   *
   * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
   */
  chunkFilename: '[name].[chunkhash].chunk.js'

},

我已将 publicPath 添加为 /app/，以便 index.html 中包含的每个文件都应以 app/ 为前缀（请参阅下面的 index.html sn-p）

angluar2 应用 index.html 预览

保留<base href="/app"> 将为每个路由添加前缀 /app 以便 nginx 位置块可以提供来自 angular2 应用程序的内容。

结果：

当我打开 xyz.com 时，我的静态网站中的内容会被提供并 当我打开 xyz.com/app/SOME_URL_HERE 时，我的 angular2 应用程序中的内容会被提供。到现在为止，我觉得还可以！

问题：

我从我的一个 html 模板中引用我的 angular2 应用程序中的图像，它有一个相对路径

<img src="../../assets/image.jpeg" />

我目前的设置无法提供服务。我不想引用它有绝对路径

<img src="app/assests/image.png" /> 

因为首先它在我的开发设置中不起作用，其次它会使代码的可读性更难。

我的整个设置有问题吗？

或

有什么方法可以让 nginx 在我当前的设置到位的情况下提供相对于 index.html 的 angular2 应用程序的内容。

参考资料：

我正在使用 angular-starter 作为应用程序库

https://github.com/AngularClass/angular-starter/

已编辑

最初，我将 Angular 2 应用程序放在子域 app.xyz.com 上，但当我知道要保护域和子域时，我不得不改变决定，我需要购买 通配符 ssl 而且我买的太贵了。

Answer 1

我发现在路径上托管 Angular 应用程序会导致各种问题。

解决方案 1

如果可以，请避免。

我建议让您的应用拥有自己的子域。 app.xyz.com

这样，当您的应用程序增长和您的网站增长时，分开维护它们会更容易。

解决方案 2

如果您的静态网站只是一个单页网站，您可以在 /static/index.html 上提供 /

location = / {
  root /var/www/html/static/;
  try_files $uri $uri/ =404;
}

location / {
  root /var/www/html/angular2/;
  try_files $uri index.html
}

Answer 2

如果您可以避免在一个域上部署两个应用程序，那总是会更好。不过，由于某些原因，我无法避免，以下是我设法将这两个应用程序部署在一个域上的方法。

我保持基地为

<base href="">

而不是

<base href="/app">

以便所有应用程序资产都应该相对加载。

下面是nginx配置

  server {
    listen 80;
    listen [::]:80;

    server_name xyz.com;

    location / {

        alias /var/www/html/static/;
        # First attempt to serve request ais file, then
        # as directory, then fall back to displaying a 404.i
        index index.html;
    }

    location /app {
        alias /var/www/html/angular2/;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8086;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
    #
    #   # With php7.0-cgi alone:
    #   fastcgi_pass 127.0.0.1:9000;
    #   # With php7.0-fpm:
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht { 
        deny all;
    }
  }

你可以通过保留一个全局 root 元素来改进它，这样如果你添加更多的位置块，一个根总是在那里。

我为 angular2 应用保留了 HashLocation 策略。每当我需要将用户从静态网站切换到角度应用程序时。我已将 /app 附加到 URL。