Configuration de l'intégration continue avec un référentiel GitHub à l'aide des actions GitHub

Last updated:

Si vous travaillez dans le cadre d'une équipe de développement web, vous voudrez peut-être avoir l'ensemble du centre unique d'informations de votre base de code de production dans le contrôle de version. Ainsi, votre équipe de développeurs peut utiliser votre système de contrôle de version préféré pour collaborer, suivre et annuler facilement les modifications. Découvrez-en davantage sur les workflows des développeurs sur CMS Hub en suivant le guide de création d'un workflow de développeur efficace. 

Ce guide décrit la configuration de l'intégration continue avec un référentiel GitHub à l'aide d'actions GitHub. Ce guide suppose que vous connaissez git et GitHub ainsi que la création de sites web à l'aide de l'ILC de CMS. Si ce n'est pas le cas, suivez le guide Premiers pas avec les outils de développement local.

Obtenir votre système de fichiers de développeur dans GitHub

À l'aide de l'ILC de CMS, vous pouvez récupérer l'intégralité de votre système de fichiers de développeur. Exécutez hs fetch project root pour copier votre projet du gestionnaire de conception dans votre environnement local. 

Si vous démarrez un nouveau projet, vous pouvez cloner ou dériver le boilerplate du thème CMS, qui est conçu pour donner aux développeurs un coup de pouce sur les nouveaux projets CMS Hub. Ce projet a des actions configurées pour déployer des fusions vers la branche principale de https://github.com/HubSpot/cms-theme-boilerplate vers https://boilerplate.hubspotcms.com. 

Suivez cet article d'aide de GitHub sur l'ajout de votre projet à un référentiel GitHub.

Utiliser l'action GitHub de déploiement de CMS Hub (recommandé)

Nous avons créé une action GitHub que vous pouvez installer sur votre projet GitHub afin qu'elle déploie automatiquement vos modifications d'une branche à votre portail de production.

Install GitHub Action

Configuration manuelle

Il est recommandé d'utiliser l'action de déploiement, car elle prend en charge une bonne partie de la configuration. Si vous souhaitez toujours configurer manuellement votre action ou si vous utilisez un service autre que GitHub, suivez les instructions ci-dessous.

Ajouter des dépendances à votre fichier package.json

Si vous n'en avez pas déjà un, créez un fichier package.json à la racine de votre projet. Ajoutez @hubspot/cli et js-yaml en tant que devDependencies. Cela devrait ressembler à ceci :

// package.json { "name": "my-website-theme", "version": "0.0.1", "devDependencies": { "@hubspot/cli": "^3.0.9", "js-yaml": "^3.13.1", } }

Rédiger vos fichiers à exécuter lors du déploiement

À la racine de votre projet, créez un répertoire bin (reportez-vous à l'implémentation du boilerplate du thème CMS). Dans ce répertoire, créez deux fichiers :

  1. deploy.sh : une commande shell qui exécutera le script de déploiement

Saisissez ce qui suit dans ce fichier :

#!/bin/bash npx hs upload src cms-theme-boilerplate

Notez que la deuxième ligne est la commande de chargement de l'ILC de CMS. Remplacez src (l'emplacement des fichiers sources de vos projets à charger dans HubSpot) et cms-theme-boilerplate (le nom de destination de votre projet dans votre compte CMS Hub).

Remarque : Si les fichiers sont supprimés de votre projet, ils devront être supprimés manuellement dans le gestionnaire de conception HubSpot. 

  1. generate-config.js : un script de nœud pour générer un fichier d'authentification à déployer sur votre compte de production CMS Hub.

Saisissez ce qui suit dans ce fichier :

#!/usr/bin/env node const path = require('path'); const fs = require('fs'); const yaml = require('js-yaml'); const portalId = process.env.HUBSPOT_PORTAL_ID; const HubSpotPersonalAccessKey = process.env.HUBSPOT_PERSONAL_ACCESS_KEY; const portalConfig = { name: 'PROD', portalId, apiKey, }; const config = { defaultPortal: 'PROD', portals: [portalConfig], }; fs.writeFileSync( path.join(process.cwd(), 'hubspot.config.yml'), yaml.safeDump(config) );

Aucune modification de ce fichier n'est requise.

Rendre les scripts exécutables

Pour rendre ces scripts exécutables, exécutez la commande suivante dans votre terminal à partir de la racine de vos projets :

chmod +x bin/generate-config.js;chmod +x bin/deploy.sh

Pour les utilisateurs Windows, essayez cet extrait ci-dessous :

git update-index --chmod=+x path/to/file

Créer votre workflow d'action GitHub

Les actions GitHub vous permettent d'exécuter un workflow sur n'importe quel événement GitHub. Dans la racine de votre projet, créez un fichier sur .github/workflows/deploy.yml.

Notre workflow de déploiement sera exécuté sur les pushs vers la branche principale. Collez ce qui suit dans votre fichier deploy.yml :

on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Use Node.js uses: actions/setup-node@v1 with: node-version: 10.x - name: Install NPM deps run: | npm install - name: Generate hubspot.config.yml and deploy env: HUBSPOT_PORTAL_ID: ${{ secrets.HubSpotPortalId }} HUBSPOT_PERSONAL_ACCESS_KEY: ${{ secrets.HubSpotPersonalAccessKey }} run: | bin/generate-config.js bin/deploy.sh

 ${{ secrets.HubSpotPersonalAccessKey }} et ${{ secrets.HubSpotPortalId }}{ %endraw%} ajouteront votre clé d'accès personnelle et vos secrets d'ID de compte HubSpot en tant que variables environnementales dans le processus de déploiement, sans avoir à stocker votre clé d'accès personnelle visiblement dans le contrôle de source. Suivez l'étape suivante pour créer le secret HubSpotPersonalAccessKey.

Vous pouvez consulter la documentation relative aux actions GitHub pour en savoir plus sur les différents événements que vous pouvez utiliser pour déclencher des workflows.

Créer un secret pour votre clé d'accès personnelle et votre ID de compte HubSpot

Pour vous assurer que votre clé d'accès personnelle n'est pas visible et stockée dans le contrôle de source, créez un secret pour elle qui sera transmis dans le script de déploiement en tant que variable environnementale. Dans votre référentiel GitHub, accédez à Paramètres > Secrets et sélectionnez « Ajouter un nouveau secret ». Nommez votre nouveau secret HubSpotPersonalAccessKey, puis saisissez votre clé d'accès personnelle HubSpot comme valeur. Sélectionnez « Ajouter un secret » pour enregistrer votre secret.

Cette clé sera transmise à ${{ secrets.HubSpotPersonalAccessKey }} à partir de votre fichier .github/workflows/deploy.yml. Si vous nommez votre secret autrement que HubSpotPersonalAccessKey, assurez-vous de mettre à jour la variable ${{ secrets.HubSpotPersonalAccessKey }}{ % endraw %} avec le nom secret que vous avez défini.

Bien que votre ID de compte HubSpot ne soit pas un vrai secret, il est utile de répéter ce processus pour ajouter votre ID de compte (parfois appelé ID de portail) comme un secret GitHub.  Créez un nouveau secret avec le nom HubSpotPortalId.  Voici comment obtenir votre ID de compte. Après cela, vous pourrez référencer votre ID de compte n'importe où dans ce projet en utilisant {%raw%}${{secrets.HubSpotPortalId}}{ %endraw%}.

Valider vos nouveaux dossiers et fichiers dans la branche principale

Si vous n'avez pas déjà validé vos nouveaux fichiers .github/workflows/deploy.yml, bin/deploy.sh et bin/generate-config.js dans votre branche principale. 

Créer et fusionner une demande d'extraction dans la branche principale

Maintenant que vos secrets, vos workflows et vos scripts sont dans votre référentiel GitHub, créez une demande d'extraction et fusionnez-la dans la branche principale. Une fois que vous avez fusionné la demande d'extraction, accédez à Actions et vous devriez voir votre action de déploiement se lancer et votre projet se déployer sur votre compte CMS Hub.

Capture d'écran de l'interface GitHub montrant l'action de déploiement GitHub

 

Verrouiller votre projet dans le gestionnaire de conception

Étant donné que le centre d'informations de votre projet réside désormais dans GitHub et que la branche principale représente votre site web en direct, il est important d'empêcher les modifications effectuées directement dans le gestionnaire de conception. Les modifications apportées à votre système de fichiers de développeur en direct ne doivent être apportées que par le biais de votre action de déploiement. Vous pouvez verrouiller les projets dans le gestionnaire de conception en effectuant un clic droit sur un dossier et en sélectionnant « Verrouiller le dossier » pour empêcher quiconque de modifier des fichiers dans le gestionnaire de conception.

Capture d'écran montrant le dossier verrouillé dans le gestionnaire de conception

 

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.