Angular + Kubernetes + Nginx上的路由问题

问题描述 投票:2回答:1

在我目前正在工作的一个项目中,我面临许多与路由相关的问题。我认为这是一个配置问题,任何有类似经验的人都可以分享他的经验。

项目概述:

  • Angular SPA项目
  • Docker
  • 容器
  • 部署到Kubernetes
  • 集群(在Google云上)
  • nginx
  • 服务器上运行。
  • 代码存储库和生成过程在Azure Git Repo中

    项目可以在本地计算机上构建并完美运行。

  • 项目详细信息:

    1。 Angular SPA项目详细信息:

  • 简单的角度项目,带有普通香草角靴
  • 使用RoutingModule在不同形式之间导航。
  • 具有2种形式(一种是固定的,另一种是开放的,稍后再详细说明)
  • 结构
             Devops/
                 src/
                      index.html
                      app/
                          app-routing.module.ts
                          app.component.ts
                          app.component.html
                          home/
                            home.component.html
                            home.component.ts
                          dashboard/
                            dashboard.component.html
                            dashboard.component.ts
    
  • 在app-routing.module.ts中,设置所有路由,其中​​所有路径都映射到相应的组件。另外,默认设置为Home组件。按照标准设置,index.html具有默认定义的以下标记和值<base href="/">在构建过程中,名称空间和应用程序名称存储在环境变量(ENVVALUES)中。


    2。 Kubernetes详细信息

    在kubernetes中,可以说,域是www.xcompany.com,我的名称空间是MaxxD,而已部署的应用程序是Devops,那么托管站点的uri将是< [www.xcompany.com/maxxd/devops。以这种方式配置。另外,根据Kubernetes标准,还应该提供一个运行状况检查网页,以确定该Pod的可用性和运行状况。健康页面的路径为:www.xcompany.com/maxxd/devops/api/health


    3。 NGinx详细信息

    与Nginx相关的设置存储在名为default.conf的配置文件中以下是内容:

    server { listen 80; server_name localhost; location ${ENVVALUES}/ { alias /usr/share/nginx/html/; index index.html index.htm; #try_files $uri $uri/ index.html } location /api/health/ { alias /usr/share/nginx/html/health/; index health.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }

    正如我们所看到的,默认域名后面附加了

    ENVVALUES

    ,其中包含名称空间和应用程序名称的信息(“ MaxxD / Devops”)


    3。 Docker详细信息

    Docker Build是一个多阶段的,包括2个步骤。

  • 第一步,将文件从代码仓库复制到构建服务器,然后运行ng build
  • 然后,将Dist文件移动到nginx映像中,在该映像中修改nginx conf文件,然后启动。
  • 以下是DockerFile的内容:

  • ### STAGE 1: Build ### # We label our stage as ‘builder’ FROM node as builder # Create the working folder RUN mkdir -p /usr/src/app # We define our current path inside of the container WORKDIR /usr/src/app # We copy both the package.json and the package.lock.json into the image COPY package*.json /usr/src/app/ # run npm install to install Angular CLI RUN npm install @angular/cli -g # run npm install to install all dependencies of the project RUN npm ci # copy all file from repo to build machine COPY . /usr/src/app/ ## Build the angular app in production mode and store the artifacts in dist folder RUN ng build --prod ### STAGE 2: Setup ### FROM nginx # Expose the port 80 of the running container EXPOSE 80 ## Copy our default nginx config COPY conf/default.conf /etc/nginx/conf.d/ ## Remove default nginx website RUN rm -rf /usr/share/nginx/html/* ## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder COPY --from=builder /usr/src/app/dist/devops /usr/share/nginx/html ## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder COPY --from=builder /usr/src/app/health /usr/share/nginx/html/health CMD /bin/bash -c "envsubst < /etc/nginx/conf.d/default.conf > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"
    在最后一步,修改了nginx conf文件,并使用

    “ {namespace / AppName}”

    值转置了ENVVALUES。

    问题

    部署到kubernetes集群后,我们看到index.html正在加载,但屏幕空白。在Chrome调试窗口中,我们看到支持文件.css,.js和image都抛出了404,即使主程序显示正确的uri。 在花费大量时间进行故障排除之后,我们发现这是一个路由问题,需要将基本href设置为“ ./”而不是默认值“ /”。 此后该站点变得可用,并且所有组件均可导航。 我们必须保护站点免受未经授权的访问,为此我们使用了[[Okta授权组件

    。 Okta的所有必需依赖项已安装并完成配置。 在本地运行时,我们发现成功进行身份验证后,重定向无法正常工作。映射到“ OktaCallbackComponent”的隐式/回调未得到有效加载。它显示了一个错误,并且与基本href标记中再次设置的值有关。我们将其改回“ /”,并且Authntication的整个流程以及对安全部分的重定向都工作得很好。但是现在,在重新部署之后,该站点再次引发了与路由相关的相同问题。

    因此,如果我们将Base href值设置为“ /”,那么该站点可以在本地正常运行,但不能在Kubernetes中运行。 但是,如果设置为“ ./”,它将在本地加载不安全的文件,不加载安全的文件(由于如上所述的Okta隐式/回调组件),就像在Kubernetes中一样,它加载了不安全的文件,但是像本地实例一样,在成功身份验证之后,Okta隐式/回调的重定向无法成功进行。

    我知道这与nginx路由以及服务器如何处理url并加载适当的部分有关。


    但是对如何获得期望的结果一无所知。
  • 我尝试了Internet上共享的许多想法组合,但是到目前为止,都没有奏效。应该不会太复杂,因为大多数都使用标准的实施准则。
  • 我的主要解决方法是找到一种方法,以将基本href设置为默认值(“ /”)来运行网站
  • 另一个观察结果:
  • 即使路由似乎有效,也只能通过根进行导航。也就是说,“ www.xcompany.com/MaxxD/DevOps/”根据定义的路由规则自动重定向到“ www.xcompany.com/MaxxD/DevOps/home”。但是,如果我直接在地址栏上输入“ www.xcompany.com/MaxxD/DevOps/home”,那么我会得到404。
  • 非常感谢您的帮助
  • 在我目前正在工作的一个项目中,我面临许多与路由相关的问题。我认为这是一个配置问题,任何有类似经验的人都可以分享他的经验。.Project ...
    angular docker nginx kubernetes okta
    1个回答
    0
    投票
    © www.soinside.com 2019 - 2024. All rights reserved.