Comment créer des applications frontales conteneurisées évolutives à l'aide de React et Kubernetes

Comment créer une application frontale conteneurisée évolutive à l'aide de React et Kubernetes

Avec le développement du développement logiciel moderne, la conteneurisation est devenue une méthode de déploiement populaire. En tant que framework de développement front-end populaire, React est également largement utilisé. Cet article explique comment utiliser React et Kubernetes pour créer une application frontale conteneurisée évolutive et fournit des exemples de code spécifiques.

1. Créer une application React

Tout d'abord, nous devons créer une application React. Utilisez la commande npx pour créer une nouvelle application React.

npx create-react-app my-app
cd my-app

2. Écrivez Dockerfile

Ensuite, nous devons écrire Dockerfile pour construire notre conteneur. Créez un fichier nommé Dockerfile dans le répertoire racine du projet et ajoutez le contenu suivant :

# 使用官方的Node镜像
FROM node:12-alpine

# 设置工作目录
WORKDIR /app

# 复制package.json和package-lock.json到工作目录
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制所有文件到工作目录
COPY . .

# 构建项目
RUN npm run build

# 设置容器的默认命令
CMD [ "npm", "start" ]

3. Créez et poussez l'image Docker

docker build -t my-app .
docker tag my-app username/my-app
docker push username/my-app

4. Créez un déploiement Kubernetes

Créez un fichier nommé déploiement.yaml et ajoutez le contenu suivant :

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: my-app
  template:
    metadata:
      labels:
        app: my-app
    spec:
      containers:
      - name: my-app-container
        image: username/my-app
        ports:
        - containerPort: 3000

Utilisez ensuite la commande kubectl pour créer le déploiement :

kubectl create -f deployment.yaml

5. Créez un service Kubernetes

Créez un fichier nommé service.yaml et ajoutez le contenu suivant :

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

Utilisez ensuite la commande kubectl pour créer le Service ：

kubectl create -f service.yaml

6. Accédez à l'application

Utilisez la commande kubectl pour obtenir l'adresse IP externe du Service :

kubectl get services

Accédez ensuite à l'adresse dans le navigateur pour voir l'application React déployée sur Kubernetes.

Résumé

Cet article explique comment utiliser React et Kubernetes pour créer des applications frontales conteneurisées évolutives. En regroupant les applications React dans des images Docker et en utilisant Kubernetes pour le déploiement et la gestion, l'évolutivité et la haute disponibilité des applications peuvent être obtenues. J'espère que cet article pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!