在同一台服务器中配置多个位置的 nginx

Posted 2023-04-14

【中文标题】在同一台服务器中配置多个位置的 nginx

【英文标题】：Configure nginx with multiple locations in the same server

【发布时间】：2018-03-27 10:16:59

【问题描述】：

我想部署多个继承自主应用程序的 Angular 应用程序。

主应用在地址：myapp.com（目录/etc/local/nginx/html/myapp）

其他应用应位于以下地址： myapp.com/app_n（目录/etc/local/nginx/html/app_n）

我该如何配置？

我尝试了以下配置，但没有成功：

server 
    listen       80;
    server_name  myapp.com;

    location /app_1 
        alias /usr/local/nginx/html/app_1/dist;
    

    location / 
        root html/myapp/dist;
        autoindex on;
        include /etc/nginx/mime.types;
        try_files $uri $uri/ /index.html =404;
    

当 url 为 myapp.com/app_1 时，angular 表示“找不到页面”。在app_1的index.html中，有一个脚本：

<script src="main.bundle.js">

当我检查时，我发现app_1使用的ma​​in.bundle.js，实际上属于myapp。我虽然原因是因为服务器名称是 myapp.com。

感谢您的帮助！

【问题讨论】：

你试过/main.bundle.js（前面有/）吗？

问题是，script标签是angular自动生成的。而且我不想修改任何角度代码，而只想修改 nginx 配置文件。你认为这可能吗？谢谢！

@RichardSmith 我尝试使用“/main.bundle.js”，但没有成功。我必须输入“/app_1/main.bundle.js”才能使其工作，但我有大约 100 个这样的应用程序......

【参考方案1】：

您正在使用相对路径的 URI 来访问资源文件。浏览器通过查找当前页面 URL 的最后一个/ 来构造绝对路径。

因此，当使用 URL http://myapp.com/app_1 访问包含 <script src="main.bundle.js"> 的页面时，浏览器将在 http://myapp.com/main.bundle.js 处查找资源文件。

如果您使用相对路径的 URI，则必须将最后的 / 放在正确的位置，因此：http://myapp.com/app_1/ 和 http://myapp.com/app_1/index.html 都会导致浏览器在 http://myapp.com/app_1/main.bundle.js 处查找资源文件。