部署于Minikube集群的Angular应用无法在浏览器访问求助

问题描述 #

我已将自定义Angular项目部署至Docker Hub（分别部署了完整项目及构建后的dist文件夹），两次容器日志均显示部署成功。尝试过NodePort和LoadBalancer两种Service类型（带或不带nodePort参数），Dockerfile中已暴露4200端口，配置文件里也设置了containerPort和targetPort。服务描述显示端点正确，也获取到了浏览器访问的URL，但应用始终无法在浏览器中打开。

部署与服务配置文件 #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: "audit-logger-frontend"
  labels:
    app: "logger-frontend"
spec:
  replicas: 1
  selector:
    matchLabels:
      app: "logger-frontend"
  template:
    metadata:
      labels:
        app: "logger-frontend"
    spec:
      containers:
      - name: "logger-frontend"
        image: "huzaifi0604/logger-frontend:1.0"
        ports:
        - containerPort: 4200
---
apiVersion: v1
kind: Service
metadata:
    name: "audit-logger-service"
spec:
    selector:
        app: "logger-frontend"
    type: LoadBalancer
    ports:
    - protocol: TCP  
      port: 4200
      targetPort: 4200
      nodePort: 31000

Dockerfile #

Docker File for Deploying angular Application 
# Use the official Node.js image
FROM node:18

# Updating the environment for the application
RUN apt-get update

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies with legacy peer deps
RUN npm install --legacy-peer-deps

# Copy the rest of the application source code
COPY . .

# Expose the port the app runs on
EXPOSE 4200

# Start the application
CMD ["npm", "start"]

Pod日志 #

D:\K8is\Audit_Logger_Deployment>kubectl logs audit-logger-frontend-8595d84b97-tlkl8

> demoapp@0.0.0 start
> ng serve

- Building...

Initial chunk files | Names         |  Raw size
main.js             | main          |  94.68 kB |
polyfills.js        | polyfills     |  86.03 kB |
styles.css          | styles        |  70.77 kB |

                    | Initial total | 251.48 kB

Application bundle generation complete. [2.580 seconds]

Watch mode enabled. Watching for file changes...
Re-optimizing dependencies because vite config has changed
  ➜  Local:   http://localhost:4200/

Service描述信息 #

:\K8is\Audit_Logger_Deployment>kubectl describe service audit-logger-service
Name:                     audit-logger-service
Namespace:                default
Labels:                   <none>
Annotations:              <none>
Selector:                 app=logger-frontend
Type:                     LoadBalancer
IP Family Policy:         SingleStack
IP Families:              IPv4
IP:                       10.104.15.127
IPs:                      10.104.15.127
Port:                     <unset>  4200/TCP
TargetPort:               4200/TCP
NodePort:                 <unset>  30000/TCP
Endpoints:                10.244.0.5:4200
Session Affinity:         None
External Traffic Policy:  Cluster
Events:                   <none>

Service访问URL #

minikube service audit-logger-service
|-----------|----------------------|-------------|---------------------------|
| NAMESPACE |         NAME         | TARGET PORT |            URL            |
|-----------|----------------------|-------------|---------------------------|
| default   | audit-logger-service |        4200| http://192.168.49.2:30000 |
|-----------|----------------------|-------------|---------------------------|
* Starting tunnel for service audit-logger-service.
|-----------|----------------------|-------------|-----------------------|
| NAMESPACE |         NAME         | TARGET PORT |          URL          |
|-----------|----------------------|-------------|-----------------------|
| default   | audit-logger-service |             | http://127.0.0.1:7261 |
|-----------|----------------------|-------------|-----------------------|
* Opening service default/audit-logger-service in default browser...
! Because you are using a Docker driver on windows, the terminal needs to be open to run it.

问题根源及解决方法 #

1. ng serve绑定地址限制
   从Pod日志能看到，ng serve默认绑定到了localhost:4200，这意味着服务只能在容器内部的localhost访问，K8s Service无法通过容器IP触达这个端口。
   解决：修改Dockerfile的启动命令，让ng serve监听所有地址：

   CMD ["npm", "start", "--", "--host", "0.0.0.0"]
   

   或者直接在package.json的scripts里修改start命令：

   "start": "ng serve --host 0.0.0.0"
   

2. 生产环境不建议使用ng serve
   ng serve是开发环境专用服务器，性能弱且不适合生产场景。正确做法是先构建Angular项目生成dist文件夹，再用Nginx等静态文件服务器部署，优化后的Dockerfile示例：

   # 构建阶段
   FROM node:18 as builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install --legacy-peer-deps
   COPY . .
   RUN npm run build --prod
   
   # 运行阶段
   FROM nginx:alpine
   COPY --from=builder /app/dist/[你的项目文件夹名称] /usr/share/nginx/html
   EXPOSE 80
   # Nginx默认监听80端口，无需额外启动命令
   

   同时要同步修改K8s配置：将containerPort改为80，Service的targetPort和port也改为80。

3. Minikube网络配置验证

   • 执行minikube ip获取节点IP，尝试用http://<minikube-ip>:31000访问（注意你的配置里nodePort是31000，但Service描述显示为30000，需确认是否修改配置后重新部署了Service）。
   • 先在Pod内部验证端口可用性：执行kubectl exec -it <你的Pod名称> -- curl localhost:4200，如果能返回页面内容，说明服务在容器内正常，问题出在外部访问的绑定地址；如果不能，说明服务本身启动异常。

内容的提问来源于stack exchange，提问作者Muhammad Huzaifa