Maison >interface Web >js tutoriel >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.
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
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.
É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"]
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.
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 .
Cela construira une image nommée my-react-app basée sur la définition du fichier Dockerfile.
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
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.
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
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.
Vérifiez que l'application fonctionne correctement
Vous pouvez vérifier que l'application fonctionne correctement en utilisant la commande suivante :
kubectl get pods
Si tout va bien, vous devriez voir un Pod nommé my-react-app en cours d'exécution.
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
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!