So erstellen Sie zuverlässige Containeranwendungen mit React und Kubernetes

So erstellen Sie zuverlässige Containeranwendungen mit React und Kubernetes

Mit der rasanten Entwicklung der Cloud-Native-Technologie sind Containeranwendungen heute zu einem heißen Trend in der Softwareentwicklung geworden. Als beliebtes Frontend-Framework ist React aufgrund seiner Flexibilität und Effizienz für viele Entwickler die erste Wahl. In diesem Artikel wird erläutert, wie Sie mit React und Kubernetes zuverlässige Containeranwendungen erstellen, und es werden einige spezifische Codebeispiele bereitgestellt.

1. Erstellen einer React-App
   Zuerst müssen wir eine grundlegende React-App erstellen. Mit Create React App kann ein neues React-Projekt initialisiert werden. Verwenden Sie den folgenden Befehl:

   npx create-react-app my-app
   cd my-app
   npm start

   Nach dem Login kopieren

Dadurch wird ein neues Projekt namens my-app erstellt und der lokale Entwicklungsserver gestartet. Nachdem wir sichergestellt haben, dass das Projekt normal laufen kann, können wir mit den nächsten Schritten fortfahren.

2. Eine Docker-Datei schreiben
   Um eine React-Anwendung in einen Container zu packen, müssen wir eine Docker-Datei erstellen. Erstellen Sie im Stammverzeichnis des Projekts eine Datei namens Dockerfile und fügen Sie der Datei den folgenden Inhalt hinzu:

   # 使用Node镜像作为基础镜像
   FROM node:14-alpine
   
   # 将工作目录设置为/app
   WORKDIR /app
   
   # 将package.json和package-lock.json复制到容器中
   COPY package*.json ./
   
   # 安装应用的依赖
   RUN npm install
   
   # 将项目文件复制到容器中
   COPY . ./
   
   # 构建React应用
   RUN npm run build
   
   # 在容器中运行React应用
   CMD ["npm", "start"]

   Nach dem Login kopieren

Diese Docker-Datei definiert, wie das Image der React-Anwendung erstellt und ausgeführt wird. Es verwendet ein auf Node basierendes Alpine-Image, installiert zunächst die Abhängigkeiten des Projekts, kopiert dann die Projektdateien in den Container und führt die React-Anwendung im Container aus.

3. Erstellen Sie das Docker-Image
   Verwenden Sie im Stammverzeichnis des Projekts den folgenden Befehl, um das Docker-Image zu erstellen:

   docker build -t my-react-app .

   Nach dem Login kopieren

   Dadurch wird ein Image mit dem Namen „my-react-app“ basierend auf der Definition der Dockerfile-Datei erstellt.

4. Kubernetes-Bereitstellungsdatei erstellen
   Als nächstes müssen wir eine Kubernetes-Bereitstellungsdatei erstellen, um unsere Anwendung bereitzustellen. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen „deployment.yaml“ und fügen Sie der Datei den folgenden Inhalt hinzu:

   apiVersion: apps/v1
   kind: Deployment
   metadata:
     name: my-react-app
     labels:
    app: my-react-app
   spec:
     replicas: 1
     selector:
    matchLabels:
      app: my-react-app
     template:
    metadata:
      labels:
        app: my-react-app
    spec:
      containers:
      - name: my-react-app
        image: my-react-app
        ports:
        - containerPort: 3000

   Nach dem Login kopieren

Diese Datei definiert eine Bereitstellung namens „my-react-app“ unter Verwendung der Bereitstellung, die Sie gerade „my-react“ erstellt haben -app gespiegelt und auf Port 3000 verfügbar gemacht.

5. Stellen Sie die Anwendung im Kubernetes-Cluster bereit.
   Verwenden Sie in der Befehlszeile den folgenden Befehl, um die Anwendung im Kubernetes-Cluster bereitzustellen:

   kubectl apply -f deployment.yaml

   Nach dem Login kopieren

   Dadurch wird eine neue Anwendung mit dem Namen „my-react“ im Kubernetes-Cluster erstellt, wie in definiert die Datei „deployment.yaml“ – Bereitstellung der App.

6. Überprüfen Sie, ob die App ordnungsgemäß ausgeführt wird.
   Mit dem folgenden Befehl können Sie überprüfen, ob die App ordnungsgemäß ausgeführt wird:

   kubectl get pods

   Nach dem Login kopieren

   Wenn alles in Ordnung ist, sollte ein Pod namens „my-react-app“ ausgeführt werden.

7. Zugriff auf die Anwendung
   Schließlich können wir über den Dienst auf unsere Anwendung zugreifen. Erstellen Sie im Stammverzeichnis des Projekts eine Datei namens service.yaml und fügen Sie der Datei den folgenden Inhalt hinzu:

   apiVersion: v1
   kind: Service
   metadata:
     name: my-react-app-service
   spec:
     selector:
    app: my-react-app
     type: LoadBalancer
     ports:
    - protocol: TCP
      port: 80
      targetPort: 3000

   Nach dem Login kopieren

   Diese Datei definiert einen Dienst namens my-react-app-service, der extern verwendet werden kann. Anfragen werden an unsere weitergeleitet Anwendung über den Load Balancer.

Erstellen Sie den Dienst mit dem folgenden Befehl:

kubectl apply -f service.yaml

Führen Sie den folgenden Befehl aus, um die externe IP-Adresse des Dienstes abzurufen:

kubectl get services

Schließlich können Sie die Anwendung mit einem Browser öffnen:

http://<EXTERNAL-IP>

Mit den oben genannten Schritten Wir haben React und Kubernetes erfolgreich genutzt und eine zuverlässige Containeranwendung erstellt. React bietet leistungsstarke Front-End-Entwicklungsfunktionen, während Kubernetes eine zuverlässige Container-Orchestrierung und Betriebsumgebung bietet. Ihre Kombination ermöglicht uns die einfache Erstellung, Bereitstellung und Verwaltung von Containeranwendungen.

Ich hoffe, dass dieser Artikel für Sie hilfreich ist und Sie auch dazu ermutigt, die Entwicklung der Cloud-nativen Technologie weiter zu erlernen und eingehend zu erkunden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie zuverlässige Containeranwendungen mit React und Kubernetes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!