Dockerizing React Applications pour l'intégration continue

Apprenez à utiliser Docker et la conteneurisation dans vos applications React et à en comprendre les avantages grâce à cet exemple simple

Il existe une tendance dominante dans le développement de logiciels autour de l'idée d'organiser nos applications dans des écosystèmes partageables appelés conteneurs. Ce processus consistant à placer un logiciel dans un conteneur virtuel est communément appelé conteneurisation.

La conteneurisation est utile car elle fournit un environnement cohérent pour le développement du code, du développement au déploiement. Aujourd'hui, je veux passer en revue une stratégie efficace pour ce faire avec une application React. Nous examinerons comment la conteneurisation nous permet de mieux utiliser les pratiques de l'intégration continue .

Création et conteneurisation d'une application

Pour commencer, nous allons générer une application React avec ] create-react-app :

 # Si vous n'avez pas installé create-react-app:
# npm installer -g créer-réagir-app
create-react-app application d'intégration continue 

Cela va créer une nouvelle application React dans un répertoire appelé continu-intergration-app . La dénomination des choses n'a pas vraiment d'importance ici, alors n'hésitez pas à utiliser un nom de votre choix. Nous aurons également besoin d'ajouter un Dockerfile dans notre projet. Nous pouvons le faire via:

 touch Dockerfile 

Notre Dockerfile va être la pierre angulaire de la construction de l'environnement réel de la machine virtuelle pour notre application React. Nous allons le remplir avec toute la configuration et les dépendances dont nous avons besoin pour exécuter, tester et déployer efficacement notre code.

Un brouillon initial d'un Dockerfile pour une application React pourrait ressembler à ceci :

 # La version de Node que nous utiliserons pour notre version de React.
# Vous devrez peut-être chercher dans le répertoire Node une version adaptée
# la version de React que vous utilisez.
FROM noeud: 8.9-alpine

# Créez un répertoire de travail et copiez sur nos fichiers de manifeste de dépendance.
RUN mkdir / application
WORKDIR / application
COPY / src / app / src
COPIE ["package.json", "package-lock.json*", "./"]

# Si vous utilisez du fil:
# construction de fils
RUN npm install --production --silent && mv node_modules ../

# Exposer PORT 3000 sur notre machine virtuelle afin que nous puissions exécuter notre serveur
EXPOSE 3000 

Il y a quelques choses intéressantes à propos de notre installation Dockerfile que je veux souligner. La plus grande décision que nous prenons est de développer ce que serait notre environnement de production idéal. L'avantage de ceci est que nous sommes essentiellement capables de simuler une machine de production de toute sorte (Windows, macOS ou Linux) et que nous sommes confiants que le code que nous écrivons se traduit parfaitement vers sa destination finale.

, il y a un facteur limitant en ne ciblant que la production dans notre conteneur Dockerized. Nous allons couvrir ces inconvénients un peu. Avant cela, nous devons nous concentrer sur la façon d'orchestrer, de configurer et d'exécuter efficacement le conteneur que nous venons de construire.

Orchestrer vos conteneurs

Notre première étape avec l'orchestration de conteneurs est de s'habituer à utiliser le docker composer . Cet outil nous permet d'orchestrer plusieurs conteneurs et configurations pour créer une image Docker qui correspond exactement à nos besoins actuels.

Pour notre application React, nous allons d'abord créer quelque chose comme:

 # docker -compose.yml

version: '3.4'

prestations de service:
  web:
    construire:
      le contexte: .
      dockerfile: Dockerfile
    environnement:
      - NODE_ENV = production
    commande: npm start
    ports:
      - 3000: 3000
    volumes:
      -.: / app 

Ces quelques lignes de code dictent tout à partir de variables d'environnement pour lancer des commandes pour nos conteneurs. Pour plus de ressources sur ce que vous pouvez faire dans un fichier docker-compose.yml consultez la documentation de Docker sur Compose .

Pour tout construire, nous allons faire un court commande:

 docker-compose build web 

Le processus qui suit peut prendre un certain temps. Docker va chercher les ressources nécessaires pour construire notre conteneur virtuel et ensuite les compiler. Une fois terminé, nous pouvons démarrer le conteneur via:

 docker-compose web 

Cela déclenchera npm start et lancera notre serveur React. Une fois opérationnel, nous devrions pouvoir accéder à notre application depuis http: // localhost: 3000 comme nous le ferions normalement pour une instance create-react-app !

Avec quelques principes de base d'orchestration implémentés, nous pouvons maintenant commencer à chercher une meilleure optimisation de nos conteneurs pour une intégration continue!

Docker et intégration continue

Contenir notre application React nous permet de développer efficacement dans un environnement cohérent du développement à la production. Cependant, cela débloque également une énorme valeur quand il s'agit de la pratique de l'intégration continue.

Beaucoup construisent des services comme TravisCI Codeship ou CircleCi permettent les développeurs à utiliser leurs configurations Docker pour tout exécuter, du test au déploiement dans un environnement Dockerized. L'idée de l'intégration continue rend nos paramètres d'environnement de production toujours sur un peu intéressants. Pour cette raison, nous devons également configurer un conteneur de test et de développement pour notre application.

Nous allons séparer notre docker-compose.yml en morceaux qui répondent mieux à nos besoins environnementaux. Il va également falloir jongler avec plusieurs Dockerfile s. Cependant, docker-composer fera la plupart des gros travaux pour nous ici.

Tout d'abord, nous allons écrire une configuration production.yml composer pour injecter dans notre base fichier docker-compose.yml . Nous renommerons aussi notre fichier Dockerfile existant en Dockerfile-production aussi.

 # production.yml

version: '3.4'

prestations de service:
  web:
    construire:
      le contexte: .
      dockerfile: Dockerfile-production
    environnement:
      - NODE_ENV = production

Ensuite, nous commencerons à réduire notre fichier docker-compose.yml :

 # docker-compose.yml

version: '3.4'

prestations de service:
  web:
    commande: npm start
    ports:
      - 3000: 3000
    volumes:
      -.: / app 

Avec deux fichiers de configuration séparés .yml dans le mix, nous allons devoir ajuster la façon dont nous ordonnons à docker-composer de construire nos conteneurs. Nous allons maintenant utiliser la commande:

 docker-compose docker-compose -f docker-compose.yml -f production.yml build web 

La ​​commande est beaucoup plus bavarde que notre normal docker-compose construire le web . Cependant, nous avons maintenant l'avantage de remplacer la configuration .yml que nous voulons en fonction de notre environnement. Nous devrons souvent créer un nouveau Dockerfile pour refléter précisément certains de ces paramètres environnementaux.

Par exemple, disons que nous voulions simuler à quoi ressemblait une version de test de notre application, afin que nous puissions exécuter des tests sur les services CI. Nous aurions besoin que notre Dockerfile installe nos dépendances de test / non-production afin de pouvoir lancer des tests.

Le nouveau Dockerfile va ressembler à notre ébauche initiale, avec une différence: Nous ne construisons pas pour la production.

 # La version de Node que nous utiliserons pour notre version de React.
# Vous devrez peut-être chercher dans le répertoire Node une version adaptée
# la version de React que vous utilisez.
FROM noeud: 8.9-alpine

# Créez un répertoire de travail et copiez sur nos fichiers de manifeste de dépendance.
RUN mkdir / application
WORKDIR / application
COPY / src / app / src
COPIE ["package.json", "package-lock.json*", "./"]

# Si vous utilisez du fil:
# construction de fils
RUN npm install --silent && mv node_modules ../

# Exposer PORT 3000 sur notre machine virtuelle afin que nous puissions exécuter notre serveur
EXPOSE 3000 

Avec un Dockerfile de non-production nous écrirons une configuration test.yml pour l'utiliser et définir les variables environnementales appropriées:

 version: '3.4'

prestations de service:
  web:
    construire:
      le contexte: .
      dockerfile: Dockerfile
    environnement:
      - NODE_ENV = test 

Basé sur notre expérience précédente, la commande pour construire ceci serait:

 docker-compose -f docker-compose.yml -f test.yml build web 

Avec notre conteneur construit et configuré , nous pouvons exécuter n'importe quel type de commande de test via:

 docker-compse run web [my_test_command] 

Chaque configuration environnementale est assez nue. Cependant, nous sommes maintenant en mesure d'adapter spécifiquement les dépendances et les fonctionnalités à tout environnement dont nous avons besoin pour tester, développer ou déployer.

Et ensuite?

Jusqu'à présent, nous avons construit un conteneur Docker adapté pour une application React , appris des commandes d'orchestration efficaces, et brisé sa configuration en quelque chose qui peut supporter plusieurs environnements. Ces éléments sont tous essentiels pour un développement efficace avec une intégration continue.

De là, le meilleur point de départ est le code de développement et d'expédition! Notre configuration standardisée servira d'endroit idéal pour que les configurations et les pratiques se développent en fonction de ce qui fonctionne le mieux pour vous et votre équipe. Vous serez en mesure de développer des logiciels de manière plus cohérente et efficace.

Vous n'aurez plus à vous soucier des différences de débogage entre un environnement de développement OSX et un serveur de production Linux. Nous pouvons nous concentrer sur l'optimisation et la résolution des problèmes de code qui sont plus importants pour le schéma global de ce que nous créons.

Autres ressources

• Vous cherchez des composants d'interface utilisateur géniaux pour votre application React? Découvrez Kendo UI pour React construit à partir de zéro pour rendre l'interface utilisateur React facile
• Besoin d'intégrer les tests automatisés dans votre environnement d'intégration continue? Exécutez des tests 24 heures sur 24 et récupérez rapidement les bugs avec Test Studio .