将 angular 应用程序路由到 nginx 中的特定 URI

Question

所以，我有一个 angular 应用程序要托管在像 www.xyz.com/abc 这样的 URI 上。我有一个 EC2 实例，其中 nginx 服务器也是运行。该网站运行良好并成功托管，但问题是当我尝试直接在 URL 栏中输入 URL 时它显示 404 错误，但是当我浏览 index.html 时它工作正常。

我尝试更改规则并在 try_files 中托管 index.html，但没有任何效果。

Answer 1

如果找不到其他内容，您正在寻找的是将 URL 重定向到 index.html。您可以使用指令 try_files 来执行此操作：

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

我建议看看这个网站做的 NGINX 配置：https://nginxconfig.io/。它支持使用 "index.html fallback routing" 服务 Angular 个网站，所有进行内部路由的网站都需要它。

Answer 2

保持基础href“/”

下面是 nginx.conf 路由同一页面上的所有请求：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  mysite.com www.mysite.com;
        root /usr/share/nginx/html;

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

将 angular 应用程序路由到 nginx 中的特定 URI

Routing angular app to a specific URI in nginx

routing

uri

nginx

single-page-application

angular