Dans cet article de blog, nous allons explorer Docker et parcourir la création d'une construction Docker en plusieurs étapes avec une simple application Nginx. Si vous débutez avec Docker, ne vous inquiétez pas, je vais tout détailler étape par étape pour que vous puissiez suivre !
Voici le Dockerfile avec lequel nous allons travailler :
FROM node:18-alpine AS installer WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:latest AS deployer COPY --from=installer /app/build /usr/share/nginx/html
Maintenant, décomposons ce qui se passe dans ce Dockerfile, étape par étape :
Cette ligne extrait l'image officielle Node.js (version 18 sur Alpine Linux) de Docker Hub. Considérez Docker Hub comme une bibliothèque d'images. En utilisant cette ligne, nous précisons que nous souhaitons utiliser Node.js comme image de base pour la première étape de notre build.
Cette commande définit le répertoire de travail à l'intérieur du conteneur sur /app. Vous pouvez considérer cela comme la création d'un dossier dédié à votre application dans le conteneur, de la même manière que vous pourriez organiser les fichiers sur votre bureau.
Ici, nous copions les fichiers package.json et package-lock.json de notre répertoire local vers le répertoire de travail du conteneur. Ces fichiers contiennent des informations sur les dépendances dont notre application a besoin.
Cette commande exécute npm install, qui installe toutes les dépendances spécifiées dans le package.json.
Cette ligne copie le reste de nos fichiers de candidature dans le conteneur. Il amène tout de notre répertoire local dans le répertoire /app à l'intérieur du conteneur.
Maintenant, nous compilons notre application à l'aide de la commande npm run build. Cette étape transforme généralement notre code (souvent React, dans ce cas) en un bundle statique, prêt à être servi aux utilisateurs. La sortie de cette commande sera placée dans un répertoire de construction dans /app.
Dans cette ligne, on passe à une nouvelle image de base : Nginx. Nginx est un serveur Web puissant capable de servir des fichiers statiques, comme ceux que nous venons de créer. C'est le début de notre deuxième étape du processus de construction en plusieurs étapes.
Ici, nous copions les fichiers d'application construits à partir de l'étape précédente (installateur) dans le répertoire de service Nginx. L'indicateur --from=installer indique à Docker de récupérer les fichiers de l'étape d'installation que nous venons de définir.
Une fois votre Dockerfile configuré, vous pouvez créer et exécuter votre conteneur Docker avec les commandes suivantes :
FROM node:18-alpine AS installer WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:latest AS deployer COPY --from=installer /app/build /usr/share/nginx/html
Assurez-vous de remplacer le nom de votre application par le nom de votre choix. L'indicateur -dp détachera votre conteneur et mappera le port 3000 de votre machine hôte au port 80 du conteneur, vous permettant d'accéder à votre application à l'adresse http://localhost:3000.
Et voilà ! Vous venez de créer une version Docker en plusieurs étapes qui fait passer votre application du développement à la production à l'aide de Nginx. Si vous avez des questions ou des idées sur le processus, n'hésitez pas à laisser un commentaire ci-dessous !
Un problème courant lorsque l'on travaille avec cette configuration est d'oublier de mapper les numéros de port corrects. Nginx écoute généralement sur le port 80 à l'intérieur du conteneur, mais si vous essayez d'accéder à l'application sur votre ordinateur local, vous devrez transférer le port correct du conteneur vers votre ordinateur. Par exemple, si vous souhaitez accéder à l'application sur localhost:3000, vous devrez exécuter le conteneur avec l'indicateur -p 3000:80 pour mapper le port 3000 de votre machine au port 80 du conteneur.
Si vous manquez cette étape, vous vous demanderez pourquoi tout s'est parfaitement construit, mais vous ne parvenez pas à accéder à l'application dans votre navigateur !
@piyushsachdeva
Vidéo du jour 3
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!