Maison > interface Web > js tutoriel > CKA Journée complète de cours sur la construction de Docker en ulti-stage

CKA Journée complète de cours sur la construction de Docker en ulti-stage

Mary-Kate Olsen
Libérer: 2024-10-22 06:19:30
original
968 Les gens l'ont consulté

CKA Full Course Day ulti Stage Docker Build

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 !

Le fichier Docker

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

Déballage du fichier Docker

Maintenant, décomposons ce qui se passe dans ce Dockerfile, étape par étape :

1. DEpuis le nœud : installateur AS 18-alpine

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.

2. WORKDIR /app

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.

3. COPY package*.json ./

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.

4. EXÉCUTER l'installation de npm

Cette commande exécute npm install, qui installe toutes les dépendances spécifiées dans le package.json.

5. COPIER . .

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.

6. RUN npm run build

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.

7. DE nginx : dernier déployeur AS

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.

8. COPY --from=installer /app/build /usr/share/nginx/html

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.

Exécuter votre conteneur Docker

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

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.

Conclusion

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 !

Gotchas : choses à surveiller

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 !


Balises et mentions

@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!

source:dev.to
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal