Saturday, April 11, 2020

Dockeriser une application Angular




Docker est une plate-forme open source pour développer et exécuter des applications dans des conteneurs. 
Un conteneur permet de packager votre application avec toutes les bibliothèques qu'elle a besoin.
Cela vous permet de séparer les applications de l'infrastructure, ce qui facilite le déploiement du logiciel 
 
indépendamment de système d'exploitation et ses caractéristiques.
 Utiliser Docker, est devenu une méthode de travail largement utilisée. 
 
Nous allons créer une application simple en angular ,la dockerizer et lancer son  image. 
Nous allons utiliser NGINX comme serveur Web pour déployer l'application dans le conteneur.





Tout d'abord on doit créer l'application Angular comme dans ce vidéo:


On accède à l'application avec cet URL : http://localhost:4200/

 Une fois terminée, on écrit dans le terminal: touch Dockerfile.
Vous allez remarquer qu'un fichier Dockerfile  vient d’être créé dans notre projet et qui contient le symbole de conteneur.

Un fichier Dockerfile contiendra les instructions pour créer notre image docker.

Puisque nous allons utiliser le serveur NGINX, nous allons chercher l'image dans ce lien  https://hub.docker.com

Ceci est le contenu de fichier  Dockerfile

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod



FROM nginx:alpine

WORKDIR /usr/share/nginx/html
COPY --from=node /app/dist/angulardocker /usr/share/nginx/html

On va installer l'image de node, puis on va faire les commandes  que nous utilisons comme ci dans notre terminal.
La commande  ng build --prod   sert pour packager l'application en une  petite taille.

Comme vous remarquez, nous avons utilisé la version alpine de nginx afin d'avoir une image légère.

On envoie ceci au docker avec cette commande:

 docker build -t angularimage

 Pour construire l'image avec docker il faut lui donner un tag qui nous aurons besoin après pour exécuter le conteneur, dans notre cas nous l'avons nommé angularimage.

Nous pouvons vérifier que l'image est créée en écrivant: docker images

 
Pour exécuter l'image que nous avons créée on fait:  docker run -p 3000:80 angularimage

-p: pour indiquer que nous utilisons 80 comme port interne et 3000  comme port externe.

Pour accéder à l'application déployé  nous écrivons  L’URL: http://localhost:3000