目的：

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

WEBPACK CONFIGURATION

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代码段）

angluar2 application index.html preview

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

结果：

当我打开 xyz.com 时，我的静态网站上的内容会被提供当我打开 xyz.com/app/SOME_URL_HERE 时，我的angular2应用程序中的内容会被提供。直到现在它看起来还不错！

问题：

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

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

我当前的设置无法提供服务。我不想让它具有绝对路径

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

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

我的整个设置是错的吗？

OR

有没有办法让nginx使用我当前的设置来为angular2 app提供相对于index.html的内容。

参考文献：

我使用angular-starter作为应用程序基础

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

EDITED

最初，我将我的角度2应用程序放在子域app.xyz.com上，但是当我知道要保护域和子域时我必须改变我的决定，我需要购买通配符ssl 对我来说购买太贵了。

Answer 1

我发现在路径上托管角度应用会导致各种问题。

解决方案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
}

同一域

目的：