☰

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

tag-icon • tag-icon nginx url-routing angular
让 nginx 将所有路由传递到 Angular index.html

我有一个托管在 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方法是我在许多例子中看到的模式，它似乎对其他人都有效。我使用错了吗，或者在这种情况下这是错误的方法？

答案1

的最后一部分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/;
  }
}

相关内容