Angular + Nginx + Kubernetes - 子目录部署问题
Angular + Nginx + Kubernetes - Deployment on Sub Directory Problem
将我的 Angular 应用程序部署到生产环境时,我遇到了一个问题,即我的应用程序无法 see/use 构建时生成的捆绑脚本(运行time、main、css, 等等)
背景:
我有一个 URL,两个 Angular 应用程序应该 运行 关闭。
- example.com
- 示例。com/subroute
应用程序 #1 运行良好,符合预期。
当我转到 URL 时,应用程序 #2 似乎找到了正确的 index.html 文件,但它找不到任何已创建的脚本 (https://example.com/subroute/runtime-es2015.ad3f6d66c5c633672c3c.js)。
关于我还可以在这里尝试什么的任何想法?提前致谢!
更新#1:
如果我将 kubernetes ingress 配置更改为以下内容,我可以访问我的应用程序,但现在无法到达预期的 /subroute/api 路由。
例如,我可以打https://example.com/subroute and my app loads as intended, but if I do a GET request to https://example.com/subroute/api/entity,我得到一个404。
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/proxy-read-timeout: "12h"
nginx.ingress.kubernetes.io/ssl-redirect: "true"
nginx.ingress.kubernetes.io/rewrite-target: /
name: team-webapp-public-ingress
namespace: default
spec:
tls:
- hosts:
- example.com
secretName: example-tls
rules:
- host: example.com
http:
paths:
- path: /subroute(/($|.*))?
backend:
serviceName: example-subroute-frontend-service
servicePort: 80
- host: example.com
http:
paths:
- path: /subroute/api/
backend:
serviceName: API-service
servicePort: 9872
应用 #2 Angular 配置
npm run build -- --output-path=./dist/out --configuration production --buildOptimizer=true --base-href '/subroute/' --deployUrl '/subroute/'
应用 #2 Nginx 配置
# Expires map
map $sent_http_content_type $expires {
default off;
text/html epoch;
text/css max;
application/json max;
application/javascript max;
~image/ max;
}
server {
default_type text/html;
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
expires $expires;
gzip on;
}
应用 #2 Kubernetes 配置
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/proxy-read-timeout: "12h"
nginx.ingress.kubernetes.io/ssl-redirect: "false"
nginx.ingress.kubernetes.io/rewrite-target: /
name: team-webapp-public-ingress
namespace: default
spec:
tls:
- hosts:
- example.com
secretName: example-tls
rules:
- host: example.com
http:
paths:
- path: /subroute/
backend:
serviceName: example-subroute-frontend-service
servicePort: 80
- host: example.com
http:
paths:
- path: /subroute/api/
backend:
serviceName: API-service
servicePort: 9872
看起来最后一步是将 servlet 路径上下文添加到我的 Spring 启动服务,即 运行。现在一切正常!
将我的 Angular 应用程序部署到生产环境时,我遇到了一个问题,即我的应用程序无法 see/use 构建时生成的捆绑脚本(运行time、main、css, 等等)
背景:
我有一个 URL,两个 Angular 应用程序应该 运行 关闭。
- example.com
- 示例。com/subroute
应用程序 #1 运行良好,符合预期。
当我转到 URL 时,应用程序 #2 似乎找到了正确的 index.html 文件,但它找不到任何已创建的脚本 (https://example.com/subroute/runtime-es2015.ad3f6d66c5c633672c3c.js)。
关于我还可以在这里尝试什么的任何想法?提前致谢!
更新#1:
如果我将 kubernetes ingress 配置更改为以下内容,我可以访问我的应用程序,但现在无法到达预期的 /subroute/api 路由。
例如,我可以打https://example.com/subroute and my app loads as intended, but if I do a GET request to https://example.com/subroute/api/entity,我得到一个404。
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/proxy-read-timeout: "12h"
nginx.ingress.kubernetes.io/ssl-redirect: "true"
nginx.ingress.kubernetes.io/rewrite-target: /
name: team-webapp-public-ingress
namespace: default
spec:
tls:
- hosts:
- example.com
secretName: example-tls
rules:
- host: example.com
http:
paths:
- path: /subroute(/($|.*))?
backend:
serviceName: example-subroute-frontend-service
servicePort: 80
- host: example.com
http:
paths:
- path: /subroute/api/
backend:
serviceName: API-service
servicePort: 9872
应用 #2 Angular 配置
npm run build -- --output-path=./dist/out --configuration production --buildOptimizer=true --base-href '/subroute/' --deployUrl '/subroute/'
应用 #2 Nginx 配置
# Expires map
map $sent_http_content_type $expires {
default off;
text/html epoch;
text/css max;
application/json max;
application/javascript max;
~image/ max;
}
server {
default_type text/html;
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
expires $expires;
gzip on;
}
应用 #2 Kubernetes 配置
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/proxy-read-timeout: "12h"
nginx.ingress.kubernetes.io/ssl-redirect: "false"
nginx.ingress.kubernetes.io/rewrite-target: /
name: team-webapp-public-ingress
namespace: default
spec:
tls:
- hosts:
- example.com
secretName: example-tls
rules:
- host: example.com
http:
paths:
- path: /subroute/
backend:
serviceName: example-subroute-frontend-service
servicePort: 80
- host: example.com
http:
paths:
- path: /subroute/api/
backend:
serviceName: API-service
servicePort: 9872
看起来最后一步是将 servlet 路径上下文添加到我的 Spring 启动服务,即 运行。现在一切正常!