Pré-requis

• Docker en local
• Client heroku (CLI) installé et configuré
• Git, pour cloner un repository
• Dotnet core 2.1.x installé (ou plus récent)

Exécuter en local

Docker: Images à pré-télécharger

Le build va reposer principalement sur 2 images. Ces images peuvent aussi être téléchargée automatiquement lors du lancement de la commande docker build lors d’une étape subséquente. Si vous voulez lancer les téléchargements en avance, lancez les commandes “docker pull” suivantes:

> docker pull microsoft/dotnet:2.1.500-sdk-alpine3.7 
> docker pull microsoft/dotnet:2.1.6-aspnetcore-runtime-alpine3.7

Créer un projet, ou faire du scaffolding

Je vais opter pour du scaffolding sur un de mes templates. Pour lancer l’installation du template en local faite à partir d’un dossier vide dotnet new -i HoNoSoFt.DotNet.Web.Spa.ProjectTemplates. Ensuite, faire dotnet new vuejs-picnic afin de lancer le scaffolding.

Cette étape n’est sans doutes pas obligatoire, mais sachez qu’Heroku vous procure le HTTPS sans doute en utilisant un reverse proxy (je ne fait que supposer ici). Du coup, vous pouvez désactiver le HTTPS du le projet surtout si vous n’avez pas de certificat valide. Le fichier a modifier est le Startup.cs, mettez en commentaire les lignes app.UseHttpsRedirection(); et app.UseHsts();.

À priori, vous avez votre projet disponible. Vous pourrez donc effectuer un  dotnet build histoire de vous assurer que le build fonctionne. Et ensuite  dotnet run vous permettra de voir avec Kestrel votre site sur https://localhost:5001/.

Faire un build local de votre image Docker

Comme vous l’avez sans doute constaté, ou pas, le projet template utilisé pour le scaffolding contenait déjà un fichier Dockerfile. Ce fichier décrit comment effectuer un build et ensuite vous donne l’option d’exécuter l’image en local.

Contenu du fichier:

####################################################
# To build your own image: 
#    > docker build -t honosoft/vuejs-picnic:latest -t honosoft/vuejs-picnic:1.0 .
# To run your image once it's ready:
#    > docker run -d -p 39803:80 --name vuejs-picnic honosoft/vuejs-picnic
# To push the image into your docker repository:
#    > docker push honosoft/vuejs-picnic:latest
# If you wish to remove your dangling images, please do the following (not mandatory)
#    > docker rmi $(docker images -f “dangling=true” -q)
####################################################

# Build the container with Source code compiled
FROM microsoft/dotnet:2.1.500-sdk-alpine3.7 as buildenv
WORKDIR /source
RUN apk add --update nodejs nodejs-npm
COPY *.csproj .
RUN dotnet restore
COPY . .
# Publishing will also restore (install) the npm packages.
RUN dotnet publish -c Release -o /app/

# Stage 2 - Creating Image for compiled app
FROM microsoft/dotnet:2.1.6-aspnetcore-runtime-alpine3.7 as baseimage
RUN addgroup -S coreApp && adduser -S -G coreApp coreApp
RUN apk add --update nodejs nodejs-npm


WORKDIR /app
COPY --from=buildenv /app .
RUN chown -R coreApp:coreApp /app

# Replace the application name if required.
CMD ASPNETCORE_URLS=http://+:$PORT dotnet Sample.Heroku.dll

IMPORTANT! Si vous utilisez “ENTRYPOINT” pour lancer l’application, ça marchera en local mais pas sur Heroku. Ce qui fait en sorte que vous devrez remplacer la commande par “CMD”, pour plus de détails cliquer ici

Comme avez pu le constater, mon projet s’appelle Sample.Heroku et le point d’entrée afin de démarrer le conteneur sera le fichier Sample.Heroku.dll. Les images utilisée sont la SDK afin de faire la compilation et ensuite l’image Runtime afin d’exécuter la publication en mode Production.

Pour bâtir votre docker, exécuter la commande docker build -t honosoft/sample-heroku:latest .. L’image devrait faire dans les 200mb décompressé et environs 80mo compressée. Il y a des moyens afin de diminuer cela, mais pour le moment on se contentera des images par défaut fournie par Microsoft.

Une fois le build terminé, vous pourrez lister vos images avec la commande docker images. Si votre image s’est construite sans soucis, vous pourrez passer à l’étape suivante, sinon vous devrez faire des corrections par rapport aux erreurs.

Lancer l’image docker en local pour tester

Rien de plus simple, par défaut, docker avec dotnet core utilise le port 80 en interne. Du coup, pour lancer votre image, effectuer la commande suivante:

docker run -d -p 8080:80 --name sample-heroku honosoft/sample-heroku

Votre image devrait donc désormais être disponible en atteignant http://localhost:8080 par le proxy créé par Docker (Port 80 sur Docker et exposé sur votre machine sur 8080).

Déploiement sur Heroku

Créer une application sur Heroku

À partir du dashboard, simplement créer une nouvelle application. Dans mon cas, l’application sera “morning-oasis-26273”.

Deploiement avec le CLI

Vous connecter à votre compte Heroku avec le CLI:

heroku login
heroku container:login

Comme vous le feriez pour envoyer vers les registres de Docker privé, effectuer un tag Heroku de votre image fraîchement créée. Ensuite, vous n’aurez qu’à faire un push (à la git), de votre image vers votre site web.

docker tag honosoft/sample-heroku registry.heroku.com/morning-oasis-26273/web
docker push registry.heroku.com/morning-oasis-26273/web

Alternativement au docker tag/push vous pouvez aussi utiliser la commande Heroku qui effectuera les 2 commandes en une seule:

heroku container:push web -a morning-oasis-26273

Lors du push, ça prendra un peu de temps tout dépendant de votre connexion internet. Le push, tel que pour GIT enverra la différence vers le serveur de registre Docker. Le premier push prendra un peu plus de temps, mais les push subséquents seront rapide et avec un faible volume de données à envoyer.

Tout ce qui reste à faire maintenant, est d’activer votre image sur le site Heroku à l’aide du CLI:

heroku container:release web -a morning-oasis-26273

Avant d’atteindre votre application, vous pouvez tout démarrer les traces logs. Ce sera utile en cas de problème (conteneur qui ne démarre pas par exemple).

heroku logs --tail -a morning-oasis-26273

Conclusion

C’était peut-être un peu plus long que prévu. Mais le tout fonctionne, bonne journée!

Pour le moment, concentrons nous sur le scénario suivant:

• GitHub : Gestion de code source
• AppVeyor : Build automatisé tout particulièrement pour les application .Net, sinon comme alternative, vous pouvez utiliser Travis. Travis est plutôt bien, mais j’ai eu quelques problème par le passé concernant les applications .Net. Peut-être que c’est revenu à la normal depuis le temps.
• SonarQube (Cloud) : Ici on prend la version cloud, cependant, vous pouvez l’installer sur un serveur local tout dépendant de votre usage.
• BadgeIt : Projet créé par HoNoSoFt qui à pour but d’utiliser l’API de SonarQube ainsi que Shields.io afin de générer vos badges.
• #Slack (Optionel) : Envoie des notifications avec Webhook lors de fin de build et d’analyse.

GitHub – Création de votre repo.

Si vous n’avez pas déjà un compte Github, shame on you :). Enfin, je dis ça, mais c’est plutôt pour vous aider à faire les étapes suivantes où vous n’aurez qu’un login ;). Du coup créez votre compte et continuez les étapes.

1. Une fois connecté, allez sur votre image en haut et cliquez sur “Your repositories”
2. De là simplement cliquer sur “New” après avoir bien entendu remplis le champ contenant le nom de votre projet.
   • Alternativement, dans le cas où vous êtes très paresseux, simplement dupliquer un projet existant que vous voulez faire le build et ajouter peut-être quelques fonctionnalités, pourquoi pas.
3. Si vous avez créer votre nouveau repository, veuillez suivres les étapes afin d’ajouter votre code déjà existant. Ce sera d’ailleurs indiqué par défaut sur la page de tout votre nouveau projet.

Une fois complété, ça ressemblera à ce qui suit:

#Slack – Configuration de notification

Dans cet article, nous utiliserons Slack. Cependant, dans la vrai vie, n’importe quel system comportant un Webhook peut être utilisé. Étant donné que Slack est déjà prêt à être utilisé par toutes les applications de cet article, utilisons le. Si vous désirez, vous pouvez choisir un autre outil.

1. Aller sur le site de #Slack
2. Créer votre espace, ou bien utiliser un déjà existant
3. Connectez vous à votre espace (web ou par l’application windows)
4. Créez vous un channel qui s’appelle par exemple #ContinuousIntegration et invitez vos amis ;). Très utile si vous travaillez à plusieurs sur un projet.
5. Sur le menu à gauche, vous trouverez une options appelé “Apps”. Appuyez sur ce bouton
6. Dans la recherche, veuillez indiquer “Webhook” et sélectionnez “Incoming Webhook“
7. Ajoutez le Webhook et changez la configuration à bon vous semble, cependant veuillez prendre en note le “Webhook URL“. Cet URL est utilisé afin de poussez vos notifications sur votre channel #Slack.

AppVeyor – Création de votre premier build, ou peut-être pas

Peut-être que vous avez déjà quelques build sur cette plateforme. Si c’est le cas, veuillez sauter dans la prochaine section, ou tout simplement lire en diagonale.

Ici on prendra pour acquis que vous allez builder une application .Net Core 2.1. Si vous avez un autre type d’application à bâtir, veuillez changer les choix afin de mieux vous accommoder.

1. Accéder le site d’AppVeyor
2. Vous connecter en utilisant votre compte GitHub
3. Ajouter un projet existant (le bouton est plutôt évident et si vous n’avez pas trouvé, contactez moi je modifierai l’article).
   • Dans mon cas, je prendrai le projet HoNoSoFt.BadgeIt.SonarQube
4. Avant de lancer votre build, vous devez impérativement configurer ce dernier.
   • Si vous n’êtes pas déjà sur votre projet, veuillez y accéder
   • Choisir le menu “Settings” > Onglet “General” sur la gauche (défaut)
     • Validez que le nom de votre projet est bien le bon ainsi que les options suivantes
   • Choisir le menu “Settings” > “Build”
     • Modifiez la configuration à “Release” si votre build est pour les mises en productions
     • Modifiez le “Before build script” et choisissez “CMD”
       • Insérrer “dotnet restore” (Sinon, votre restauration Nuget ne fonctionnera pas).
     • Appuyez sur “Save“
   • Choisir le menu “Settings” > “Environment”
     • Choisir Visual Studio 2017 au lieu du choix par défaut Visual Studio 2015
     • Appuyez sur “Save”
   • Choisir le menu “Settings” > “Notifications”
     • Choisir comme nouvelle notification “Slack“.
       • Insérez votre “Webhook URL” récupéré dans l’étape précédente (#Slack).
       • Choisir les événements désiré (Succès, …)
     • Appuyez sur “Save“
5. Revenir sur le menu “Latest build”
   1. Lancer le “Build” en appuyant sur “New Build“
   2. Si le résultat est bon ou mauvais, vous devriez recevoir votre notification sur #Slack

Résultat une fois le build complété avec succès (notez le vert sur la gauche)

Résultat sur #Slack

SonarQube (Cloud) – Intégration pour valider votre qualité de code

Pour cette partie, je vais intégrer une partie de l’article AppVeyor+SonarQube disponible sur le site officiel de AppVeyor. Notez que SonarQube Cloud est gratuit pour les projet qui sont “publique” sur “GitHub”.

Important: Avec SonarCloud sous la version gratuite, les résultats seront publique et tout le monde pourra y accéder. Dans la plupart des scénario d’entreprise, ce ne sera pas le cas et vous aurez des soucis pour afficher les badges. Par soucis de sécurité, la prochaine section sera pour vous. Les badges pouvant être généré par votre propre système ou du moins sur votre réseau privé (subnet privé sur azure par exemple). Vous comprenez sans doutes où je veux en venir ;).

1. Accéder au site de SonarQube Cloud
2. Connectez-vous avec votre compte Github (pour la simplicité de la chose)
3. Une fois connecté, veuillez aller sur votre profil (icône en haut à droite) et choisir “My account“
4. Choisissez le menu “Security” afin de créer un nouveau Token qui sera ensuite utilisé par l’application BadgeIt.
   • Donnez un nom à votre token, e.g. “BadgeIt“
   • Appuyez sur “Generate“
   • Copiez et collez votre Token dans un fichier local sécuritaire ou un endroit afin de ne pas perdre cette information. Elle ne sera accessible qu’une fois, sinon vous devrez régénérer un nouveau Token.
5. Créer un nouveau projet
6. À ce moment, vous avez 2 choix, utiliser une nouvelle clé pour pouvoir pousser les résultats ou bien utiliser une clé existante. Je vous conseille ici de créer une clé seulement pour AppVeyor. Du coup, votre clé sera seulement pour cette application et la clé précédemment créé sera utilisé par la section qui suivre (BadgeIt).
   • Notez le nouveau Token
7. Retour vers AppVeyor pour terminer la configuration du build.

Re-AppVeyor

Retour vers AppVeyor, allons re-configurer les événements de build ainsi que d’ajouter des variables d’environnement.

1. Retour sur votre Project -> Settings -> Environment
2. Ajoutez les 3 variables suivantes. Elles seront utilisé pour un script powershell. Ça évitera d’afficher publiquement certaines informations privées.
   • sonar_project_key: Déterminé lors de la création du projet dans SonarCloud. Cette clé doit normalement être unique.
   • solution: Nom de votre solution (peut contenir un “path” et non seulement le nom de la solution. Dans mon cas, c’est à la racine de mon repo. git)
   • sonar_api_key: Créé lors de l’étape précédente. Seulement coller votre valeur ici. N’oubliez pas de sauvegarder une fois que c’est fait ;).

Vous avez enfin les variables d’environnements, maintenant retournons sur la page de configuration du build.

1. Retour sur votre Project -> Settings -> Build
2. Allez au bas de la page de configuration et ensuite entrer ce qui suit dans “After build script“. Choisissez PS Core (ou powershell).

   • choco install "msbuild-sonarqube-runner" -y
     
     # Votre-organization vient aussi de SonarCloud. Du coup, veuillez renseigner le champ. Dans un SonarQube normal, vous n'aurez pas besoin de cette configuration.
     # Vous pouvez aussi ajouter cette variable d'environnement en tant que variable globale d'environnement sur AppVeyor
     $cmd = "MSBuild.SonarQube.Runner.exe begin /k:""${env:sonar_project_key}"" /d:sonar.organization=""VOTRE-ORGANISATION"" /d:""sonar.host.url=https://sonarcloud.io"" /d:""sonar.login=${env:sonar_api_key}"""
     Invoke-Expression $cmd
     
     msbuild $env:solution
     $cmd = "MSBuild.SonarQube.Runner.exe end /d:""sonar.login=${env:sonar_api_key}"""
     Invoke-Expression $cmd

   • Notez que le script peut aussi être modifié afin d’ajouter le numéro de version automatiquement et du coup synchronisez vos versions entre Sonar et AppVeyor.
3. Sauvegarder

Relancer votre build et voilà, au rafraîchissement de la page Sonar vous devriez voir apparaître quelque chose comme ce qui suit:

Mon projet n’est pas parfait, mais ce n’est pas bien grave. Là plupart des “erreurs” sont dû à du HTML/JavaScript ou du code mort créé lors de refactoring récent. Je corrigerai, mais pour le moment ça montre que les chiffres ne sont pas tous à 0 et que ça a bien marché!

BadgeIt – Configuration

Ici vous avez plusieurs choix. Je vous recommande votre environnement locale, mais SI vous ne pouvez pas, tournez vous vers votre hébergement favoris (Google, AWS, Azure, Heroku ou autre). Je vais donner quelques détails pour Azure, cependant ici nous allons nous attarder à la façon Heroku histoire de montrer comment déployer .Net Core 2.1 sous un container.

Azure (WebApp)

Pour ceux qui désire prendre le choix Azure, ce sera trivial:

• Déploiement dans sur une WebApp ou similaire
• Affecter les variables d’environnements
  • SonarQubeApi.ApiKey: Votre clée d’API créé lors de l’étape SonarQube (Cloud) et qui porte le nom de BadgeIt.
  • SonarQubeApi.BaseUri: Dans le cas ici présent: “https://sonarcloud.io/api/” ou sinon ce sera votre SonarQube privé.
  • BadgeApi.BaseUri: Par défaut, je vous recommande “https://img.shields.io/badge/”, mais si vous voulez un peu plus d’intimité et de performance, veuillez tout simplement installer le serveur Shields.IO localement. Veuillez vous référer au site Github de Shields.IO afin d’obtenir plus de détails.
• Démarrer votre WebApp et voilà, vous pourrez suivre un peu plus loin comment utiliser l’API, sinon tout simplement charger la page principale de la WebApp, vous aurez un exemple et vous pourrez tester.

Azure (Docker container)

Veuillez suivre l’article MSDN afin de déployer votre application.

Heroku

Si vous n’avez pas déjà un compte Heroku, créez en un. Vous devrez aussi installer Heroku-Cli, car ce sera à partir de cette application que votre déploiement se fera. Sinon en générale, ce sera plutôt trivial. (Article Heroku à ce sujet)

• Cloner le repo. HoNoSoFt.BadgeIt.SonarQube
• Validez que vous avez bien le fichier “Dockerfile” dans le répertoire de l’application web (Dans notre cas: HoNoSoFt.BadgeIt.SonarQube.Web).
• Connectez-vous au serveur de conteneurs Heroku
  • > heroku container:login
    • OU
  • > docker login –username=_ –password=$(heroku auth:token) registry.heroku.com
• Poussez votre image
  • heroku container:push <process-type>
    • OU, si votre image existe déjà (tag plus push)
    • Exemple: > heroku container:push web –recursive -a badgeit
      • Important: La commande d’exécution doit absolument passer par CMD et non ENTRYPOINT.
  • docker tag <imageregistry.heroku.com/<app>/<process-type>
• Vous pouvez ensuite faire une release de votre image
  • Exemple > heroku container:release web -a badgeit
• N’oubliez pas d’aller configurer votre application heroku, car vous devrez mettre à jour les variables d’environnements.
  • Exemple:
    

Résultat:

Et voilà! Vous avez le tout de fonctionnel. Ce n’est pas bien de ne pas tout avoir dans le vert, mais ce n’est qu’une première version.

Possibilité de faire mieux (Oui, évidemment ;))

Petit exercice au cas où vous voulez vous amuser:

1. Créer un docker-compose
   • Ajouter l’image de conteneur de Badgeit
   • Ajouter l’image de conteneur de Shields.io
   • Configurez le tout
   • Et testez
2. Changer le message après le build afin d’envoyer un message personalisé à Slack en utilisant une image de votre badge service (badgeIt) ou autre.

À la prochaine!