Comment créer des applications conteneurisées fiables avec React et Kubernetes

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

Avec le développement rapide de la technologie cloud native, les applications conteneurisées sont devenues aujourd'hui une tendance brûlante dans le développement de logiciels. En tant que framework front-end populaire, la flexibilité et l'efficacité de React en font le premier choix de nombreux développeurs. Cet article explique comment créer des applications conteneurisées fiables à l'aide de React et Kubernetes et fournit des exemples de code spécifiques.

1. Création d'une application React
   Tout d'abord, nous devons créer une application React de base. Create React App peut être utilisé pour initialiser un nouveau projet React. Utilisez la commande suivante :

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

   Copier après la connexion

Cela créera un nouveau projet appelé my-app et démarrera le serveur de développement local. Après nous être assurés que le projet peut fonctionner normalement, nous pouvons passer aux étapes suivantes.

2. Écrire un Dockerfile
   Afin de conditionner une application React dans un conteneur, nous devons créer un Dockerfile. Dans le répertoire racine du projet, créez un fichier appelé Dockerfile et ajoutez le contenu suivant au fichier :

   # 使用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"]

   Copier après la connexion

Ce Dockerfile définit comment créer et exécuter l'image de l'application React. Il utilise une image Alpine basée sur Node, installe d'abord les dépendances du projet, puis copie les fichiers du projet dans le conteneur et exécute l'application React dans le conteneur.

3. Créer l'image Docker
   Dans le répertoire racine du projet, utilisez la commande suivante pour créer l'image Docker :

   docker build -t my-react-app .

   Copier après la connexion

   Cela construira une image nommée my-react-app basée sur la définition du fichier Dockerfile.

4. Créer un fichier de déploiement Kubernetes
   Ensuite, nous devons créer un fichier de déploiement Kubernetes pour déployer notre application. Dans le répertoire racine de votre projet, créez un fichier appelé déploiement.yaml et ajoutez le contenu suivant au fichier :

   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

   Copier après la connexion

Ce fichier définit un déploiement appelé my-react-app, en utilisant celui que vous venez de construire my-react -miroir d'application et exposé au port 3000.

5. Déployez l'application sur le cluster Kubernetes
   Dans la ligne de commande, utilisez la commande suivante pour déployer l'application sur le cluster Kubernetes :

   kubectl apply -f deployment.yaml

   Copier après la connexion

   Cela créera une nouvelle application nommée my-react dans le cluster Kubernetes tel que défini dans le fichier déploiement.yaml -Déploiement de l'application.

6. Vérifiez que l'application fonctionne correctement
   Vous pouvez vérifier que l'application fonctionne correctement en utilisant la commande suivante :

   kubectl get pods

   Copier après la connexion

   Si tout va bien, vous devriez voir un Pod nommé my-react-app en cours d'exécution.

7. Accès à l'application
   Enfin, nous pouvons accéder à notre application via le service. Dans le répertoire racine du projet, créez un fichier appelé service.yaml et ajoutez le contenu suivant au fichier :

   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

   Copier après la connexion

   Ce fichier définit un service appelé my-react-app-service qui peut être utilisé en externe. Les demandes sont transmises à notre application via l’équilibreur de charge.

Créez le service à l'aide de la commande suivante :

kubectl apply -f service.yaml

Exécutez la commande suivante pour obtenir l'adresse IP externe du service :

kubectl get services

Enfin, vous pouvez ouvrir l'application à l'aide d'un navigateur :

http://<EXTERNAL-IP>

Avec les étapes ci-dessus , nous avons exploité avec succès React et Kubernetes pour créer une application conteneurisée fiable. React offre de puissantes capacités de développement front-end, tandis que Kubernetes fournit une orchestration de conteneurs et un environnement d'exploitation fiables. Leur combinaison nous permet de créer, déployer et gérer facilement des applications conteneurisées.

J'espère que cet article vous sera utile et vous encouragera également à continuer à apprendre et à explorer en profondeur le développement de la technologie cloud native.

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!