Comment accrocher les applications angulaires

Docker est un outil précieux pour simplifier les environnements locaux et expédier les produits finaux conteneurisés. Voyons comment l’utiliser avec Angular.

De nos jours, en tant que développeurs, nous devons fournir une valeur supplémentaire au-delà de la simple écriture de code. En embrassant l’idée de « Vous le construisez, vous le possédez, » Nous assurons la responsabilité de créer du code qui se déroule bien dans la production.

Cela ajoute non seulement de la valeur à notre équipe mais aussi aux solutions que nous livrons. Et l’un des outils clés qui nous permet de le faire est Docker.

Docker est un outil qui vous permet d’emballer votre application et toutes ses dépendances dans une «boîte» (conteneur) qui fonctionne de la même manière dans n’importe quel environnement: votre machine locale, votre mise en scène ou la production.

Considérez Docker comme un coffre-fort qui contient votre code, votre configuration et votre runtime. Une fois que vous avez l’image, vous pouvez l’exécuter n’importe où sans vous soucier de « Ça marche sur ma machine » problèmes.

Mais je suis un développeur frontend – pourquoi devrais-je apprendre Docker?

Dans le monde réel, nous ne travaillons pas seuls. Apprendre Docker est particulièrement précieux lorsque vous travaillez dans une équipe qui utilise des pipelines CI / CD et souhaite déployer des applications angulaires sur le cloud.

L’utilisation de Docker facilite l’expédition des versions reproductibles et éviter les décalages de configuration entre les environnements.

Comme toujours, la meilleure façon d’apprendre Docker est En faisant ça. Au lieu de mémoriser les commandes, nous allons appliquer Docker à un projet du monde réel. Nous allons prendre notre projet Magasin Kendo et le docker étape par étape.

Vous vous souvenez peut-être de Kendo Store des précédents articles de blog. Nous l’avons construit avec facilité en utilisant la progression de l’interface utilisateur pour l’interface utilisateur Bibliothèque angulaire. Si vous voulez voir comment il a été créé, vous pouvez revenir à Le meilleur des deux mondes angulaires: autonomes et modules combinés 💥.

Scénario

Nous allons utiliser le magasin Kendo, qui est une application de magasin angulaire qui récupère une liste de produits de l’API publique de https://fakestoreapi.com/ et les affiche dans une interface utilisateur propre.

C’est le candidat parfait pour apprendre Docker car dans nos emplois, nous avons souvent des cas avec des dépendances sur une API externe. Par exemple, Kendo-Store utilise environments.ts Pour pointer le point de terminaison de l’API et fonctionne déjà dans local.

Rappelez-vous ce point sur enviroments.tsparce que j’en parlerai plus tard.

Notre objectif est de prendre cette application de travail et de la transformer en une version conteneurisée qui peut s’exécuter n’importe où à l’aide de Docker. L’objectif est d’apprendre comment fonctionne Docker, d’apprendre des commandes, d’utiliser existant et de créer nos propres images personnalisées et de les exécuter dans des conteneurs.

Faisons-le!

Configuration du projet

Avant de commencer, installer Docker Desktop sur votre machine. Il enregistre tous les services Docker sur votre machine et est un bel outil d’interface utilisateur pour gérer Docker.

Oui, je sais que Docker Desktop a une belle interface graphique et beaucoup de choses peuvent être faites visuellement, mais dans cet article pour le rendre plus amusant, nous nous concentrerons sur l’utilisation du Terminal. 😄

Ensuite, je suppose que vous avez Git et CLI angulaire installé.

Commençons par cloner le projet localement:

git clone https://github.com/danywalls/dockerize-angular-app.git
Cloning into 'dockerize-angular-app'...
remote: Enumerating objects: 86, done.
remote: Counting objects: 100% (86/86), done.
remote: Compressing objects: 100% (61/61), done.
remote: Total 86 (delta 20), reused 82 (delta 16), pack-reused 0 (from 0)
Receiving objects: 100% (86/86), 149.03 KiB | 378.00 KiB/s, done.
Resolving deltas: 100% (20/20), done.

Aller au répertoire testing-kendo-store et installer toutes les dépendances avec npm i. Une fois que c’est terminé, courez ng serve pour voir notre projet fonctionner.

Dans votre navigateur, ouvrez http://localhost:4200 Et notre projet est opérationnel!

Parfait! L’application qui fonctionne! Déplacement de notre application angulaire dans un conteneur en créant une image Docker à l’aide du dockerfile avec des commandes.

Attendez une seconde! Qu’est-ce qu’un récipient et un image? Qui ou ce qui est un Dockerfile? De quelle commande parlons-nous?

J’ai eu le même sentiment quand j’ai commencé à jouer avec Docker. Quand quelqu’un a mentionné un récipientJ’ai imaginé un 🗑️, et j’ai pensé images étaient liés à l’art.

C’est pourquoi il est important de comprendre ces termes et acteurs avant d’aller de l’avant.

Conteneur, images docker, dockerfile, commandes docker et hub docker 🤯

Nous allons expliquer certains de ces concepts importants. Oui, cela pourrait être un peu ennuyeux et vous voulez probablement continuer à écrire du code, mais il est crucial de comprendre ce qu’ils font réellement pour nous. Au lieu de simplement copier et coller des commandes, nous devons savoir ce que signifie chaque terme – parce que dans le monde réel, ils sont souvent utilisés.

Qu’est-ce qu’un conteneur Docker?

Pour expliquer ce qu’un récipient est, je veux que vous pensiez à notre application. Il a besoin de Node.js pour construire et un serveur Web pour servir l’application. Si nous voulons déployer notre application en production ou faire travailler un coéquipier, ils devraient faire installer Node.js et un serveur Web comme Nginx.

Mais comment puis-je être sûr qu’ils utilisent exactement la même version du nœud requis pour mon application? J’aimerais pouvoir tout mettre dans une boîte – avec toutes les dépendances – et les faire ouvrir la boîte et exécuter l’application.

Eh bien, cette «boîte» est un conteneur.

Un conteneur est un processus isolé exécuter notre application, complètement déconnectée de l’hôte. Il est autonome et a tout ce qu’il a besoin pour exécuter. Il ne dépend de rien installé sur la machine hôte, et il n’a besoin de rien des autres conteneurs non plus.

C’est ce qui le rend si puissant: il peut fonctionner n’importe où.

Dans le passé, nous utiliserions une machine virtuelle (VM), mais c’est une machine complète avec trop de complexité. Les conteneurs n’apportent que les dépendances minimales pour exécuter l’application, en utilisant moins de ressources.

Faisons un exemple, exécutant un exemple de conteneur docker/welcome-to-dockeravec la commande docker run. Nous passons -d drapeau et -p 8080:80. Le conteneur exécute un serveur Web qui affiche un exemple de site Web.

docker run -d -p 8080:80 docker/welcome-to-docker
0ce1c12284491e53ea7453aa8a40b73724ecfd5193ab5aac126b88d3fa11c833

Ouvrez votre navigateur et allez à localhost:8080et tada! Nous avons dirigé notre premier conteneur !!

Oui!! Maintenant, comment puis-je arrêter le conteneur?

Le docker/welcome-to-docker Le conteneur continue de fonctionner jusqu’à ce que nous cessons d’utiliser le docker stop commande.

Tout d’abord, courez docker ps Pour obtenir l’ID du conteneur et utiliser la commande docker stop id il arrête le conteneur:

docker ps
CONTAINER ID   IMAGE                      COMMAND                  CREATED          STATUS          PORTS                                     NAMES
0ce1c1228449   docker/welcome-to-docker   "/docker-entrypoint.…"   10 minutes ago   Up 10 minutes   0.0.0.0:8080->80/tcp, [::]:8080->80/tcp   flamboyant_nash

docker stop 0ce1c1228449
0ce1c1228449

docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

Ok, c’est parfait: nous avons appris les bases d’un conteneur Docker. Passons à des images Docker.

Qu’est-ce qu’une image Docker?

Nous avons exécuté un conteneur, qui est venu avec un serveur Web, des dépendances de code et tout ce qui est prêt, mais comment puis-je exécuter plusieurs conteneurs avec la même configuration? C’est là que l’image Docker entre en jeu.

L’image Docker fonctionne comme une recette d’un chef. Il décrit tout ce qui est nécessaire pour préparer un plat: les ingrédients (votre code, les dépendances), les étapes (installer, build) et l’environnement (runtime).

Une fois que vous avez la recette (image), vous pouvez créer autant de plaques (conteneurs) identiques que vous le souhaitez ou avez besoin. Mais les images Docker ont des règles importantes.

Les images Docker sont immuables, donc une fois créées, elles ne peuvent pas être modifiées, mais nous pouvons en faire un nouveau en plus. Un autre point important est que les images de conteneurs sont composées de couches qui pointent vers un ensemble de modifications du système de fichiers comme ADD, modifier ou supprimer les fichiers.

Par exemple, nous pouvons utiliser une image existante de Node.js pour créer notre application ou une autre image de ngnix Pour servir notre application, alors combinez les images existantes pour simplifier notre travail.

Nous pouvons étiqueter Notre image pour connaître l’étiquette et la version.

Mais où définissons-nous ces images et changements? Ne t’inquiète pas, le Dockerfile vient pour vous sauver!

Les commandes dockerfile et docker

Le Dockerfile c’est là que vous écrivez cette recette. Cela fonctionne comme notre document où nous définissons toutes les étapes pour construire l’image et l’exécuter dans le conteneur.

Chaque ligne indique à Docker quoi faire en utilisant les commandes. Certaines commandes de notre dockerfile sont:

• FROM: Définit l’image de base (nous choisissons un système d’exploitation ou une plate-forme de base)
• WORKDIR: définit le répertoire de travail à l’intérieur du conteneur
• COPY: copie les fichiers de votre machine dans le conteneur
• RUN: Exécute des commandes de shell, comme installer des dépendances ou construire votre application

Il y a une énorme liste de commandes. Jetez un œil au référence officielle Pour voir la liste complète des commandes.

Nous voulons juste rocker et créer un conteneur à partir de notre application, nous n’avons donc pas besoin de mémoriser chacun. Nous devons en taper seulement quelques-uns. Passons donc à la création de notre dockerfile.

Créer notre dockerfile

Avant d’écrire notre dockerfile, jetez un œil au projet dockerize-angular-app. Il s’agit d’une liste de produits fournis par le products.service.ts.

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { environment} from "../../environments/environment";

export type Product = {
  id: string;
  title: string;
  image: string;
  price: string;
  description: string;
}

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  private http = inject(HttpClient)
  public products$ = this.http.get<Product[]>(environment.api);
  public productById = (id: string) => this.http.get<Product>(`${environment.api}/${id}`);
}

Le point de terminaison de l’API a été déclaré dans le environment.ts déposer.

export const environment = {
  api: 'https://fakestoreapi.com/products'
};

Dans le flux normal, la livraison de notre application a besoin de deux étapes:

• Nous devons le construire et le compiler pour obtenir les actifs finaux du bundle.
• Nous livrons nos actifs ou bundles finaux pour servir dans un serveur Web à déployer en production.

Si nous décomposons ces étapes, un Dockerfile Doit effectuer deux étapes:

1. Compile angulaire dans une image temporaire
2. Sert les fichiers construits à l’aide de nginx

Pour la première étape, nous devons utiliser Node.js. Mais n’oubliez pas que nous avons appris les images Docker qui, au lieu d’utiliser un Ubuntu vide ou une image Node.js par défaut et l’installation de toutes les dépendances, nous pouvons choisir des images fournies par le Hub docker une communauté comme node-alpine (comme utiliser des recettes par d’autres chefs). Ils apporteront avec eux tout prêt à exécuter Node.js.

La deuxième étape utilise une image de node:20-alpine serveur Web, copiant les actifs de la première étape vers le node:20-alpine pour servir l’application angulaire.

Pourquoi utilisons-nous node:alpine au lieu de node ou node:20-alpine? Les versions alpines sont beaucoup plus petites (~ 50 Mo vs ~ 400 Mo), ce qui rend votre image Docker plus rapidement pour construire, tirer et déployer. Parfait pour les scénarios de production qui n’indettent que ce qui est nécessaire.

Écrire le dockerfile

Créer un fichier vide nommé Dockerfile (sans aucune extension). En utilisant les commandes apprises auparavant, nous en combinons maintenant quelques-unes pour créer notre image personnalisée.

Tout d’abord, nous utilisons FROM Pour sélectionner l’image de base – dans notre cas, node:20-alpine AS builder. Ensuite, nous déclarons le WORKDIR avec /app Pour définir le conteneur où nous travaillerons.

Enfin, nous copierons tout, en utilisant le COPY . . Commande, de notre répertoire source et exécutez npm ci et npm run build Pour générer le paquet final de notre application angulaire.

FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm ci
RUN npm run build

Qu’est-ce que et pourquoi utiliser NPM CI?

Le AS Dans Docker, il est facile de définir une étape dans une image, fonctionnant comme un environnement temporaire qui est supprimé dans la version finale si nous ne le copiez pas.

Alors, pourquoi npm ci au lieu de npm install? Le npm ci La commande est parfaite pour nettoyer les installations dans des environnements automatisés comme Docker ou les pipelines CI / CD. Il utilise les versions exactes répertoriées dans votre package-lock.jsonrendre les installations plus prévisibles et reproductibles – c’est la clé de notre scénario.

Passons à la deuxième étape en utilisant la même commande FROM Pour obtenir une image de Nginx nginx:alpine. De notre environnement temporaire (builder), nous utilisons le COPY commande de prendre le résultat de la construction angulaire et de le déplacer vers /usr/share/nginx/htmlqui est le chemin par défaut du serveur Web Nginx.

FROM nginx:alpine
COPY --from=builder /app/dist/kendo-store/browser /usr/share/nginx/html

Le résultat final ressemble à ceci:

FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm ci
RUN npm run build


FROM nginx:alpine
COPY --from=builder /app/dist/kendo-store/browser /usr/share/nginx/html

La dernière étape consiste à construire et à courir. Ainsi, à partir du terminal dans le même chemin où nous avons créé le dockerfile, exécutez le docker build commande avec le drapeau t Pour définir la balise pour notre image et le . comme chemin pour le dockerfile:

docker build -t testing-kendo-store .

À ce moment-là, Docker trouvera les images de docker.io et télécharger les images. Après son début, le processus de construction, de compilation et de copie des actifs à l’image, selon votre connexion, peut prendre environ une minute ou deux.

Une fois terminé, vous pouvez exécuter la commande docker images Pour voir l’image Docker créée.

docker images
REPOSITORY            TAG       IMAGE ID       CREATED         SIZE
testing-kendo-store   latest    6a4cea8c10a2   6 seconds ago   79.6MB

Parfait. La dernière étape consiste à exécuter le conteneur à partir de notre image avec la commande docker run en utilisant le drapeau p Pour définir le port sur 8080:80 et pointer le 8080 à 80 du conteneur.

docker run -p 8080:80 testing-kendo-store

Enfin, ouvrez votre navigateur et allez à http://localhost:8080– Votre application devrait être en direct! 🎉

Oui! Nous avons notre application angulaire dans un conteneur avec Docker! Facile!! 🥳

Conclusion

Nous avons appris ce qu’est Docker et comment il aide à simplifier nos environnements locaux. Il nous permet également d’expédier notre produit final à l’intérieur d’un conteneur qui peut fonctionner de manière cohérente sur différents environnements.

Nous avons également joué avec quelques commandes Docker de base et écrit notre premier Dockerfile Docker pour créer une image Docker personnalisée. Nous avons commencé par utiliser un dockerfile existant comme base et l’avons étendu avec notre propre code, construit l’application et l’avons préparé à s’exécuter dans un conteneur.

Vous pensez peut-être: super! Mon application est maintenant dockée. Mais j’ai quelques questions pour vous…

Dans le monde réel, nous avons souvent plusieurs environnements: développement, mise en scène et production. Que se passe-t-il si nous voulons pointer un autre point de terminaison de l’API au lieu de https://fakestoreapi.com/ Défini dans Environment.ts? Devrions-nous reconstruire l’image pour chaque étape?

Si mon coéquipier Alyssa veut exécuter mon application mais utiliser un autre point de terminaison sur sa machine locale ou se connecter à un service externe, devrait-elle créer une nouvelle image ou devrais-je partager le code source complet avec elle?

Comment puis-je partager mon image sans le code?

Tous ces défis seront relevés dans le prochain article, où nous apprendrons à injecter des variables d’environnement, à rendre notre conteneur flexible et à partager facilement des images Docker avec les autres! 😊

Rendez-vous dans le prochain!

Comme ce que vous voyez?

Kendo UI pour Angular est livré avec un essai gratuit de 30 jours, si vous voulez vous botter les pneus vous-même.

Essayer maintenant