Jonathan Scheiber

Les Github Actions sont disponibles depuis quelques temps maintenant. Mais comment construire les assets avec Webpack Encore pour pouvoir en faire un build, utilisable par exemple par votre système de déploiement ?

Depuis l'ouverture de Github.com en ce qui concerne les repositories privés, je me suis dit que j'allais voir ce que ça donnait pour comparer avec Gitlab.com.

C'est également une piste pour mon employeur actuel, afin de ne plus utiliser une instance privée de Gitlab (ainsi que son runner CI) et réduire les coûts. Gitlab.com est hors course selon moi, à cause des nombreux downtimes et du temps de latence trop élevé à mon goût (pour des projets professionnels).

Cependant, mon système de déploiement (fait maison) récupère le dernier build des assets depuis Gitlab, il fallait donc pouvoir faire à peu près la même chose sur Github.

Voici déjà le code :

name: Build assets
on:
  push:
    branches:
    - master
    - staging

jobs:
  yarn:
    name: Yarn
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
    - name: Cache node_modules
      uses: actions/cache@v1
      id: yarn-cache-node-modules
      with:
        path: node_modules
        key: ${{ runner.os }}-yarn-cache-node-modules-${{ hashFiles('**/yarn.lock') }}
        restore-keys: |
          ${{ runner.os }}-yarn-cache-node-modules-
    - name: Yarn install
      if: steps.yarn-cache-node-modules.outputs.cache-hit != 'true'
      run: yarn install
    - name: Yarn build
      run: yarn run encore production
    - name: Archive production artifacts
      uses: actions/upload-artifact@v1
      with:
        name: build
        path: public/build

Quelques explications

En premier lieu, je donne un nom à mon workflow ("Build assets") qui me servira à le repérer quand j'irai vérifier le statut des actions, et je spécifie sous quelle condition le workflow doit être exécuté : ici, uniquement quand je pousserai des commits sur les branches master et staging.

Ensuite, dans l'ordre :

1. On définit sur quel système d'exploitation sera lancé le script, ici ubuntu-latest (d'autres sont disponibles, parmi lesquels Windows & macOS) ;
2. On fait un checkout du code du projet ;
3. On définit un cache sur le dossier node_modules afin de ne pas avoir à tout retélécharger pour chaque build (ce qui vous économisera des minutes dans le cadre de projets privés). On se base sur le contenu du fichier yarn.lock afin de définir si le contenu sera le même ou non ;
4. On lance un yarn install si le fichier yarn.lock a changé ;
5. On construit les assets avec Webpack Encore ;
6. Et enfin, on crée un artefact nommé build avec le contenu du build.

Et voilà ! Votre workflow peut désormais construire vos assets avec Webpack Encore :) (ou tout autre bundler)

Si vous avez des remarques, questions, suggestions ... à propos de cet article, n'hésitez pas à commenter :)