Blog Frontend

Table des matières

• Introduction
  • Installation des dépendances
• Exécution et déploiement
  • Environnements disponibles
  • Configuration
  • Environnement de développement standard
  • Développement avec debug
  • Déploiement avec Docker Swarm
  • Conteneurisation
• Tests
  • Tests unitaires
  • Tests end-to-end
• Intégration continue
• Configuration NGINX
• Dépendances
• API GitHub
• Ressources supplémentaires

Introduction

Ce projet constitue l'interface frontend du système de gestion de blog. Il permet la création et la gestion d'articles thématiques.

Installation des dépendances

Pour installer les dépendances nécessaires, exécutez la commande suivante à la racine du projet :

npm install

Exécution et déploiement

Environnements disponibles

L'application peut être exécutée dans plusieurs modes :

1. Environnement de développement standard
   Mode de développement standard sans débogage.

2. Développement avec debug
   Mode de développement avec capacités de débogage. La configuration se trouve dans le fichier .vscode/launch.json.

3. Déploiement avec Docker Swarm
   Conteneurisation de l'application et déploiement dans un cluster Docker Swarm via le script docker-dev-swarm.sh.

Ces modes sont tous disponibles dans l'environnement de développement.

Configuration

Cette application nécessite que le microservice Keycloak soit opérationnel après la compilation.

La commande standard ng serve lancera le projet sans configuration, ce qui le rendra non fonctionnel. Il est donc impératif d'utiliser une configuration appropriée.

• Les configurations pour l'environnement de développement se trouvent dans le fichier /environments/environment.dev.ts :

  import { KeycloakConfig } from "keycloak-js";
  
  const keycloakConf: KeycloakConfig = {
    clientId: "your_client_id",
    realm: "your_realm",
    url: "https://your-keycloak-instance/auth/",
  };
  
  export const environment = {
    production: false,
    keycloak: keycloakConf,
    imagesApi: "https://your-storage-api",
    articleApi: "http://localhost:8077",
  };

  Vous devez disposer des informations d'accès au microservice Keycloak ainsi que des URL pour les API de gestion d'images (imagesApi) et d'articles (articleApi).

Environnement de développement standard

Pour démarrer l'application en mode développement, utilisez la commande :

npm run start:dev

Cette commande exécute le script suivant défini dans package.json :

ng serve --poll=2000 --configuration dev --host 0.0.0.0 --disable-host-check

Ce script lance le serveur de développement, surveille les modifications des fichiers et recompile automatiquement l'application à chaque changement.

Une fois l'application démarrée, accédez-y via http://localhost:4200/ dans votre navigateur. Les modifications seront automatiquement prises en compte.

Développement avec debug

Dans VSCode, vous pouvez configurer un environnement de débogage avec le fichier .vscode/launch.json :

  "version": "0.2.0",
"configurations": [
      {
        "name": "ng serve Dev firefox",
        "type": "firefox",
        "request": "launch",
        "preLaunchTask": "npm: start:dev",
        "url": "http://localhost:4200"
      },
      {
        "name": "ng serve Dev chrome",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start:dev",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "trace": true,
        "outFiles": ["${workspaceFolder}/dist/**/*.js"]
      },
      {
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: test",
        "url": "http://localhost:9876/debug.html"
      }
  ]
}

Cette configuration permet de lancer l'application dans le navigateur de votre choix avec des capacités de débogage. Assurez-vous que l'URL corresponde à l'adresse IP de votre machine et au port 4200.

Déploiement avec Docker Swarm

Le script docker-dev-swarm.sh automatise le déploiement de l'application dans un environnement Docker Swarm. Il :

1. Installe les dépendances via npm
2. Compile le projet avec la configuration dev_docker
3. Construit l'image Docker
4. Vérifie l'existence du réseau spring-api
5. Déploie la stack dans l'environnement Docker Swarm
6. Liste les services déployés
7. Affiche les processus en cours
8. Affiche les logs du service

Après exécution, l'application est accessible à l'adresse http://localhost:4200/.

Important : L'application se connecte à Keycloak et effectue une requête d'authentification en arrière-plan. Le client de connexion approprié doit être configuré et disponible.

Note : Certains navigateurs peuvent bloquer les requêtes de l'application vers l'API de gestion des articles. En développement, vous pouvez désactiver cette restriction.

Conteneurisation

Après compilation, l'application est intégrée dans une image Docker basée sur Nginx avec Alpine Linux. Le fichier Dockerfile du projet définit cette configuration.

L'application compilée est placée dans le répertoire html de l'image Nginx, créant ainsi une image Docker complète contenant à la fois Nginx et l'application Angular.

Nginx joue le rôle de proxy entre l'application Angular et le client. Sa configuration est définie dans le fichier default.conf situé dans /etc/nginx/conf.d de l'image :

server {
  listen       80;
  listen  [::]:80;
  server_name  localhost;

  #access_log  /var/log/nginx/host.access.log  main;
  index index.html;

  location / {
      root   /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
 }

  #error_page  404              /404.html;

  # redirect server error pages to the static page /50x.html
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }

Note : Pour appliquer des modifications directement dans le conteneur, utilisez la commande nginx -s reload pour recharger la configuration Nginx.

Tests

Tests unitaires

Pour exécuter les tests unitaires, utilisez les commandes suivantes :

• ng test - Exécute les tests via Karma
• CI=true ng test - Exécute les tests en environnement CI/CD

L'exécution des tests avec ng test affiche les résultats dans le navigateur ainsi que le taux de couverture du code.

Tests end-to-end

Exécutez ng e2e pour lancer les tests end-to-end sur la plateforme de votre choix. Cette commande nécessite l'installation préalable d'un package implémentant les capacités de test end-to-end.

Intégration continue

Versionnement des images

Dans le pipeline CI/CD, la duplication des versions d'images Docker n'est pas autorisée. Que ce soit pour une version bêta ou une release, une erreur sera automatiquement générée dans le Jenkinsfile.

À chaque publication, le numéro de version de l'image Docker doit être incrémenté. Ce numéro est défini dans le fichier .env, qui contient également les variables Docker du projet.

API GitHub

Exemple de requête cURL pour vérifier l'existence d'une version dans le dépôt GitHub :

curl -s  -H "Authorization: token [votre token]" https://api.github.com/repos/[organisation]/[repository]/releases/tags/[version-tag]

Note : Le token est généré dans votre dépôt GitHub sous Settings > Developer Settings > Personal access token > token classic.

API Nexus

# Récupération des informations sur le build cible
curl -v -u [username]:[password] https://[votre-nexus-url]/repository/docker-private/v2/[image]/manifests/[version-tag]

# Vérification du statut du build cible
curl -s -o /dev/null -w "%{http_code}" -u [username]:[password] https://[votre-nexus-url]/repository/docker-private/v2/[image]/manifests/[version-tag]

Dépendances

Keycloak Angular

npm install keycloak-angular keycloak-js

Pagination

npm i ngx-pagination

DOMPurify

npm install dompurify

Ressources supplémentaires

Ce projet a été généré avec Angular CLI version 17.2.3.

Pour plus d'informations sur Angular CLI, utilisez ng help ou consultez la documentation officielle d'Angular CLI.

Consultez également la nouvelle documentation d'Angular.