Utiliser GatsbyJS dans Azure

Mise en contexte

 Avant d'utiliser Azure pour mon blog, je passais par Netlify pour déployer et héberger le blog. Suite à mon nouveau poste d'architecte cloud, je me suis demandé si je ne pouvais pas passer à la plateforme de Microsoft pour réaliser la même chose. Cet article se veut donc un tutoriel sur comment installer GatsbyJS sur Azure et créer un pipeline de développement et de déploiement avec DevOps.

Qu'est-ce que le JAMStack?

 Avant toute chose, qu'est-ce que le JAMStack au juste? C'est une façon de construire des sites statiques en faisant un pré-rendu avant de le servir au browser en utilisant JavaScript, des APIs et un Markup (Tel Markdown). Le stack permet donc de livrer le contenu de façon efficace, plus sécuritaire et avec un coût très bas.

Qu'est-ce que GatsbyJS?

 GatsbyJS est une implentation du JAMStack, dans mon cas, j'utilise Markdown comme source de données, GraphQL pour construire l'API et React pour l'interface :

Première étape : Préparer Azure

 Je vais prendre en compte qu'on possède déjà le code pour le site et nous allons regarder exclusivement ce qui touche au déploiement et au pipeline de production.

1. Créer un Azure Storage

 Comme le JAMStack ne nécessite pas de "WebApp", nous pouvons déployer tout simplement dans un Azure Storage. Dans notre cas, un account de type StorageV2 et une réplication LRS est suffisante pour un blog. Il est important de laisser l'accès en mode hot puisqu'on accède fréquemment au data (C'est ce qui compose le site après tout!).

2. Activer le Static Website du Azure Storage

 Une fois que le storage aura été créée par Azure, vous pourrez activer le mode Static Website comme-ci dessous :

 Il faut changer l'index document name ainsi que l'error document path pour index.html puisque c'est ce que GatsbyJS utilise. La section Primary endpoint correspond à l'URL du nouveau site.

3. Ajouter le site

 Vous avez maintenant probablement un bel écran bleu si vous naviguez à l'URL en question qui indique qu'Azure à réussi à créer votre site! Il suffit de mettre le build donné par GatsbyJS dans le storage nommé $web créé par Azure :

 Une fois votre site téléchargé dans le container $web, vous devriez voir votre site!
Une première réussite!

Deuxième étape : DevOps à Azure

 Considérons maintenant qu'on possède un projet DevOps avec un repository qui comprend le code de notre blog. Nous aimerions maintenant qu'il se déploiement automatiquement dans Azure quand on pousse dans la branch master.

1. Construire le pipeline

 La première chose à faire, est de construire le pipeline de build du site pour produire un artefact qui sera déployable sur le container Azure. Dans la section Pipelines, en cliquant sur New Pipeline, on sélectionne Azure Repos Git (YAML) (ou n'importe quel endroit où se trouve votre code), on prend ensuite le repository qui nous intéresse et finalement dans configuration Node.js. Voici le YAML nécessaire pour faire fonctionner GatsyJS :

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- script: |
    npm install -g gatsby-cli
  displayName: 'install gatsby'

- script: |
    cd gatsby-site
    npm install
    npx gatsby build
  displayName: 'gatsby build'

- task: CopyFiles@2
  inputs:
    sourceFolder: 'public'
    contents: '**' 
    targetFolder: $(Build.ArtifactStagingDirectory)
    cleanTargetFolder: true 
  displayName: 'copy built site'

- task: PublishBuildArtifacts@1
  inputs:
    pathtoPublish: '$(Build.ArtifactStagingDirectory)' 
    artifactName: 'drop' 
    publishLocation: 'Container'

 Une fois le pipeline créé, on peut le tester pour confirmer que le tout roule sans faute.

2. Déployer vers Azure

 Prenons maintenant l'artifact du pipeline plus haut, et copions le dans container $web. Dans la section Releases, New Release Pipeline il faut céer un nouvel Agent Job on sélectionne l'agent pool Azure et dans l'artifact download le résultat du build pipeline :

 Une fois l'artifact sélectionner on peut préparer le stage :

 Ensuite, il faut ajouter un task qui copy le build dans le storage Azure, comme ici bas :

 Une fois le tout sauvegardé, on peut porter attention à l'artifact pour le déploiement en continue, en l'activant ici :

Conclusion

 Finalement, une fois le tout en place, si une modification est apportée dans la branche master de notre repository, un build sera automatiquement lancé et une fois terminé la release se fera et déploiera notre site sur le web!

 L'avantage dans notre cas est qu'un le prix du Azure Storage est relativement très bas, mon blog ne fait même pas 1Gb et si je regarde la calculatrice Azure, je totalise environ 1.49$ par mois pour le storage. Considérant que le pipeline et le repository DevOps est gratuit, je m'en sors relativement très bien!

 Il est à noter qu'il est aussi possible d'utiliser son propre domaine au lieu de celui donné par Azure, le tout sera couvert dans un prochain article.