Déploiement des applications angulaires avec Nginx et Docker

Découvrez la contenerisation et comment déployer des applications angulaires à l’aide de Nginx et Docker pour une approche efficace et évolutive.

Le déploiement d’applications Web moderne nécessite des approches efficaces, reproductibles et évolutives. Que vous travailliez sur un projet parallèle ou que vous conserviez une application de production à grande échelle, il est essentiel d’avoir un processus de déploiement rationalisé.

Dans cet article d’introduction, nous nous concentrerons sur la partie en service du déploiement – en particulier, comment déployer et servir Angulaire applications utilisant Nginx En tant que serveur Web, tous soigneusement emballés dans Docker. Ce guide vous guidera à travers le processus de configuration, de configuration et d’exécution d’une application angulaire dans un conteneur Docker avec Nginx gantant la portion d’actifs statiques et le routage côté client.

Introduction

Avant de plonger dans les détails du déploiement, discutons brièvement des technologies clés impliquées dans notre pile de déploiement.

Angulaire

Angulaire est une plate-forme et un cadre pour créer des applications clients à une seule page à l’aide de HTML et de TypeScript. Développé par Google, Angular fournit une solution complète pour le développement du frontend avec des fonctionnalités telles que la liaison des données bidirectionnelle, l’injection de dépendance et une architecture basée sur les composants.

Nouveau sur Angular? Explorer le Série de bases angulaires Pour se mettre au courant des principes fondamentaux et commencer à construire en toute confiance.

Le CLI angulaire (Interface de ligne de commande) est un outil essentiel qui rationalise le flux de travail de développement en automatisant des tâches courantes comme l’initialisation du projet, la génération de code, les tests et la construction de la production. Nous utiliserons sous peu la CLI angulaire pour configurer et créer un exemple de projet angulaire pour cet article.

Nginx

Nginx (prononcé « Engine-X ») est un serveur Web léger et haute performance conçu pour les applications Web modernes. Il excelle à servir un contenu statique, à gérer des charges de trafic élevé et à agir comme un proxy inverse aux services backend.

Nginx est bien adapté pour servir des applications angulaires car elle fournit efficacement des actifs statiques (HTML, CSS, fichiers JavaScript) et peut être configuré pour gérer correctement le routage côté client – une exigence commune dans les applications à une seule page.

Docker

Docker est une plate-forme qui permet aux développeurs d’emballer des applications et leurs dépendances en unités standardisées appelées conteneurs. Ces conteneurs résument tout ce dont une application doit exécuter, y compris le code, l’exécution, les outils système et les bibliothèques.

L’utilisation de Docker pour le déploiement offre plusieurs avantages clés:

• Cohérence de l’environnement – Les applications fonctionnent de la même manière quel que soit l’environnement sous-jacent (développement, mise en scène ou production).
• Déploiement simplifié – rationalise le processus de construction, d’expédition et d’exécution des applications.
• Amélioration de l’évolutivité et de la portabilité – Les conteneurs peuvent être facilement déplacés et mis à l’échelle entre les fournisseurs de cloud ou l’infrastructure sur site.
• Isolement des applications – Améliore la sécurité et l’efficacité des ressources en isolant les applications et leurs dépendances.

Configuration d’un projet angulaire avec une CLI angulaire

Pour démontrer notre approche de déploiement, nous aurons d’abord besoin d’une application angulaire. La CLI angulaire fournit un moyen simple de mettre en place un nouveau projet.

Tout d’abord, avec Node.js et NPM installés, nous allons installer la CLI angulaire globalement:

npm install -g @angular/cli

Windows et Unix: pour les systèmes Windows et Unix, des étapes supplémentaires peuvent être nécessaires pour une installation appropriée de la CLI angulaire. Reportez-vous au Documentation angulaire officielle pour certaines de ces instructions.

Avec une CLI angulaire installée, nous pouvons créer un nouveau projet angulaire avec:

ng new new-app

La commande ci-dessus met en place un nouveau projet angulaire avec le nom spécifié de l’application (par exemple, new-app). Ce processus crée la structure de base d’une application angulaire, y compris divers fichiers de configuration, un dossier source avec un composant d’application de base et des dépendances répertoriées dans un package.json déposer. La CLI angulaire configure également automatiquement un processus de construction à l’aide de WebPack et configure un serveur de développement pour l’application.

Pour exécuter l’application angulaire nouvellement créée, nous pouvons accéder au répertoire du projet et démarrer le serveur de développement:

cd new-app
ng serve --open

La commande ci-dessus compile l’application, démarre un serveur Web et ouvre le navigateur à http://localhost:4200 pour afficher l’application générée.

Bâtiment pour la production

Avant de déployer notre application angulaire, nous devons construire pour la production. La construction d’une application angulaire consiste à transformer le code source et à la transformer en un format qui peut être servi efficacement aux utilisateurs. Ce processus comprend la compilation, le regroupement, la réduction et l’optimisation du code afin qu’il fonctionne bien dans un environnement de production. En utilisant CLI angulaire, nous pouvons simplifier tout ce processus et générer une version prête pour la production avec une seule commande:

ng build

La commande ci-dessus génère une construction optimisée dans le dist/ dossier, prêt pour le déploiement.

Ces fichiers optimisés sont ce que nous servirons en utilisant nginx.

Configuration de Nginx

Avec notre application angulaire construite en utilisant le ng build Commande, nous avons maintenant une version prête pour la production de notre application à l’intérieur du dist/new-app/ annuaire. L’étape suivante consiste à configurer Nginx pour servir ces fichiers statiques et gérer correctement le routage côté client.

Nginx est un serveur Web haute performance qui est bien adapté pour servir des applications angulaires. Il peut fournir efficacement des fichiers statiques, gérer le rendement de la route pour les applications à une page et configurer les en-têtes de mise en cache et de sécurité pour optimiser les performances.

Passons à une configuration Nginx de base pour servir notre application angulaire. Dans la racine de notre projet (c’est-à-dire à l’intérieur new-app/), nous allons créer un nouveau dossier appelé nginx/. À l’intérieur, nous allons créer un fichier nommé default.conf avec le contenu suivant:

# new-app/nginx/default.conf
server {
  listen 80;
  server_name localhost;
  root /usr/share/nginx/html;
  index index.html;
  # Redirect all routes to index.html for Angular's client-side routing
  location / {
    try_files $uri $uri/ /index.html;
  }
  # Configure caching for static assets
  location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
  }
}

La configuration ci-dessus indique à nginx de:

• Servir les fichiers à partir de /usr/share/nginx/html (où nous copierons la construction angulaire)
• Se calmer à index.html pour tous les routes inégalées (permettant au routeur d’Angular de fonctionner)
• Cache des actifs statiques comme CSS et JS pour les temps de chargement améliorés

Conteneurisation avec docker

Maintenant que nous avons notre application angulaire construite et notre configuration Nginx prête, créons un conteneur Docker qui emballera tout ensemble.

Créer un dockerfile

Un dockerfile est un document texte contenant une série d’instructions que Docker utilise construire une image. Nous allons créer un Dockerfile Dans la racine de notre projet avec le contenu suivant:

FROM node:alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build


FROM nginx:alpine
COPY --from=build /app/dist/new-app/browser /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Ce dockerfile implémente un processus de construction en plusieurs étapes. Dans l’étape 1, nous commençons par un Image alpine de node.js (qui est léger), réglé /app En tant que répertoire de travail, copiez des fichiers de package et installez les dépendances, copiez le reste de notre code d’application et créez l’application pour la production.

Dans l’étape 2, nous commençons par un Image alpine nginxCopiez uniquement les fichiers d’application construits à partir de l’étape précédente, copiez notre configuration Nginx personnalisée, exposez le port 80 et configurez le conteneur pour exécuter nginx au démarrage.

Cette approche en plusieurs étapes crée une image finale plus petite en rejetant l’environnement Node.js et en construisant des artefacts, en gardant uniquement ce qui est nécessaire pour exécuter l’application.

Construire l’image Docker

Avec notre dockerfile en place, nous pouvons désormais construire l’image Docker.

Pour procéder à cette étape, vous aurez besoin de Docker installé sur votre machine. Si vous ne l’avez pas encore installé, vous pouvez télécharger Docker Desktop depuis le site Web officiel de Docker pour votre système d’exploitation.

De la racine de notre projet, nous pouvons courir:

docker build -t angular-nginx-app .

Le -t Le drapeau marque notre image avec le nom angular-nginx-appce qui facilite la référence plus tard. Le . à la fin dit à Docker d’utiliser le Dockerfile dans le répertoire actuel. Lorsque la construction sera réussie, nous verrons une sortie similaire à ce qui suit:

Exécution du conteneur Docker

Maintenant que nous avons construit notre image Docker, nous pouvons l’exécuter en tant que conteneur:

docker run -d -p 8080:80 --name my-angular-app angular-nginx-app

Décomposons ce que fait cette commande:

• -d Exécute le conteneur en mode détaché (en arrière-plan).
• -p 8080:80 Port de cartes 8080 sur votre machine locale pour porter 80 À l’intérieur du conteneur, où Nginx sert l’application.
• --name my-angular-app attribue un nom lisible par l’homme à votre conteneur (dans ce cas, my-angular-app). Vous pouvez utiliser ce nom plus tard pour arrêter, redémarrer ou inspecter le conteneur plus facilement.
• angular-nginx-app est le nom de l’image docker que nous avons construite à l’étape précédente.

Après avoir exécuté la commande ci-dessus, notre application angulaire sera désormais accessible à http://localhost:8080!

Du déploiement local au déploiement de la production

Ce que nous avons accompli jusqu’à présent représente une étape importante vers le déploiement de notre application angulaire, mais il est important de comprendre les différences entre notre configuration Docker locale et un déploiement complet de production.

Ce que nous avons réalisé

Nous avons réussi à construire une version optimisée de notre application angulaire, créé une image Docker qui sert notre application à l’aide de Nginx et exécute notre application conteneurisée localement. Cette configuration est entièrement fonctionnelle et montre les principes principaux de la conteneurisation d’une application angulaire avec Nginx.

L’image Docker résultante peut être partagée avec les membres de l’équipe, pour des environnements de développement cohérents quel que soit le système d’exploitation sous-jacent.

Passer à la production

Pour un déploiement complet de production, plusieurs étapes supplémentaires seraient généralement nécessaires. Tout d’abord, nous devons pousser notre image Docker vers un registre de conteneurs comme Hub docker, AWS ECR ou Registre Google Artefact. Cela rend notre image disponible pour le déploiement dans différents environnements.

docker tag angular-nginx-app username/angular-nginx-app:latest
docker push username/angular-nginx-app:latest

Ensuite, nous devrons configurer des paramètres spécifiques à l’environnement et ajouter la prise en charge de HTTPS en configurant les certificats SSL dans NGINX. La configuration des enregistrements DNS est essentiel pour pointer un domaine sur le serveur hébergeant notre conteneur.

Pour des applications plus grandes, des systèmes d’orchestration de conteneurs comme Kubernetes ou Essaim de docker Fournir des outils pour la mise à l’échelle et le déploiement automatisé. La mise en œuvre d’un pipeline CI / CD rationalise le processus de génération et de déploiement tout en surveillant les solutions aide à suivre la santé et les performances des applications.

Ces étapes supplémentaires transforment notre application conteneurisée locale en un déploiement plus robuste et prêt pour la production capable de gérer le trafic et la mise à l’échelle du monde réel pour répondre à la demande.

Conclure

Dans cet article, nous avons exploré la conteneurisation et le déploiement d’applications angulaires à l’aide de Nginx et Docker. Cette approche exploite le framework puissant d’Angular, l’efficacité de Nginx dans le service du contenu statique et la capacité de Docker à tout emballer dans un conteneur portable.

La stratégie que nous avons vue dans cet article fonctionne de manière cohérente dans tous les environnements du cycle de vie des applications et peut être déployée n’importe où Docker est pris en charge. Pour les équipes nouvelles dans la conteneurisation, cela fournit une base pour gérer et déployer efficacement les applications angulaires de manière évolutive et reproductible.