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

ElasticSearch

Qu’est-ce qu’Elasticsearch ?

ElasticSearch est une base de données NoSql et un moteur de recherche de données puissant basé sur Lucène. Il a été développé en Java et est distribué de façon open source sous licence Apache 2.0. En peu de temps vous pouvez disposer d’un moteur de recherche clustérisé, automatiquement sauvegardé et répliqué, consultable via une API REST. Il permet d’effectuer et de combiner des recherches variées sur des données structurées, non-structurées, de géolocalisation. Il utilise des API RESTful et JSON ce qui lui permet de dialoguer avec tous les langages.

  • Rapide Des recherches en temps réel.
  • Scalable D’un serveur local à une architecture distribuée gérant des péta octets de données
  • Tolérance aux pannes Haute disponibilité, réplication et sauvegarde automatique
  • Modulaire Un système de plugins permet d’ajouter des fonctionnalités à celles de base proposées par Elasticsearch : sécurité, monitoring, alerting, reporting, simplicité.

Concept de base

Un cluster Elasticsearch peut contenir plusieurs index qui, à leur tour, contiennent plusieurs types. Ces types contiennent plusieurs documents.

Image 1

Correspondance entre une base de données relationnelle et Elasticsearch

SGBDR Elasticsearch
Base de données Index
Table Type
Ligne Document
Colonne Champ ou propriété

Document

Un simple enregistrement dans un index Elasticsearch. Un document est structuré comme un objet JSON.

Index

Un index est un espace logique de stockage de documents de même type, découpé sur un à plusieurs shards.il peut être répliqué sur zéro ou plusieurs shards. Quand un shard tombe en panne le contenu est répliqué dans un réplicat. L’index correspond à une base de données relationnelle (exemple : MySQL), il est composé d’un ou plusieurs types .
Exemple : base de données : CATALOGUE

Shards

C’est une partition de l’index on distingue deux types de shards :

  • Primary Shards : Par défaut, l’index est découpé en 5 Primary Shards.
  • Secondary Shards : Il s’agit de copies de Primary Shards.

Node

Un node correspond à un processus d’Elasticsearch en cours d’exécution.

Comment installer Elasticsearch ?

Le prérequis à l’installation d’ElasticSearch est l’installation de Java 6 sur la machine destinée à héberger Elasticsearch. Assurez-vous donc que Java 6 est installé sinon installez-le, puis téléchargez Elasticsearch le zip sur https://www.elastic.co/fr/downloads/

Image 2

Une fois l’archive téléchargée, il suffit de la décompresser pour installer ElasticSearch :

Image 3

Le répertoire bin contient le script de lancement Elasticsearch et le script d’installation de plugins (respectivement Elasticsearch.bat et plugin.bat pour Windows). Cliquez sur le fichier Elasticsearch.bat.

Image 4

ElasticSearch est bien démarré (started) la dernière ligne le confirme et on peut vérifier qu’ElasticSearch s’est correctement lancé il suffit de taper URL suivante http://localhost:9200/ dans un navigateur Web. Si tout se passe bien, on aura l’interface ci-dessous : « status 200 » confirme que notre serveur Elasticsearch fonctionne.

Image 5

Comment indexer et rechercher avec ElasticSearch ?

ElasticSearch utilise des API RESTful et JSON ce qui lui permet de dialoguer avec tous les langages. Il supporte les principales méthodes HTTP (GET, DELETE, PUT et POST).

http://host:port/index/type/[_action|id]

  • index : Nom de l’index
  • type : Nom du type de document
  • _action : Nom de l’action à effectuer
  • id : Identifiant du document

Indexation d’un document

Nous allons indexer le document article dans l’index EXteam pour cela j’utilise Postman (https://www.getpostman.com/ ) qui est un testeur d’API :

Après avoir cliqué sur Send, l’index EXteam sera créé ainsi que le type article qui contient le document

Figure 1 : Création d’un index et indexation d’un document

Image 6

Rechercher d’un document par son ID

Pour chercher un document par son ID il faut :

Après la validation nous retrouvons notre document que nous avions indexé sous format JSON.

Image 7

Recherche d’un document par texte (ex : Elasticsearch)

Pour chercher un document par son ID il faut :

Après la validation nous retrouvons le document qui contient le mot Elasticsearch.

Image 8

FOSElasticaBundle

Installer FOSElasticaBundle pour Symfony2,3

Après avoir installé Elasticsearch, lancez la commande ci-dessous pour installer le bundle

$ composer require friendsofsymfony/elastica-bundle

N’oublions pas d’ajouter le Bundle dans le fichier AppKernel.php :

Image 9

Maintenant que le bundle est installé passons à sa configuration.

Configuration du bundle

Image 10

Image 11

Mapping

Ajouter au même niveau settings les lignes suivantes :

Image 12

Image 13

Importer le fichier de mapping elasticsearch.yml dans config.yml :

Image 14

Indexation des tables

Image 15

Faites une recherche. Exemple de fonction de recherche :

Image 16

Image 17

 

Mamadou BAKHAYOKHO

Partager sur LinkedIn Partager sur Facebook Partager sur Twitter

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.