Construction des assets front

Jobs qui compilent les assets d'un thème dans la CI, puis les envoient sur le serveur par rsync : le serveur n'a pas besoin de Node.

Il est peu probable que vous puissiez utiliser ces jobs tels quels (la commande de build est npm run sass-compile), mais ils se surchargent facilement : voir Surcharge.

Fonctionnement

1. assets-generation (stage predeploy) : dans PATH_TO_THEME, lance npm ci puis npm run sass-compile, et garde ASSETS_ARTEFACTS en artefact pendant un jour.
2. assets-deploy (stage deploy) : attend le job de déploiement (prod:deploy ou preprod:deploy), puis envoie l'artefact dans PROJECT_ROOT/ASSETS_ARTEFACTS_TARGET par rsync --delete.

assets-deploy dépend d'un job nommé prod:deploy (ou preprod:deploy) : il faut donc inclure aussi le déploiement Drupal ou Symfony.

Utilisation

variables:
  CI_TEMPLATE_VERSION: &CI_TEMPLATE_VERSION main
  PATH_TO_THEME: "./web/themes/custom/mon_theme" # dossier contenant le package.json
  ASSETS_IMAGE: "registry.gitlab.com/kgaut/docker-node-images:19"
  ASSETS_ARTEFACTS: "./web/themes/custom/mon_theme/css"
  ASSETS_ARTEFACTS_TARGET: "./web/themes/custom/mon_theme"

include:
  - project: kgaut/gitlab-ci-templates
    ref: *CI_TEMPLATE_VERSION
    file:
      - '/templates/generic/stages-variables-extends.yml'
      - '/templates/drupal/deploy.yml'
      - '/templates/generic/assets.yml'

Variables nécessaires

Nom de la variable	Contenu	Exemple	Remarque
PATH_TO_THEME	Le chemin vers le dossier contenant le package.json	./web/themes/custom/mon_theme	si à la racine, renseignez ./
ASSETS_IMAGE	L'image à utiliser pour la compilation	node:20
ASSETS_ARTEFACTS	Le dossier contenant le résultat du build (qui sera envoyé sur le serveur)	./web/themes/custom/mon_theme/css
ASSETS_ARTEFACTS_TARGET	Le dossier du serveur qui reçoit ce dossier, relatif à la racine du projet	./web/themes/custom/mon_theme	le dossier parent de ASSETS_ARTEFACTS, le plus souvent
PROJECT_ROOT	Chemin relatif ou absolu vers la racine du projet	~/public_html
SSH_CHAIN	Chaine de connexion SSH	ssh user@serveur
SSH_USER, SSH_HOST, SSH_PORT	Utilisateur, serveur et port, pour l'envoi par rsync		SSH_PORT vaut 22 par défaut
SSH_PRIVATE_KEY	Clé ssh privée pour se connecter au serveur		Comment générer une clé ssh

attention

rsync est lancé avec --delete : dans le dossier cible, tout fichier absent du build est supprimé du serveur. ASSETS_ARTEFACTS sans barre oblique finale envoie le dossier lui-même dans ASSETS_ARTEFACTS_TARGET : avec l'exemple ci-dessus, seul css/ est remplacé.

Liste des jobs

prod:assets-generation

Compilation des assets pour la prod, à chaque tag.

preprod:assets-generation

Compilation des assets pour la preprod, uniquement lorsqu'un fichier a changé sous web/themes/custom.

Note : si web/themes/custom n'est pas le bon dossier pour votre projet, surchargez .preprod-assets-generation-rule dans votre .gitlab-ci.yml, en changeant la dernière ligne :

.preprod-assets-generation-rule:
  rules:
    - if: $ENV_PREPROD_DISABLED != "1" && $CI_COMMIT_BRANCH == $PREPROD_BRANCH && $CI_PIPELINE_SOURCE != "schedule"
      changes:
        - "web/themes/custom/**/*"

prod:assets-deploy

Rsync des assets vers la prod, après prod:deploy.

preprod:assets-deploy

Rsync des assets vers la preprod, après preprod:deploy, avec la même condition que preprod:assets-generation.

Surcharge

Pour changer la commande de build, il suffit de redéfinir .assets-generation-script dans votre .gitlab-ci.yml, après les includes :

.assets-generation-script:
  script:
    - cd $PATH_TO_THEME
    - npm ci
    - npm run build

Pour ajouter une étape après l'envoi (un vidage de cache, par exemple), étendez le job en reprenant son script :

prod:assets-deploy:
  script:
    - !reference [.assets-deploy, script]
    - $SSH_CHAIN "$PROJECT_ROOT/$DRUSH_BIN cr"