Comment dockeriser une application Angular avec Nginx

29 septembre 2023

Radhika Krishnan

Dans cet article, nous vous proposons un tutoriel facile et détaillé pour créer une application Angular avec Docker grâce à un Dockerfile multi-étapes et déployer le code en production dans un conteneur NGINX. Nous passerons également en revue certaines commandes Docker pour créer des conteneurs, les exécuter et les surveiller.

Table des matières :

Créer une application Angular
Créer un Dockerfile
Exécuter le conteneur Docker

Créer une application Angular

Avant de poursuivre, vérifiez que Node.js et Angular CLI sont bien installés dans votre environnement de développement local. Vous trouverez les instructions d’installation sur le site officiel d’Angular.

Après avoir satisfait ces prérequis, exécutez les commandes ci-dessous pour créer une nouvelle application Angular dans le dossier local de votre choix.

ng new sample-angular-app

Naviguez vers le répertoire du projet pour lancer l’application.

cd sample-angular-app
ng serve

Maintenant que l’application Angular est opérationnelle, nous allons nous occuper du Dockerfile.

Créer un Dockerfile

Vous trouverez ci-dessous les instructions que nous allons utiliser pour dockeriser l’application Angular avec un serveur NGINX. Il s’agit d’une configuration Docker multi-étapes :

Compilation du code source Angular pour générer des fichiers optimisés pour la production
Déploiement de l’application à l’aide d’un serveur web NGINX

# Stage 1: Compile and Build angular codebase

# Use official node image as the base image
FROM node:latest as build

# Set the working directory
WORKDIR /usr/local/app

# Add the source code to app
COPY ./ /usr/local/app/

# Install all the dependencies
RUN npm install

# Generate the build of the application
RUN npm run build


# Stage 2: Serve app with nginx server

# Use official nginx image as the base image
FROM nginx:latest

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/sample-angular-app /usr/share/nginx/html

# Expose port 80
EXPOSE 80

Étape 1 :

FROM – Lance une nouvelle étape de build et utilise l’image Node la plus récente du registre DockerHub comme base pour exécuter les instructions de configuration ultérieures de l’application Angular. Cette étape est arbitrairement appelée « build » et sert de référence pour la configuration NGINX.
WORKDIR – Définit le répertoire de travail par défaut pour l’exécution des commandes subséquentes. Le répertoire est automatiquement créé si le chemin spécifié n’existe pas. Dans l’exemple ci-dessus, le code source Angular est déplacé dans le répertoire usr/local/app.
COPY – Transfère les fichiers source du répertoire racine du projet vers le répertoire de travail défini dans le système de fichiers du conteneur.
RUN – Exécute le build Angular sur une nouvelle couche par-dessus l’image Node de base. Après cette opération, les fichiers de build se trouvent dans usr/local/app/dist/sample-angular-app et l’image compilée sera utilisée dans les étapes ultérieures.

Étape 2 :

FROM – Lance une étape de build secondaire et l’image NGINX la plus récente du registre DockerHub comme base pour les configurations NGINX ultérieures.
COPY – Importe les fichiers générés à la première étape (--from=build) pour remplacer les fichiers NGINX par défaut.
EXPOSE – Indique à Docker que le conteneur NGINX écoutera sur le port réseau 80 pendant l’exécution. Étant donné que NGINX fonctionne sur ce port par défaut, il est logique d’utiliser celui-ci.

Exécuter le conteneur Docker

Pour construire et exécuter votre conteneur Docker, ouvrez un terminal et naviguez jusqu’à l’emplacement de votre Dockerfile dans le répertoire du projet.

Utilisez ensuite la commande suivante pour construire l’image Docker.

docker build -t krish186/sample-angular-app-image:latest  .

Le point « . » définit l’emplacement du Dockerfile dans le répertoire actuel, et l’argument « -t » sert à taguer l’image générée. Dans cet exemple, le répertoire s’appelle krish186/sample-angular-app-image et le tag est « latest ».

Une fois le build terminé, vérifiez si l’image apparaît dans la liste des images Docker disponibles localement. Pour ce faire, vous pouvez exécuter la commande ci-dessous.

docker image ls

Résultat :

REPOSITORY                            TAG                 IMAGE ID            CREATED             SIZE
krish186/sample-angular-app-image     latest              c1789404fda5        19 seconds ago

Après avoir confirmé la présence du conteneur dans la liste, vous pouvez lancer l’image en utilisant la commande suivante.

docker run -d -p 8080:80 krish186/sample-angular-app-image:latest

L’option -d permet à Docker de faire fonctionner le conteneur en mode détaché pour qu’il s’exécute en arrière plan.

L’argument -p sert à effectuer une liaison de ports. Dans cet exemple, le port 80 (tel que spécifié dans le Dockerfile) est exposé au port 8080 de la machine hôte.

Saisissez la commande suivante pour vérifier les détails du conteneur en cours d’exécution.

docker ps

Résultat :

CONTAINER ID        IMAGE                                      COMMAND                  CREATED             STATUS              PORTS                  NAMES
12d6293d6e19        krish186/sample-angular-app-image:latest   "/docker-entrypoint.…"   16 seconds ago      Up 14 seconds       0.0.0.0:8080->80/tcp   keen_khayyam

Selon les informations affichées, le conteneur est bel et bien opérationnel. Si vous visitez l’adresse http://localhost:8080/, vous constaterez que l’application Angular a été dockerisée avec succès.

La prochaine étape consistera à publier cette image dans un dépôt en ligne, avant son déploiement éventuel sur une plateforme infonuagique.

Si vous avez un compte DockerHub, vous pouvez exécuter les commandes suivantes pour téléverser votre image :

docker login -u <username> -p <password>
docker push krish186/sample-angular-app-image:latest