时间戳

首页 > 解决方案 > 多个位置的 nginx 上的 Angular 项目问题

angular - 多个位置的 nginx 上的 Angular 项目问题

问题描述

我愿意在我的 nginx 上部署 2 个 Angular 项目。一个项目是主网站，另一个是管理门户。我想让网站可以在www 上访问。example.com和www.example.com/admin上的管理门户。

我为项目制作了 2 个文件夹：

这是我的服务器配置的相关部分：

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

        root /var/www/example.com/site;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name example.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html;
        }

        location /admin {
                root /var/www/example.com;
                try_files $uri $uri/ /admin/index.html;
}
}

主网站运行良好。但是，当我尝试访问 example.com/admin 时，我看到一个空白页面。当我打开控制台时，我会看到以下类似内容：

GET http://www.example.com/main-es2015.7a4cd1828bc2d3953908.js net::ERR_ABORTED 404 (Not Found)

似乎服务器正试图在 root 而不是 /admin 中查找 javascript 文件

当我尝试加载一个简单的 index.html 页面时，其中只有“TEST”文本工作正常。

我也尝试使用别名而不是 root，并得到了相同的结果

更新：我发现在使用ng build --prod --base-href=/admin/ 构建项目时，我必须将基本 href 设置为 / admin 。现在我的 js 文件是从example.com/admin/...加载的。但是，对于所有这些 js 文件，我仍然得到 404。

标签： angularnginx

解决方案

你有两个选择：

  1. 根据RefererHTTP 标头为您的第二个应用程序资产使用相对根：
map $http_referer $root {
    ~^http://example\.com/admin/    /var/www/example.com;
    default                         /var/www/example.com/site;
}

map $http_referer $prefix {
    ~^http://example\.com/admin/    /admin;
}

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

    index index.html;

    server_name example.com;

    location / {
        root $root;
        try_files $uri $uri/ $prefix/index.html;
    }

    location /admin {
        root /var/www/example.com;
        try_files $uri $uri/ /admin/index.html;
    }
}
  1. <base href="/">在您的第二个应用程序<base href="/admin/">的索引文件中更正（请参阅此Q/A）。

我认为第二种方法是首选。

推荐阅读