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

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.

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.

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:

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:

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:

Es sind keine Änderungen an dieser Datei erforderlich.

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:

 ${{ 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.

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.

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. 

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.

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.