Comment Dockerizer une application Angular ?

A quoi sert réellement Docker 🐋 ?

Docker est une plate-forme open source pour créer, déployer et gérer des applications conteneurisées. Il permet aux développeurs de regrouper des applications dans des conteneurs : des composants exécutables standardisés combinant le code source de l’application avec les bibliothèques du système d’exploitation (OS) et les dépendances nécessaires pour exécuter ce code dans n’importe quel environnement.

Prérequis

• Docker installé sur votre machine, si ce n’est pas le cas : Installer Docker

• Un compte Docker Hub registry pour pusher l’image docker

• Enfin, nous avons besoin d’une application Angular que nous voulons dockeriser

Alors, commençons… ⌨️

Pour dockeriser notre application Angular, nous allons suivre les étapes suivantes.

• Lancer Docker.

• Créer le fameux Dockerfile

• Générer l’image docker

• Pusher l’image sur DockerHub

• Lancer et exécuter l’application Angular dans le conteneur en utilisant l’image Docker.

1. Lancer Docker:

sudo service docker start

2. Créer le DockerFile :

Changez de répertoire pour aller dans le dossier de votre application Angular et créez un fichier nommé “Dockerfile” sans aucune extension :

### STAGE 1: Définir le répertoire de travail ###
FROM node:14.17.0-alpine as build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

### STAGE 2: ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/conf.d/nginx.conf
COPY --from=build /usr/src/app/dist/app-demo/usr/share/nginx/html
EXPOSE 80

Remplacez le nom de l’application app-demo dans la dernière ligne par le nom de votre application. Le reste du code fonctionne bien avec n’importe quelle application Angular

Explication :

• Stage 1 : Nous avons copié le code de notre application dans le dossier “/usr/src/app” , ensuite nous avons installé les dépendances de l’application à partir du fichier package.json en utilisant npm, et finalement nous avons lancer l’application en utilisant l’image Node.

• Stage 2 : Nous avons utilisé l’image du serveur Nginx pour créer le serveur Nginx et déployer notre application dendant en copiant les éléments du build, une fois déployé il reste qu’ouvrir le port 80 pour accéder à l’application.

3. Générer l’image docker :

Créez l’image ;

docker build -t dockerhub_name/app-demo:latest

Vérifiez le lancement de l’image à l’aide de la commande suivante :

docker ps

4. Pusher l’image sur DockerHub :

Connectez-vous au Docker hub sur votre terminal :

docker login

En suite pushez l’image :

docker push identifiant/app-demo:latest

5. Lancer et exécuter l’application Angular dans le conteneur 🚀

docker run -d -p 80:80 identifiant/app-demo:latest

Vérifiez le lancement de l’application :

http://ip_address:80/

ça y est c’est fait 🙈!

Vous avez réussi à dockerizer et à héberger une application Angular dans un conteneur Docker.