Einrichten einer kontinuierlichen Integration mit einem GitHub-Repository mithilfe von GitHub-Aktionen

Last updated:

Wenn Sie als Teil eines Web-Entwicklungsteams arbeiten, möchten Sie vielleicht Ihre gesamte Produktionscodebasis in der Versionskontrolle haben. Auf diese Weise kann Ihr Entwicklerteam Ihr bevorzugtes Versionskontrollsystem nutzen, um zusammenzuarbeiten, Änderungen nachzuverfolgen und sie einfach zurückzunehmen. Erfahren Sie mehr über Entwickler-Workflows in CMS Hub, indem Sie der Anleitung zum Erstellen eines effizienten Entwickler-Workflows folgen. 

In dieser Anleitung wird erläutert, wie Sie mithilfe von GitHub-Aktionen eine kontinuierliche Integration mit einem GitHub-Repository einrichten. Bei dieser Anleitung wird davon ausgegangen, dass Sie mit Git und GitHub vertraut sind und Websites mithilfe der CMS-CLI erstellen. Wenn Sie das noch nicht eingerichtet haben, folgen Sie der Anleitung Lokale Entwicklungswerkzeuge: Erste Schritte.

Das Entwickler-Dateisystem zu GitHub holen

Mithilfe des fetch-Befehls im CMS-CLI können Sie Ihr gesamtes Entwickler-Dateisystem abrufen. Führen Sie hs fetch project root aus, um Ihr Design-Manager-Projekt in Ihre lokale Umgebung zu kopieren. 

Wenn Sie ein neues Projekt starten, können Sie die CMS Hub Boilerplate klonen, oder abspalten, die Entwicklern einen Vorsprung bei neuen HubSpot CMS-Projekten verschaffen soll. Für dieses Projekt sind Aktionen eingerichtet, um Zusammenführungen zum Master von https://github.com/HubSpot/cms-theme-boilerplate zu https://boilerplate.hubspotcms.com bereitzustellen. 

Folgen Sie diesem GitHub-Hilfeartikel zum Hinzufügen Ihres Projekts zu einem GitHub-Repository.

Verwenden Sie die CMS Hub-Bereitstellungsaktion in GitHub (empfohlen)

Wir haben eine GitHub-Aktion erstellt, die Sie in Ihrem GitHub-Projekt installieren können, damit es Ihre Änderungen automatisch von einer Verzweigung zu Ihrem Produktionsportal bereitstellt.

Install GitHub Action

Manuelle Konfiguration

Es wird empfohlen, die Bereitstellungsaktion zu verwenden, da dadurch ein Großteil des Setups und der Konfiguration wegfällt. Wenn Sie Ihre Aktion immer noch manuell konfigurieren möchten oder einen anderen Dienst als GitHub nutzen, befolgen Sie die folgenden Anweisungen.

Abhängigkeiten zu Ihrer package.json-Datei hinzufügen

Wenn Sie noch keine haben, erstellen Sie eine package.json-Datei im Projektstammverzeichnis. Fügen Sie @hubspot/cli und js-yaml als devDependencies hinzu. Das sollte etwas so aussehen:

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

Ihre Dateien schreiben, die bei der Bereitstellung ausgeführt werden sollen

Erstellen Sie im Stammverzeichnis Ihres Projekts ein bin-Verzeichnis (siehe Implementierung der CMS Hub Boilerplate). Erstellen Sie in diesem Verzeichnis zwei Dateien:

  1. deploy.sh – ein Shell-Befehl, der das Bereitstellungsskript ausführt

Geben Sie Folgendes in dieser Datei ein:

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

Beachten Sie, dass Zeile zwei derupload-Befehl des CMS-CLI ist. Ersetzen Sie src (der Speicherort Ihrer Projektquelldateien, die zu HubSpot hochgeladen werden sollen) und cms-theme-boilerplate (der Zielname Ihres Projekts in Ihrem CMS Hub-Account.

Hinweis: Wenn Dateien aus Ihrem Projekt entfernt werden, müssen sie manuell im HubSpot-Design-Manager gelöscht werden. 

  1. generate-config.js – ein Node-Skript zum Generieren einer Authentifizierungsdatei für Ihren CMS Hub-Produktions-Account.

Geben Sie Folgendes in dieser Datei ein:

#!/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) );

Es sind keine Änderungen an dieser Datei erforderlich.

Die Skripte ausführbar machen

Um diese Skripte ausführbar zu machen, führen Sie in Ihrem Terminal den folgenden Befehl vom Projektstammverzeichnis aus:

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

Für Windows-Benutzer, versuchen Sie dieses Snippet unten:

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

Ihren GitHub-Aktionsworkflow erstellen

Mit GitHub-Aktionen können Sie einen Workflow für jedes GitHub-Eveignis ausführen. Erstellen Sie in Ihrem Projektstammverzeichnis eine Datei unter .github/workflows/deploy.yml.

Unser Bereitstellungsworkflow findet bei Pushs in die Master-Zweigstelle statt. Fügen Sie Folgendes in de deploy.yml-Datei ein:

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 }} und ${{ secrets.HubSpotPortalId }} fügen Ihren Geheimnissen für den persönlichen Zugriffsschlüssel und Ihre HubSpot-Account-ID als Umgebungsvariablen im Bereitstellungsprozess hinzu, ohne Ihren persönlichen Zugriffsschlüssel sichtbar in der Versionskontrolle speichern zu müssen. Folgen Sie dem nächsten Schritt, um das HubSpotPersonalAccessKey-Geheimnis zu erstellen.

In der Dokumentation zu GitHub-Aktionen erfahren Sie mehr über verschiedene Ereignisse, mit denen Sie Workflows auslösen können.

Erstellen Sie ein Geheimnis für Ihren persönlichen Zugriffsschlüssel und Ihre HubSpot-Account-ID

Um sicherzustellen, dass Ihr persönlicher Zugriffsschlüssel nicht sichtbar ist und in der Versionskontrolle gespeichert wird, erstellen Sie ein Geheimnis dafür, das als Umgebungsvariable in das Bereitstellungsskript übergeben wird. Gehen Sie in Ihrem GitHub-Repository zu „Einstellungen“ > „Geheimnisse“ und wählen Sie die Option zum Hinzufügen eines neuen Geheimnisses aus. Benennen Sie Ihr neues Geheimnis HubSpotPersonalAccessKey und geben Sie dann Ihren persönlichen HubSpot-Zugriffsschlüssel als Wert ein. Wählen Sie „Geheimnis hinzufügen“ aus, um Ihr Geheimnis zu speichern.

Dieser Schlüssel wird in ${{ secrets.HubSpotPersonalAccessKey }} aus Ihrer .github/workflows/deploy.yml-Datei übergeben. Wenn Sie Ihrem Geheimnis einen anderen Namen als HubSpotPersonalAccessKey geben, aktualisieren Sie die ${{ secrets.HubSpotPersonalAccessKey }}-Variable mit dem von Ihnen festgelegten Geheimnisnamen.

Während Ihre HubSpot-Account-ID kein wahres Geheimnis ist, ist es nützlich, diesen Vorgang zu wiederholen, um Ihre Account-ID (manchmal als Portal-ID bezeichnet) als GitHub-Geheimnis hinzuzufügen.  Erstellen Sie ein neues Geheimnis mit dem Namen HubSpotPortalId.  In diesem Artikel erfahren Sie, wie Sie Ihre Account-ID abrufen. Nachdem Sie dies getan haben, können Sie nun Ihre Account-ID überall in diesem Projekt mit ${{secrets.HubSpotPortalId}} referenzieren.

Ihre neuen Ordner und Dateien in die Hauptverzweigung übernehmen

Wenn Sie Ihre neuen .github/workflows/deploy.yml-, bin/deploy.sh- und bin/generate-config.js-Dateien noch nicht in Ihre Hauptverzweigung übernommen haben, sollten Sie dies nun tun. 

Einen Pull Request erstellen und in der Hauptverzweigung zusammenführen

Nun, da sich Ihre Geheimnisse, Workflows und Skripts in Ihrem GitHub-Repository befinden, erstellen Sie einen Pull Request und führen Sie ihn in der Hauptverzweigung zusammen. Sobald Sie den Pull Request zusammengeführt haben, gehen Sie zu „Aktionen“. Ihre Bereitstellungsaktion und die Bereitstellung Ihres Projekts in Ihrem CMS Hub-Account sollten nun starten.

Screenshot der GitHub-Schnittstelle mit der GitHub-Bereitstellungsaktion

 

Ihr Projekt im Design-Manager sperren

Da sich die Datenbank für Ihr Projekt jetzt in GitHub befindet und der Master Ihre Live-Website repräsentiert, ist es wichtig, Änderungen direkt im Design-Manager zu verhindern. Änderungen an Ihrem Live-Entwickler-Dateisystem sollten nur über Ihre Bereitstellungsaktion erfolgen. Sie können Projekte im Design-Manager sperren, indem Sie mit der rechten Maustaste auf einen Ordner klicken und „Ordner sperren“ auswählen, um zu verhindern, dass jemand Dateien im Design-Manager bearbeitet.

Screenshot von gesperrtem Ordner im Design-Manager

 


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.