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

我有两份申请

静态（html、css）

角2

域名：xyz.com

操作系统：Ubuntu 16.04.2 LTS

web服务器：nginx/1.10.3

目的： 打开xyz.com应提供名为static的目录中的内容

而xyz.com/app应该提供名为angular2

angular2 AOT构建应用程序文件结构

服务器配置 网页包配置 我已经将publicPath添加到/app/，这样index.html中包含的每个文件都应该以app/（参考下面的index.html片段）作为前缀

angluar2应用程序索引.html预览

保留

将在每条路由前面加上/app，这样nginx位置块就可以提供来自angular2应用程序的内容

结果： 当我打开xyz.com时，我的静态网站上的内容会得到服务并 当我在这里打开xyz.com/app/SOME\u URL\u时，angular2应用程序中的内容就会得到服务。直到现在我觉得还不错

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

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

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

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

因为第一，它在我的开发设置中不起作用，第二，它会使代码更难阅读

我的整个设置都错了吗

或

在我当前的设置中，有没有办法让nginx提供angular2应用程序相对于index.html的内容

参考资料： 我使用角启动器作为应用基础

编辑

---

最初，我将angular 2应用程序放在subdomain app.xyz.com上，但当我知道为了保护域和子域，我需要购买一个通配符ssl时，我不得不改变我的决定，因为它对我来说太贵了。

我发现在路径上托管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
}

---

如果您可以避免在一个域上部署两个应用程序，那就更好了。尽管由于某些原因我无法避免，但下面是我如何在单个域上部署这两个应用程序的方法

我把基地当作

<base href="">

您可以通过保留一个全局根元素来改进它，这样，如果您添加了更多的位置块，根就始终存在

---

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

谢谢@Leon的回复。是的，我将angular2应用程序保留在一个子域app.xyz.com上，但当我知道我必须购买通配符SSL来保护我的域和子域时，我不得不改变我的决定。它太贵了，我买不起。这就是为什么我决定将其保留在单个域上，直到我获得一些资金为止。：）不过谢谢你指出，我会更新我的问题。你忘了在第二个位置块中提到/了。我做了你建议的改变。但现在，当我向我的域xyz.com发出请求时，第二个位置块正在被服务。location=/exact location match不知何故不起作用。我将进一步测试它，并让您知道是否适合我。静态网站的index.html引用了目录中的其他js和css文件。这些文件无法使用建议的方法加载！您可以使用letsencrypt.org获取免费ssl证书。正如您所提到的，您还需要为您的静态资源设置一个位置块，这意味着您的静态站点和angular应用程序更加相互交织。这就是为什么单独的子域可能是最好的选择。

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

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

<base href="">

<base href="/app">

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