16 décembre 2019 admin

Dockeriser une application Angular

Docker est un outil qui permet de faciliter le déploiement des applications dans des conteneurs virtuels. Un conteneur permet de packager une application avec toutes les dépendances dont elle a besoin pour s’exécuter.

Dans cet article, nous allons voir comment créer et lancer une image Docker pour une application Angular. Nous allons nous baser sur Angular-CLI afin de générer une nouvelle application et NGINX comme serveur web pour déployer notre application dans un conteneur docker.

1. Création d’une application Angular

Vous devez avoir NodeJs installé dans votre machine afin de pouvoir installer Angular-CLI

Capture1

Pour générer une application Angular :

Capture2

Pour lancer l’application :

Capture3

L’application sera accessible depuis ce lien : http://localhost:4200

Capture42. Build Angular Application

Maintenant que notre application fonctionne correctement nous allons la packager avec Angular-CLI :

Capture5

Le build génère un dossier dist/ qui contient le code source compilé de notre application.

Remarque : –prod nous permet d’avoir un package optimisé (taille plus petite)

3. Installation docker

Pour installer docker sur votre machine veuillez suivre les instructions dépendamment du système d’exploitation que vous utilisez (Windows 10 Professionnel, MacOS) : https://docs.docker.com/install/

4. Création Image Docker

Nous allons utiliser le serveur web NGINX afin de déployer notre application. Il existe une image docker contenant NGINX sur docker hub (communauté de partage des conteneurs docker) sur laquelle nous allons nous baser pour cet article. Il faut créer un fichier Dockerfile qui contiendra les instructions pour créer notre image docker.

Capture6

Nous avons utilisé la version alpine pour avoir une image minimaliste (Taille ~ 5MB). Pour créer l’image nous avons besoin de lui spécifier un tag qui nous servira pour lancer le conteneur docker.

Capture7

Pour chaque ligne dans le fichier, docker va lancer des instructions afin de générer l’image.
Docker va générer les logs pour chaque étape (instruction) :

Capture8

Nous pouvons lister les images docker que nous avons sur la machine avec

Capture9

5. Lancer un conteneur Docker

Pour lancer l’image docker dans un conteneur en spécifiant le nom de l’image :

Capture10

Remarque : Nous avons besoin de définir un port interne (80) et externe (3000). Comme on a spécifié le port 3000 au lancement du conteneur, l’application sera accessible depuis le lien suivant : http://localhost:3000/

Capture10

Mais pourquoi je n’ai pas le même résultat qu’en local ? 

Pas de panique, si vous voyez cette page c’est que le conteneur a été lancé avec succès, il faut juste configurer un peu plus le serveur NGINX pour qu’il puisse faire le lien avec notre application Angular.

Pour ce faire nous allons modifier le fichier nginx.conf qui existe dans notre conteneur docker pour pouvoir accéder à notre application. Nous devons créer le fichier nginx.conf à la racine du projet Angular

Capture11

Avant de rebuilder l’image nous devons mettre à jour le Dockerfile pour charger le nouveau fichier de configuration de NGINX

Capture12

En relançant le conteneur docker, l’application devrait être accessible de nouveau.

6. Manager plusieurs conteneurs dockers

Au quotidien, vous allez être amenés à travailler avec plusieurs conteneurs docker. Vous allez interagir avec des applications en backend (Java, .Net, NodeJS) et avec un ou plusieurs serveurs pour vos bases de données. D’où l’utilité d’avoir un outil qui vas nous permettre de manager plusieurs conteneurs à la fois sans nous soucier du paramétrage pour chaque conteneur (Port, nom de l’image, nom du conteneur docker, …). Cet outil est docker-compose.

Nous pouvons aussi utiliser docker-compose dans le cas d’un seul conteneur docker, pour éviter de configurer manuellement le conteneur docker au lancement comme on l’a fait juste avant. Dans cet article, nous allons configurer un seul conteneur docker pour notre application Angular.

Pour commencer, il faut créer un fichier docker-compose.yml (dans la racine du projet Angular) avec le contenu suivant :

Capture13

Si vous avez déjà builder l’image docker vous pouvez enlever l’instruction build. Le network « app-network » permet d’avoir accès à d’autres conteneurs dans le cas d’un déploiement avec plusieurs conteneurs. Pour lancer le conteneur, il faut lancer la commande :

Capture14

Comme on a défini le port 80 comme port externe, l’application sera accessible depuis ce lien : http://localhost/

Pour arrêter le conteneur c’est simple :

Capture15

7. Publier l’image dans docker hub

Pour pouvoir publier une image docker dans Docker Hub il faut avoir un compte. La création d’un compte est gratuite. Il suffit de suivre les instructions https://hub.docker.com/signup

Une fois le compte créé on peut créer des ‘repositories’ afin de pouvoir partager nos images avec nos équipes, client, ou la communauté dans docker hub. (La visibilité d’un repository peut être privée ou publique).

Pour se connecter à son compte, il faut exécuter la commande ‘docker login’ depuis le terminal et renseigner le username et le password.

Avant de publier l’image dans notre docker hub il faut rebuilder l’image comme on l’a fait au début en y ajoutant dans le tag le username et le repository. Pour garder un historique des images on peut ajouter dans le tag le numéro de la version publiée.

Capture16

Pour publier l’image :

Capture17

8. Exécuter une image depuis docker hub

Nous pouvons maintenant exécuter notre image en local directement depuis docker hub

Capture18

Si on veut utiliser docker-compose pour lancer l’image depuis docker hub, il suffit de remplacer la valeur dans l’option image et enlever l’option build.

9. Build Staging

Jusqu’à maintenant nous avons utilisé docker uniquement pour exécuter notre application Angular. Le build étant fait en amont, nous avons dû installer NodeJs en local sur notre machine pour pouvoir packager l’application. Si nous voulons rendre ce processus transparent pour n’importe quel client voulant exécuter notre application Angular depuis le code source, nous pouvons le faire grâce au multi stage build de notre image docker.

Pour y arriver nous avons besoin d’une image docker qui contiendra au préalable NodeJs installé dedans. Dans cet article nous allons nous baser sur l’image officielle de docker pour NodeJs.

Capture19

Pour builder et exécuter l’image docker vous pouvez suivre les mêmes étapes décrites précédemment. L’avantage d’avoir utilisé le build staging est que notre image finale contiendra uniquement notre application et le serveur NGINX. Angular étant une application statique nous n’avons pas besoin d’avoir NodeJs en mode RUN.

10. Nettoyer votre environnement

En manipulant docker sur votre machine vous allez au fur et à mesure créer plusieurs images ainsi que lancer plusieurs conteneurs. Pour faire un nettoyage de fond et libérer de l’espace vous pouvez lancer la commande suivante.

Capture20

Cette commande va supprimer tous les images, les conteneurs arrêter, les réseaux non utilisés et le cache des builds.

Conclusion

J’espère que cet article vous aidera à mieux comprendre et mettre en place docker dans votre projet Angular. Vous trouverez le code source des différentes étapes citées dans cet article sur GitHub : https://github.com/msouf/docker-angular

Bonne lecture !
Si vous avez trouvé cet article intéressant n’hésitez pas à le partager.

Soufiane MOHACHTOU

Contact

N’hésitez pas à nous solliciter pour vos projets ou pour en savoir plus sur nos expertises, nos offres et nos domaines de compétences.