无法访问 Google 云上已部署的 Angular 应用程序

Posted 2023-03-07

【中文标题】无法访问 Google 云上已部署的 Angular 应用程序

【英文标题】：Unable to access deployed Angular application on Google cloud

【发布时间】：2021-12-31 05:34:44

【问题描述】：

我使用 Nodejs、Angular、MongoDB 和 Express 在 Google 云上开发了我的项目。我已经成功地为 Express 和 Node.js 构建了身份验证部分。现在我正在尝试集成 Angular。我已经使用谷歌云设置了 Ingress-nginx，并正在使用谷歌云 shell 来创建代码。

我按照以下步骤进行设置

在 Google Cloud 上设置 Ingress-NGINX 的步骤

创建一个项目 blog-dev 在 us-central1-c 区域中创建具有 3 个 N1-g1 小型实例的集群 blog-dev 导航到https://kubernetes.github.io/ingress-nginx/deploy/#gce-gke 在谷歌云账号上，打开云shell并导航到终端中的BPB_MEAN_Framework目录 执行命令 gcloud init，重新初始化集群，选择账户、项目和地区 执行命令 gcloud container clusters get-credentials blog-dev 执行命令kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.0.3/deploy/static/provider/cloud/deploy.yaml配置ingress-nginx 转到网络服务 -> 负载平衡并检查负载平衡器是否已创建。记下负载均衡器的ip 打开hosts.ini文件并更新如下图 130.211.113.34 博客.dev 8.1) kubectl create secret generic jwt-secret --from-literal=JWT_KEY=asdf 运行脚手架开发 在浏览器中转到http://blog.dev/api/users/currentuser 并获取“隐私错误”页面。点击此处的“高级” 在键盘上输入 thisisunsafe

下面列出了各种文件

下面列出的是Kubernetes部署yaml

apiVersion: apps/v1
kind: Deployment
metadata: 
  name: client-depl
spec: 
  replicas: 1
  selector: 
    matchLabels:
      app: client
  template: 
    metadata:
      labels:
        app: client 
    spec:
      containers:
        - name: client
          image: us.gcr.io/blog-dev-326403/client:project-latest
---
apiVersion: v1
kind: Service
metadata:
  name: client-srv
spec:
  selector:
    app: client
  ports: 
    - name: client
      protocol: TCP
      port: 4200
      targetPort: 4200    

下面列出的是 Ingress 服务

apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: 'true'
spec:
  rules:
    - host: blog.dev
      http:
        paths:
          - path: /api/users/?(.*)
            backend:
              serviceName: auth-srv
              servicePort: 3100
          - path: /?(.*)
            backend:
              serviceName: client-srv
              servicePort: 4200

下面列出的是 Skaffold yaml

apiVersion: skaffold/v2alpha3
kind: Config
deploy:
  kubectl: 
    manifests:
      - ./infra/k8s/*
build:
  #local:
   # push: false
  googleCloudBuild:
    projectId: blog-dev-326403
  artifacts:
    - image: us.gcr.io/blog-dev-326403/auth
      context: auth
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/.ts'
            dest: .
    - image: us.gcr.io/blog-dev-326403/client
      context: client
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/.ts'
            dest: .

angular文件夹结构如下图 Angular project folder structure

我在 hosts.ini 文件中添加了 Google 云负载均衡器 ip，后跟 blog.dev。

当我运行 skaffold dev 时，没有错误。当我尝试访问 blog.dev 时，我得到一个 502 bad gateway。

当我导航到客户端目录并在 Google Cloud Shell 中键入 npm start 并访问预览时，我的网站如图所示 Application in preview mode in Google cloud 请帮助...这对我来说是一个很好的展示

【参考方案1】：

尝试从部署中打开容器端口

ports:
- containerPort: 80

部署

apiVersion: apps/v1
kind: Deployment
metadata: 
  name: client-depl
spec: 
  replicas: 1
  selector: 
    matchLabels:
      app: client
  template: 
    metadata:
      labels:
        app: client 
    spec:
      containers:
        - name: client
          image: us.gcr.io/blog-dev-326403/client:project-latest
          ports:
          - containerPort: 4200

【讨论】：

嗨，苛刻，在更改部署和添加 containerPort 后访问 blog.dev 时，我仍然收到 502 bad gateway。请推荐！

任何帮助表示赞赏

【参考方案2】：

我自己找到了答案。这是我的解决方案

包.json

package.json 条目如下所示

"prod": "ng build --prod",

Angular Dockerfile

FROM node:16.4.0 as build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run prod

FROM nginx:1.19
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist/Angular-Mean/ /usr/share/nginx/html

我放了一个nginx配置文件如下

worker_processes  1;

events 
  worker_connections  1024;


http 
  server 
    listen 80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript 
    application/x-javascript text/xml application/xml application/xml+rss 
    text/javascript;

    location / 
      try_files $uri $uri/ /index.html;
    
  

部署文件如下所示

apiVersion: apps/v1
kind: Deployment
metadata: 
  name: client-depl
spec: 
  replicas: 1
  selector: 
    matchLabels:
      app: client
  template: 
    metadata:
      labels:
        app: client 
    spec:
      containers:
        - name: client
          image: us.gcr.io/blog-dev-326403/client:project-latest
          ports:
          - containerPort: 4200
---
apiVersion: v1
kind: Service
metadata:
  name: client-srv
spec:
  selector:
    app: client
  type: LoadBalancer
  ports: 
    - name: client
      protocol: TCP
      port: 80
      targetPort: 80
      nodePort: 31000
     

最终的工件是入口服务

apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: 'true'
spec:
  rules:
    - host: blog.dev
      http:
        paths:
          - path: /api/users/?(.*)
            backend:
              serviceName: auth-srv
              servicePort: 3100
          - path: /?(.*)
            backend:
              serviceName: client-srv
              servicePort: 80

其余配置保持不变。请使用此配置并导航到https://blog.dev，您将获得如图所示的输出Blog Website