Nginx 配置为 URI 前缀下的 Angular 应用程序提供服务，其中文件生成在与 "index.html" 相同的文件夹中

Question

网络上有很多 Angular/Nginx 示例，但我仍然无法使我的配置正常工作。我用 Angular 13.

在angular.json中：

outputPath 是“www”
baseHref 是“/my-project/”

以及资产：

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "assets"
  },
}

我运行ng build。在www下生成文件，其中：

index.html
runtime.js
polyfills.js
main.js
styles.css
assets/...

我的应用有很多路由。例如：

/my-project/page1
/my-project/page2
/my-project/page3

我的问题：

如何配置 nginx.conf 使应用程序的动态路由全部由 index.html 处理，但直接提供同一 www 文件夹中的常规文件？

你经常在网上看到的nginx.conf例子类似于：

server {
    // ...
    root /usr/src/app/www;

    location /my-project {
        try_files $uri /index.html;
    }

    location /my-project/assets {
        alias /usr/src/app/www/assets;
    }
}

但是当我尝试这样做时，似乎 常规文件 被重定向到 index.html 并且 HTML 被 return 编辑了！

例如：http://localhost/my-project/runtime.js 将 return www/index.html 的完整 HTML 而不是 www/runtime.js 的 javascript。

缺少什么？

Answer 1

那是因为您不了解 nginx root、alias 和 try_files 指令的实际工作原理。检查 root and alias yourself, and take into attention that the last parameter of the try_files 指令之间的区别，将所有以前视为新 URI 的指令矛盾到 re-evaluate。你应该做的是也使用 my_project 作为你的 outputPath。之后，假设您的应用程序的完整路径是 /usr/src/app/my_project，您可以使用以下配置：

location /my_project/ {
    root /usr/src/app;
    try_files $uri /my_project/index.html;
}

这样您的应用程序将在 http://localhost/my-project/ URL 下可用（注意尾部斜杠）。您的全局根目录可以设置为任何其他目录，它不会影响您的应用程序。如果您希望它即使在尾部斜杠丢失的情况下也可用，您可以添加一个额外的重定向：

location = /my_project {
    return 301 /my_project/;
}

如果您的文件结构允许您将 my_project 目录放在全局 Web 根目录下，事情会更简单，上面的块不是必需的（以及额外的 root 指令）因为 nginx 会自动进行重定向。

如果由于某种原因您无法将您的应用程序放入名为 my_project 的文件夹中，您可以使用 alias 指令。但是，最好避免这种情况，因为当您同时使用 alias 和 try_files 指令时会出现多个 side effects。尽管如此，angular 应用程序所需的配置不应面临任何这些副作用，因此假设您的项目路径是 /usr/src/app/www，则以下配置应该有效：

location /my_project/ {
    alias /usr/src/app/www/;
    try_files $uri /my_project/index.html;
}

Nginx 配置为 URI 前缀下的 Angular 应用程序提供服务，其中文件生成在与 "index.html" 相同的文件夹中

Nginx config to serve an Angular app under an URI prefix where files are generated in the same folder as "index.html"

nginx

angular