我在 Kubernetes 集群中部署了一個非常簡單的 React Web 應用程式（使用 Argon Dashboard Pro 模板）。當通過 nodeport 公開它時，它的 Docker 鏡像在本地和集群中都可以作業。但是通過 NGINX 入口公開它不起作用，盡管入口本身已針對其他暴露 REST 端點的服務和應用程式進行了測驗。網頁內容構建不正確，因為有些js檔案沒有找到，雖然通過nodeport暴露出來的也是這種情況。
Kubernetes 部署：
apiVersion: apps/v1
kind: Deployment
metadata:
name: react-deployment
namespace: support
labels:
app: react
stage: dev
spec:
replicas: 1
template:
metadata:
labels:
app: react
spec:
containers:
- name: react
image: fmaus/react-test:argon
ports:
- containerPort: 3000
name: react-port
imagePullPolicy: Always
restartPolicy: Always
selector:
matchLabels:
app: react
Kubernetes 入口
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: react-ingress
namespace: support
annotations:
nginx.ingress.kubernetes.io/use-regex: "true"
nginx.ingress.kubernetes.io/rewrite-target: /$2
nginx.ingress.kubernetes.io/configuration-snippet: |
proxy_set_header Accept-Encoding "";
more_set_headers "Content-Type: text/javascript; charset=UTF-8";
nginx.ingress.kubernetes.io/ssl-redirect: "false"
spec:
ingressClassName: nginx
rules:
- http:
paths:
- path: /test(/|$)(.*)
pathType: Prefix
backend:
service:
name: react-service
port:
number: 3000
Kubernetes 服務：
apiVersion: v1
kind: Service
metadata:
name: "react-service"
namespace: support
spec:
selector:
app: "react"
ports:
- port: 3000
type: ClusterIP
此代碼也可以在我的 GitHub 存盤庫中找到：https : //github.com/fmaus/react-kubernetes-test
To reproduce the problem, just apply these Kubernetes resources to a cluster and try to reach the web app through a browser via ingress (http://host/subpath). I have the resources deployed here: http://c105-164.cloud.gwdg.de:31600/test The error messages can be visited in the console of the browser (F12 when using Firefox):
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/bundle.js”. subpath:61:1
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/vendors~main.chunk.js”. subpath:61:1
Loading failed for the <script> with source “http://c105-164.cloud.gwdg.de:31600/static/js/main.chunk.js”.
I use Mozilla Firefox and the following NGINX ingress controller: https://kubernetes.github.io/ingress-nginx/
uj5u.com熱心網友回復：
我認為你在這里有兩個問題：
- 您將內容型別設定為 javascript，因此瀏覽器無法正確解釋 html。Fe http://c105-164.cloud.gwdg.de:31600/test/index.html顯示為源
- 您需要確保參考的資源包括子路徑，否則將導致 404
例如
<script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
需要從 /subpath/static/js/bundle.js 加載包，因為它是一個絕對鏈接。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358993.html
標籤：reactjs docker kubernetes nginx-ingress