Comment ancrer une application React –
La conteneurisation de vos projets avec Docker simplifie l’expérience de développement et facilite le déploiement simple dans les environnements cloud. Voyons comment nous pouvons empaqueter un site React en tant que conteneur Docker.
Cet article se concentre sur les projets qui ont été amorcés à l’aide de create-react-app (ARC). Si vous avez éjecté votre configuration CRA ou si vous utilisez un processus de création personnalisé, vous devrez ajuster le npm run build commande en conséquence.
Les images Docker sont créées via un Dockerfile. Cela définit une image de base à utiliser, telle que le serveur Web Apache. Vous répertoriez ensuite une série de commandes qui ajoutent des packages, appliquent les modifications de configuration et copient les fichiers nécessaires à votre application.
Sommaire
Définir nos besoins
L’ARC comprend un système intégré de création et de rechargement en direct, auquel vous accédez via npm run start. Cela vous permet d’itérer rapidement sur votre site pendant le développement.
Lors du passage à la production, vous devez compiler vos ressources statiques en utilisant npm run build. Cela produit des ensembles HTML, CSS et JavaScript minifiés dans votre build annuaire. Ces fichiers sont ce que vous téléchargez sur votre serveur Web.
Une approche de base de Dockerising pourrait être de npm run build localement. Vous copiez ensuite le contenu du build dans votre image Docker – en utilisant une image de base de serveur Web – et appelez-le un jour.
Cette approche ne s’adapte pas bien, en particulier lors de la création de votre image Docker dans un environnement CI. Le processus de construction de votre application n’est pas complètement encapsulé dans la construction du conteneur, car il dépend de l’externe npm run build commander. Nous allons maintenant passer à un exemple plus complet où toute la routine s’exécute dans Docker.
Un Dockerfile pour l’ARC
FROM node:latest AS build WORKDIR /build COPY package.json package.json COPY package-lock.json package-lock.json RUN npm ci COPY public/ public COPY src/ src RUN npm run build FROM httpd:alpine WORKDIR /var/www/html COPY --from=build /build/build/ .
Cette Dockerfile incorpore tout le nécessaire pour conteneuriser entièrement le projet. Il utilise les builds multi-étapes de Docker pour exécuter d’abord la build React, puis copier la sortie dans un alpine Conteneur de serveur Apache. Cela garantit que l’image finale est aussi petite que possible.
La première section du fichier définit l’étape de construction. Il utilise l’image de base officielle de Node.js. La package.json et package-lock.json les fichiers sont copiés. npm ci est ensuite utilisé pour installer les packages npm du projet. ci est utilisé à la place de install car il force une correspondance exacte avec le contenu de package-lock.json.
Une fois les dépendances installées, le public et src les répertoires sont copiés dans le conteneur. Les dossiers sont copiés après le npm ci car ils sont susceptibles de changer beaucoup plus fréquemment que les dépendances. Cela garantit que la construction peut tirer pleinement parti de la mise en cache des couches de Docker – la solution potentiellement coûteuse npm ci La commande ne sera exécutée que si la package.json ou package-lock.json les fichiers changent.
La dernière étape de cette étape de construction consiste à npm run build. L’ARC compilera notre application React et placera sa sortie dans le build annuaire.
La deuxième étape de la Dockerfile est beaucoup plus simple. La httpd:alpine l’image de base est sélectionnée. Il inclut le serveur Web Apache dans une image qui pèse environ 5 Mo. Le code HTML, CSS et JavaScript compilé est copié hors du conteneur de l’étape de construction et dans l’image finale.
Utilisation de l’image Docker
Utilisez le docker build commande pour construire votre image:
docker build -t my-react-app:latest .
Cela construit l’image et la marque comme my-react-app:latest. Il utilise le Dockerfile trouvé dans votre répertoire de travail (spécifié comme .).
La construction peut prendre quelques minutes. Les builds suivants seront plus rapides, car des couches comme le npm ci La commande sera mise en cache entre les exécutions.
Une fois votre image construite, vous êtes prêt à l’utiliser:
docker run -d -p 8080:80 my-react-app:latest
Docker créera un nouveau conteneur en utilisant le my-react-app:latest image. Le port 8080 sur l’hôte (votre machine) est lié au port 80 dans le conteneur. Cela signifie que vous pouvez visiter http://localhost:8080 dans votre navigateur pour voir votre projet React! La -d l’indicateur est présent pour que le conteneur s’exécute en arrière-plan.
Passer à NGINX
L’exemple ci-dessus utilise Apache mais vous pouvez facilement passer à NGINX à la place.
FROM nginx:alpine COPY --from=build /build/build/ /usr/share/nginx/html
Vous pouvez adopter des serveurs Web alternatifs de la même manière; comme l’ARC produit une sortie complètement statique, vous avez une grande flexibilité dans la sélection du mode d’hébergement de votre site. Copiez le contenu du /build/build répertoire du build placez-vous dans le répertoire HTML par défaut du logiciel serveur choisi.
Avantages de cette approche
L’utilisation de Docker pour non seulement encapsuler votre version finale, mais également pour créer la version elle-même, donne à votre projet une portabilité complète dans les environnements. Les développeurs n’ont besoin que de Docker pour créer et exécuter votre site React.
De manière plus réaliste, cette image est prête à être utilisée avec un serveur CI pour créer des images de manière automatisée. Tant qu’un environnement Docker est disponible, vous pouvez convertir votre code source en une image déployable sans aucune intervention manuelle.
En utilisant des versions en plusieurs étapes, l’image finale reste rationalisée et ne devrait avoir que quelques mégaoctets. Le beaucoup plus grand node image n’est utilisée que pendant la phase de compilation, où Node et npm sont nécessaires.
