Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2023-09-26 09:07:41
original
1365 Les gens l'ont consulté

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.

  1. É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.

  1. 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.

  2. 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.

  1. 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.

  2. 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.

  3. 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
Copier après la connexion

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

kubectl get services
Copier après la connexion

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

http://<EXTERNAL-IP>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!