【发布时间】：2020-05-04 19:13:16
【问题描述】：
在我目前工作的一个项目中，我面临很多与路由相关的问题。我认为这是一个配置问题，任何有类似经验的人都可以分享他的经验..
项目概述：
项目在本地机器上完美构建和运行。
项目详情：
1。 Angular SPA 项目详情：
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，其中包含命名空间和App Name（“MaxxD/Devops”）的信息
3。码头工人详情
以下是 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 文件被修改，ENVVALUES 被转置为 "{namespace/AppName}" 值。
问题
部署到 kubernetes 集群后，我们看到 index.html 正在加载，但屏幕为空白。在 chrome 调试窗口中，我们看到 .css、.js 和图像等支持文件都在抛出 404，即使 home pae 显示了正确的 uri。
在排除故障花费大量时间后，我们认为这是一个路由问题，需要将基本 href 设置为“./”而不是默认值“/”。
该网站在此之后变得可用，并且所有组件都可以导航。
我们必须保护网站免遭未经授权的访问，为此我们使用了 Okta 授权组件。
Okta 所需的所有依赖项均已安装并完成配置。
在本地运行时，我们发现认证成功后，重定向无法正常工作。映射到“OktaCallbackComponent”的隐式/回调未正确加载。
它显示错误，并且再次与基本 href 标记中设置的值有关。
我们将其改回“/”，并且完整的身份验证流程和重定向到安全部分的工作绝对正常。
但现在在进行新部署后，该站点再次抛出相同的路由相关问题。
所以就目前而言，如果我们将 Base href 值设置为“/”，那么该站点在本地可以正常工作，但在 Kubernetes 中就不行。
但是，如果设置为“./”，它会在本地加载不安全的文件，不会加载安全的文件（由于上面讨论的 Okta 隐式/回调组件），就像在 Kubernetes 中一样，
它会加载不安全的文件，但与本地实例一样，在成功验证后，Okta implcit/callback 的重定向不会成功。
非常感谢任何帮助
【问题讨论】：
-
您能否提供
YAML部署的定义？过程中的哪些步骤促使您取得这一结果？ -
过程中的步骤： 1. 代码签入-触发器构建。 2. 作为构建的一部分，有以下步骤（每个步骤都在 yaml 文件中定义）。 3. 根据 yaml 文件准备 Kubernetes Pod（所有 UI 项目的模板。我正在尝试从 yaml 文件中清除公司特定的内容，以便将它们发布在这里）。 4. 构建容器镜像（基于 Docker File 上的说明，已经在帖子中）。 5、将容器镜像推送到Pod
-
* 还要补充一点：* 我们使用 istio 而不是默认入口控制器作为负载均衡器 - Istio 在将调用转发到 pod 之前也会形成 url（例如，www.xcompany.com/ Maxd/DevOps)
标签： angular docker nginx kubernetes okta