如何修复 404 Not found 错误 - nginx + Angular + Keycloak

Question

我正在开发一个使用 Keycloak 作为其身份和访问管理服务器的 Angular (10) 应用程序。应用程序的整体流程如下，

网址是：

主页：/meal-planner/app-info/home（使用 http://localhost/meal-planner/app-info/home 访问）

联系我们：/meal-planner/app-info/contact-us

获取膳食计划：/meal-planner/my-plan?mode=create

注销：触发对 Keycloak 服务器的注销操作，然后重定向到主页

中间页面网址：/meal-planner/user-redirect

我正在使用 nginx 来托管我的应用程序。

我的问题： 关于 nginx，我遇到以下错误：

所有路线都按预期工作。只有 localhost/meal-planner/user-redirect 给我一个 404 Not found。我假设这是因为 Keycloak 正在重定向到 url。你能帮我解决这个问题吗？

来自 keycloak 的示例重定向 URL 如下所示：http://localhost/meal-planner/user-redirect#state=b64bacb4-4e5c-4df7-8c68-0155143d5b9c&session_state=c2ba4e75-03d8-40d9-bd21-7a8c13920350&code=fa307035-87e1-4b71-bed5-1545360f65aa.c2ba4e75-03d8-40d9-bd21-7a8c13920350.8453e3d9-1c4b-45e2-9ea8-2f36445fed54

我的 nginx.conf 如下所示：

server {
    listen 80 default_server;
    index index.html index.htm;
    root /usr/share/nginx/html;
    server_name ~^.*$;

    location / {
        error_log /var/log/nginx/default.error.log;
        access_log /var/log/nginx/default.access.log;
        try_files $uri $uri/ $uri$args $uri$args/ index.html;
    }

####The next location block is not necessary. I added regex based location matching to server index.html for /meal-planner/user-redirect
    location ~ .*/meal-planner/user-redirect.* {
        error_log /var/log/nginx/user-redirect.error.log;
        access_log /var/log/nginx/user-redirect.access.log;
        try_files $uri $uri/ $uri$args $uri$args/ index.html;
    }
}

注意 1： 整个应用程序分为许多模块。 “用户重定向”页面在一个单独的模块中，它的路由定义为： 在 user-mgmt.routing.module.ts 中：

const userMgmtRoutes : Routes = [
        { path: 'meal-planner/user-redirect', canActivate: [AuthGuardService], component: UserRedirectComponent 
    }];
    
    @NgModule({
        imports: [RouterModule.forChild(userMgmtRoutes)],
        exports: [RouterModule]
    })
    export class UserMgmtRoutingModule {}

注意 2： 我尝试使用哈希定位策略 - 没有用 在 app-routing.module.ts 中

const appRoutes : Routes = [
    {path: '', redirectTo:'/app-info/home', pathMatch: 'full'},
    {path: 'error', component: ErrorPageComponent, data: {errorMessage: 'oops, something went wrong! Let us try again ...'}},
    {path: '**', redirectTo: '/error'}
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { useHash: true })],
    exports: [RouterModule]
})
export class AppRoutingModule {}

注意 3： 当我使用 ng serve 运行应用程序时，一切正常。

如果这很重要，我正在使用 docker 来构建和运行我的应用程序： Dockerfile：

FROM node:16-alpine3.11 as builder
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm config set registry http://registry.npmjs.org/
RUN npm install
COPY . .
RUN npm run build-test ----> I am deploying to a test env, not PROD. In package.json, defined as "build-test": "ng build --configuration=test"

FROM nginx:latest
WORKDIR /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/
RUN rm -rf ./*
COPY --from=builder /usr/src/app/dist/mealoptimizerui/ /usr/share/nginx/html

EXPOSE 80

CMD ["nginx","-g","daemon off;"]

我正在使用以下命令运行容器：docker run -d -p 80:80 --name meal-planner-ui mealplanner/mealplannerui

我可以在 docker 容器上看到 /usr/share/nginx/html/index.html

我在 /etc/nginx/conf.d/nginx.conf 看到我的 nginx.conf

我没有在 /etc/nginx/sites-enabled/ 或 /etc/nginx/sites-available/ 看到启用站点

我已经使用 DockerToolbox 在 Windows 8 机器上安装了 docker

Answer 1

虽然我无法完全分析您的配置，但我注意到您忘记告诉 Nginx 重定向到 index.html 以防 404 以便 Angular 可以处理路由。在部署单页应用程序时，这是必须的。

你的 Nginx 配置应该或多或少像这样：

server {
  ...
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
  
  # Don't forget this line
  error_page 404 /index.html;
}