主页 / server / 问题 / 1158681
Accepted
glenatron
Asked: 2024-04-30 08:13:32 +0800 CST

让 nginx 将所有路由传递给 Angular index.html

  • 772

我有一个托管在 nginx 上的 Angular 应用程序，它与后端 API 进行通信。后端正在工作，当我访问时应用程序正在工作example.com/，但如果我访问example.com/custom/path/123它不会被路由到index.html，这是 Angular 页面。相反，我只得到一个 nginx 404 页面。

我真正想要的是将任何传入路由（除了/api和/assets路径）传递到该索引。

在我的配置中我有这个：

server {
  root /var/www/example.com/site-root;

  server-name example.com;

  location / {
     try_files $uri $uri/ index.html;
     # I also tried:
     # try_files $uri$args $uri$args/ index.html;

  } 

  location /assets {
     try_files $uri =404;
  }

  location ~ ^/api/(.*)$ {
      proxy_pass http://127.0.0.1:3322/$1;
      # a bunch of working api reverse proxy that doesn't seem to be 
  }
}

该try_files方法是我在许多示例中看​​到的模式，它似乎对其他人都有效，我使用它是错误的还是在这种情况下这是错误的方法？

nginx

1 个回答

  1. Best Answer

    的最后一部分try_files是内部重定向的 URI，它应该以 开头/。所以正确的用法是try_files $uri $uri/ /index.html;。

    但在这种情况下，您可能需要将所有内容重定向到/index.html而不尝试查找其他文件。所以你可以只使用rewrite.

    你也不需要try_files $uri =404。这就是 nginx 默认会做的事情。

    如果可以在没有正则表达式的情况下完成，则应避免在位置中使用正则表达式。

    所以我认为这就是你得到的：

    server {
  server-name example.com;

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

  location / {
     rewrite ^ /index.html break;
  } 

  location /assets/ {
  }

  location /api/ {
      proxy_pass http://127.0.0.1:3322/;
  }
}
    • 1

相关问题