測試您的 Vue.js 部署

目錄

先決條件

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

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

概述

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

建立 Kubernetes YAML 檔案

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

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

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

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

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vuejs-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: vuejs-sample
  template:
    metadata:
      labels:
        app: vuejs-sample
    spec:
      containers:
        - name: vuejs-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: vuejs-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app: vuejs-sample
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 30001

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

  • 部署 在 Pod 中部署一個 Vue.js 應用程式副本。該 Pod 使用您的 GitHub Actions CI/CD 工作流構建並推送的 Docker 映象
    （請參閱使用 GitHub Actions 自動化構建）。
    容器監聽埠 8080，該埠通常由 Nginx 用於提供您的生產 Vue.js 應用程式。

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

注意

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

部署並檢查您的應用程式

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

步驟 1. 應用 Kubernetes 配置

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

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

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

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

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

步驟 2. 檢查部署狀態

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

  $ kubectl get deployments

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

  NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
  vuejs-sample         1/1     1            1           1m14s

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

步驟 3. 驗證服務暴露

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

$ kubectl get services

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

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

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

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

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

您應該會看到由本地 Kubernetes 叢集提供的生產就緒的 Vue.js 示例應用程式正在執行。

步驟 5. 清理 Kubernetes 資源

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

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

預期輸出

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

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

摘要

在本節中，您學習瞭如何使用 Docker Desktop 將 Vue.js 應用程式部署到本地 Kubernetes 叢集。此設定允許您在生產環境中測試和除錯容器化應用程式，然後再將其部署到雲端。

你完成了什麼

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

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