Travaux pratiques d’Intégration Continue dans le Cloud

Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

L’objectif de ce workshop est d’utiliser les outils Github (contrôle de version) & Travis CI (construction/intégration continue) pour :

• Gérer les sources d’un projet Angular

• Et, de manière automatisée :

  1. Construire le livrable

     • Exécuter les tests via Karma

     • Vérifier la qualité via JSHint

  2. Stocker l’archive ZIP de distribution sous Github

  3. Déployer l’application sous Github

Table of Contents

• 1. Références
• 2. Mise en place
  • 2.1. Forker le projet
  • 2.2. Récupérer le projet
  • 2.3. S’inscrire sur Travis CI
  • 2.4. Configurer le projet
• 3. Premiers pas
• 4. Configurer la construction
  • 4.1. Configurer le langage et sa version
  • 4.2. Configurer le script
  • 4.3. Exécuter les tests unitaires
  • 4.4. Mettre les dépendances en cache
  • 4.5. Déployer les archives
• 5. Déploiement sur Github
  • 5.1. Configurer le domaine pour l’appel de l’API Marvel
  • 5.2. Génération du site

1. Références

• Documentation de Travis CI [EN]

2. Mise en place

Le workshop se base sur le projet Angular Comics

2.1. Forker le projet

Travis CI ne fonctionne que sur des projets disponibles dans votre propre dépôt.

• Se rendre sur la page du projet Angular Comics

• Cliquer sur le bouton Fork en haut à gauche

• Se rendre sur son propre compte Github

• Vérifier la présence du projet Angular Comics sur son propre dépôt

  

2.2. Récupérer le projet

Cloner le dépôt Git

git clone https://github.com/<username>/angular-comics.git

Vérifier la branche

Normalement, la résultat de la commande git branch doit indiquer un astérisque en face de la branche solution. Si ce n’est pas le cas, changer de branche à l’aide de la commande git checkout solution.

Créer une nouvelle branche

git checkout -b ci

2.3. S’inscrire sur Travis CI

L’outil d’intégration continue utilisé dans le cadre de ce workshop est Travis CI.

• Se rendre sur Travis CI

• Cliquer sur le bouton Sign up with Github

• Renseigner les credentials de Github

• Accepter les diverses conditions

• Cocher le projet angular-comics

  

2.4. Configurer le projet

Configurer le projet de sorte que :

• il ne soit construit que si un fichier .travis.yml est présent

• il soit construit à chaque push

3. Premiers pas

L’outil de construction Travis CI se base sur la présence d’un fichier .travis.yml à la racine du projet.

Créer un fichier de configuration vide

touch .travis.yml

Créer un commit à partir de ce fichier

• git add .

• git commit -m "Add Travis CI configuration file"

Pousser sur Github

En prenant soin de bien rester sur la branche ci précédemment créée, git push origin HEAD

Vérifier le résultat

Se rendre sur Travis CI. La construction a échoué.

Analyser la configuration

• Consulter l’onglet View Config :

  {}

• Qu’en déduire ?

4. Configurer la construction

L’objectif de cette section est de disposer d’un fichier de configuration de Travis CI qui permette de valider l’intégralité de la chaîne de construction.

4.1. Configurer le langage et sa version

Travis CI permet de configurer le langage du projet et sa version. Trouver l’option appropriée pour Angular Comics parmi les possibilités offertes. Configurer celui-ci et la version correcte.

Puis, comme dans l’étape précédente, pousser la modification sur Github et vérifier le résultat de la construction : il doit être un succès.

4.2. Configurer le script

Vérifier la trace de la construction

Consulter l’onglet Job log. Bien que la construction soit un succès, une erreur apparaît dans la log :

$ npm test
> ComicsLibrary@ test /home/travis/build/formations/angular-comics
> echo 'Error: no test specified'
Error: no test specified
The command "npm test" exited with 0.
Done. Your build exited with 0.

Lire la documentation

A l’aide de la documentation, analyser la raison qui cause l’erreur dans la trace.

Corriger la configuration de construction

Dans un premier temps, remplacer l’appel par défaut par la commande grunt.

Déterminer le résultat attendu

Analyser le fichier Gruntfile.js pour déterminer ce que fait la commande grunt (sans argument).

Pousser la modification comme précédemment et vérifier le résultat.

4.3. Exécuter les tests unitaires

1. Localiser dans le fichier Gruntfile.js la commande qui exécute les tests unitaires

2. Remplacer la commande grunt qui n’exécute que la construction par cette dernière

3. Vérifier le résultat.

4. Analyser la cause de l’erreur.

5. A l’aide la documentation, corriger celle-ci.

4.4. Mettre les dépendances en cache

Par défaut, les dépendances NPM et Bower sont téléchargées à chaque construction. A l’aide de la documentation, configurer le cache pour qu’il réutilise ces dépendances entre 2 constructions.

4.5. Déployer les archives

L’objectif de cette section est de déployer la distribution sur Github via l’outil de construction.

Récupérer la cible de création des archives

Analyser le fichier Gruntfile.js pour trouver la cible qui permet de générer l’archive de distribution.

Ajouter la création des archives

Dans le fichier .travis.yml, ajouter à la commande grunt de test la cible de génération de l’archive.

Créer un jeton d’accès Github

Afin que Travis puisse déployer sur Github, il est nécessaire de lui donner les permissions nécessaires. Dans le monde web, cela passe par une authentification via un jeton d’accès passé à chaque requête. Pour ce faire :

• Aller dans Settings › Developer Settings ▸ Personal access tokens.

• Cliquer sur [ Generate new token ]

• Si nécessaire, remplir le mot de passe dans la mire qui s’ouvre

• Remplir la description avec un libellé pertinent, par exemple "Travis CI - Déploiement sur Github"

• Cocher la case repo

• Puis cliquer sur Generate token

• Copier le jeton d’accès dans le presse-papier

  Caution

  Ne pas quitter la page sans avoir bien pris soin de noter le jeton d’accès dans un endroit sécurisé jusqu’à la fin de la procédure. Il sera impossible de récupérer ce jeton une fois la page quittée.

  

Gérer le jeton dans Travis

L’utilisation directe du jeton d’accès dans le fichier .travis.yml le rendrait accessible à tous, ce qui pose un problème de sécurité évident. Travis permet de créer des variables d’environnement masquées (y compris dans les logs) qui peuvent être utilisées dans le fichier. Sur la page du projet dans Travis, aller dans More Options › Settings. Dans le champ "Name", indiquer GITHUB_API_TOKEN et dans le champ "Value", le jeton d’accès. Puis cliquer sur Add.

Créer la section de déploiement

A l’aide de la documentation, créer dans le fichier .travis.yml une section pour déployer la distribution lors de la construction.

Vérifier le résultat dans Github

Se rendre dans Code › releases

5. Déploiement sur Github

L’objectif de cette section est de déployer l’application Angular Comics pour qu’elle puisse être exécutée sur Github.

5.1. Configurer le domaine pour l’appel de l’API Marvel

Pour permettre à Github de faire des appels à l’API Marvel, ajouter le domaine github.io à la liste des referrer sur le site developer.marvel.com.

Warning

Si le service Angular qui retourne la clé d’API Marvel n’est pas committé dans Github, cette étape n’est pas nécessaire…​ mais l’application ne pourra pas interagir avec le serveur Marvel.

5.2. Génération du site

Sur Github, les fichiers HTML ne sont pas rendus, seul le code HTML est affiché de sorte que le Javascript n’est pas exécuté. Toutefois, il est possible de rendre le HTML dans le cadre de la fonctionnalité offerte par Github Pages.

Pour cela, il suffit :

• de créer une nouvelle branche gh-pages

  git checkout -b gh-pages
  git push origin HEAD

• de pousser les fichiers dans cette branche dédiée

• de naviguer sur le site <username>.github.io/<projectname>

Voici un exemple de script qui permet de gérer de déployer la distribution :

generate-site.sh

link:https://raw.githubusercontent.com/formations/angular-comics/continuousintegration/generate-site.sh[role=include]

Warning

Dans le fichier précédent, modifier la ligne 5 en remplaçant "formations" par votre <username>.

A l’aide de la documentation, intégrer ce script dans le fichier .travis.yml pour que chaque construction réussie exécute le script et déploie l’application sur Github Pages.