測試你的 Angular 部署

目錄

先決條件

在開始之前，請確保您已完成以下操作

Kubernetes 新手？
訪問 Kubernetes 基礎教程，熟悉叢集、Pod、部署和服務的工作原理。

概述

本節將指導你使用 Docker Desktop 內建的 Kubernetes 在本地部署容器化的 Angular 應用程式。在本地 Kubernetes 叢集中執行你的應用程式可以高度模擬真實的生產環境，使你能夠在將工作負載推廣到預釋出或生產環境之前，自信地進行測試、驗證和除錯。

建立 Kubernetes YAML 檔案

請按照以下步驟定義部署配置

  1. 在專案根目錄下，建立一個名為：`angular-sample-kubernetes.yaml` 的新檔案。

  2. 在您的 IDE 或首選文字編輯器中開啟該檔案。

  3. 新增以下配置，並確保將 `{DOCKER_USERNAME}` 和 `{DOCKERHUB_PROJECT_NAME}` 替換為你實際的 Docker Hub 使用者名稱和倉庫名，這些資訊來自之前的使用 GitHub Actions 自動化你的構建。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: angular-sample
  template:
    metadata:
      labels:
        app: angular-sample
    spec:
      containers:
        - name: angular-container
          image: {DOCKER_USERNAME}/{DOCKERHUB_PROJECT_NAME}:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 8080
          resources:
            limits:
              cpu: "500m"
              memory: "256Mi"
            requests:
              cpu: "250m"
              memory: "128Mi"
---
apiVersion: v1
kind: Service
metadata:
  name: angular-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app: angular-sample
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 30001

此清單定義了兩個主要的 Kubernetes 資源，由 --- 分隔

  • 部署：在 pod 中部署一個 Angular 應用程式副本。該 pod 使用由 GitHub Actions CI/CD 工作流構建和推送的 Docker 映象
    （參考使用 GitHub Actions 自動化你的構建）。
    容器監聽埠 `8080`，該埠通常由 Nginx 用於提供你的生產 Angular 應用程式。

  • 服務 (NodePort) 將已部署的 Pod 暴露給您的本地機器。
    它將您的主機上的埠 30001 的流量轉發到容器內的埠 8080。
    這使您可以在瀏覽器中透過 https://:30001 訪問應用程式。

注意

要了解更多關於 Kubernetes 物件的資訊，請參閱Kubernetes 文件。

部署並檢查您的應用程式

按照以下步驟將容器化的 Angular 應用程式部署到本地 Kubernetes 叢集並驗證其是否正常執行。

步驟 1. 應用 Kubernetes 配置

在你的終端中，導航到 `angular-sample-kubernetes.yaml` 檔案所在的目錄，然後使用以下命令部署資源：

  $ kubectl apply -f angular-sample-kubernetes.yaml

如果一切配置正確，您將看到部署和服務都已建立的確認資訊

  deployment.apps/angular-sample created
  service/angular-sample-service created

這確認了部署和服務都已成功建立，並且現在正在你的本地叢集中執行。

步驟 2. 檢查部署狀態

執行以下命令檢查部署狀態

  $ kubectl get deployments

你應該看到類似於以下內容的輸出

  NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
  angular-sample       1/1     1            1           14s

這確認您的 Pod 已啟動並執行，並且有一個可用的副本。

步驟 3. 驗證服務暴露

檢查 NodePort 服務是否將您的應用程式暴露給本地機器

$ kubectl get services

您應該會看到類似下面的內容：

NAME                     TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)          AGE
angular-sample-service   NodePort    10.100.185.105    <none>        8080:30001/TCP   1m

此輸出確認您的應用程式可透過 NodePort 在埠 30001 上訪問。

步驟 4. 在瀏覽器中訪問您的應用程式

開啟瀏覽器並導航到 https://:30001。

你應該會看到你的生產就緒的 Angular 示例應用程式正在執行 — 由你的本地 Kubernetes 叢集提供服務。

步驟 5. 清理 Kubernetes 資源

測試完成後，您可以使用以下命令刪除部署和服務

  $ kubectl delete -f angular-sample-kubernetes.yaml

預期輸出

  deployment.apps "angular-sample" deleted
  service "angular-sample-service" deleted

這確保您的叢集保持乾淨併為下一次部署做好準備。

摘要

在本節中，你學習瞭如何使用 Docker Desktop 將你的 Angular 應用程式部署到本地 Kubernetes 叢集。這種設定允許你在將其部署到雲端之前，在類似於生產環境的環境中測試和除錯你的容器化應用程式。

你完成了什麼

  • 為你的 Angular 應用程式建立了 Kubernetes Deployment 和 NodePort Service
  • 使用 kubectl apply 在本地部署應用程式
  • 驗證了應用程式正在執行並可透過 https://:30001 訪問
  • 測試後清理了您的 Kubernetes 資源

探索官方參考資料和最佳實踐以提升您的 Kubernetes 部署工作流程