測試您的 React.js 部署

目錄

先決條件

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

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

概述

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

建立 Kubernetes YAML 檔案

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

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

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

  3. 新增以下配置，並務必將 {DOCKER_USERNAME} 和 {DOCKERHUB_PROJECT_NAME} 替換為您在之前的 使用 GitHub Actions 自動化構建 中實際的 Docker Hub 使用者名稱和倉庫名稱。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: reactjs-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: reactjs-sample
  template:
    metadata:
      labels:
        app: reactjs-sample
    spec:
      containers:
        - name: reactjs-container
          image: {DOCKER_USERNAME}/{DOCKERHUB_PROJECT_NAME}:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
  name:  reactjs-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app:  reactjs-sample
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 30001

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

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

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

注意

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

部署並檢查您的應用程式

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

步驟 1. 應用 Kubernetes 配置

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

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

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

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

此輸出表示 Deployment 和 Service 都已成功建立並正在您的本地叢集中執行。

步驟 2. 檢查部署狀態

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

  $ kubectl get deployments

您應該會看到類似以下的輸出：

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

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

步驟 3. 驗證服務暴露

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

$ kubectl get services

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

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

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

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

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

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

步驟 5. 清理 Kubernetes 資源

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

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

預期輸出

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

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

摘要

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

你完成了什麼

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

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