Angular 8 + Nginx - 无法加载资源答案

【问题标题】：Angular 8 + Nginx - failed to load resourceAngular 8 + Nginx - 无法加载资源
【发布时间】：2020-03-22 04:26:16
【问题描述】：

我有一个用 Angular 8 编写的应用程序，我在 nginx 上提供服务。部署后出现以下错误：

加载资源失败：服务器响应状态为404()

另外在开发工具中我们可以看到这样的信息：

错误：“404 未找到

404 未找到

nginx/1.12.0
消息：“https://myUrl/app/assets/config/endpoints.json 的 Http 失败响应：404 OK 名称：“HttpErrorResponse”确定：错误状态：404 statusText： “确定”网址：“https://myUrl/app/assets/config/endpoints.json”

我不明白为什么响应显示“OK”？但这不是主要问题。 主要问题是我无法加载此 endpoints.json 文件，也无法访问位于 assets 目录下的任何文件。

当我直接去URI时：

https://myUrl/app/someFile.png

那么它是可见的，但是如果我尝试到达

https://myUrl/app/assets 或 https://myUrl/app/assets/logo.png

然后我得到一个 404 错误页面。

它是从一个 docker 容器提供的，我看到所有文件都在那里，所以结构如下

/usr/share/nginx/html/

-/
-index.html
-assets/
-------config/
-------------endpoints.json
-------images/
-------------logo.png
-polifills.js
-favicon.ico

应用是使用 --prod 标志和基本 href 标志 --base-href ./ 构建的正如我所见，网站图标正在加载，并且主目录中的所有脚本都可以正常工作。问题与资产目录有关......

这是我的文件： * nginx.conf

server {
listen       8888;
server_name  localhost;

location / {
  root      /usr/share/nginx/html;
  index     index.html index.htm;
  include   /etc/nginx/mime.types;
  try_files $uri $uri/ /index.html;
}

}

Enpoints 服务（正在尝试获取此 endpoints.json


private enpoints$: Observable<Endpoint>;
private readonly ENDPOINT_URL = './assets/config/endpoints.json';
  constructor(private http: HttpClient) {}

  public loadEndpoints(): Observable<Endpoint> {
    if (!this.enpoints$) {
      this.enpoints$ = this.http.get<Endpoint>(this.ENDPOINT_URL).pipe(shareReplay(1));
    }
    return this.enpoints$;
  }


Any suggestions?

【问题讨论】：

标签： json angular nginx deployment configuration

【解决方案1】：

刚刚想通了。该问题与我的 nginx 配置有关。我必须将根路径从位置块中取出，以便它适用于所有位置。官方nginx pitfalls doc给了我很多帮助。

现在我的配置文件如下所示：

server {
  listen       8888;
  server_name  localhost;
  root      /usr/share/nginx/html;

  location / {
    index     index.html index.htm;
    include   /etc/nginx/mime.types;
    try_files $uri $uri/ /index.html;
  }

  location /assets {
    try_files $uri $uri/ /index.html;
  }
}

虽然我认为根本不需要第二块。我必须检查它，并会回复。

【讨论】：