Richten Sie diesen Workflow ein, um Ihre App automatisch für die Produktion bereitzustellen und Ihren Release-Prozess zu optimieren.

Netlify ist eine Webhosting-Plattform und eine umfassende Suite von Tools für die Bereitstellung und Verwaltung von Webanwendungen in der Cloud.

Aber seine Funktionen gehen weit darüber hinaus – seine serverlosen Funktionen ermöglichen es Ihnen, serverseitigen Code ohne einen dedizierten Server auszuführen.

Erfahren Sie, wie Sie mithilfe von GitHub Actions eine CI/CD-Pipeline einrichten, um eine Node.js-REST-API auf Netlify bereitzustellen.

CI/CD-Pipelines mit GitHub-Aktionen: Ein Überblick

Continuous Integration- und Continuous Delivery-Pipelines (CI/CD) sind eine Reihe sequenzieller, automatisierter Prozesse, die Softwareanwendungen durchlaufen, bevor sie an die Produktion gesendet werden.

Typischerweise bestehen CI/CD-Pipelines aus mehreren Schlüsselphasen, einschließlich der Quell-, Build-, Test- und Bereitstellungsphase.

Während es möglich ist, diese Phasen manuell durchzuführen, bietet ihre Automatisierung mehrere Vorteile, darunter:

instagram viewer
  • Minimierung des Risikos menschlicher Fehler.
  • Beschleunigung des Veröffentlichungsprozesses.
  • Gewährleistung eines konsistenten Arbeitsablaufs für den Versand hochwertiger Software an die Produktion.

Was sind GitHub-Aktionen?

GitHub Actions ist ein in GitHub integriertes Tool, das eine breite Palette vorgefertigter Aktionen bereitstellt Sie können Workflows als Code direkt in Ihrem Projekt-Repository definieren, um das CI/CD zu automatisieren Pipelines.

Sie können auch benutzerdefinierte Aktionen erstellen, die Ihren spezifischen Projektanforderungen entsprechen, sodass Sie Anwendungen problemlos erstellen und für die Produktion bereitstellen können. Einer der Vorteile von GitHub Actions ist die nahtlose Integration mit anderen GitHub-Funktionen wie Pull Requests und Issue Tracking.

Dadurch ist es möglich, Workflows basierend auf bestimmten Ereignissen auszulösen, z. B. einem neuen Commit, um sicherzustellen, dass Ihre CI/CD-Pipelines bei Bedarf automatisch ausgelöst werden.

Richten Sie das Node.js-Projekt ein

Um zu beginnen, müssen Sie etwas erstellen ein Express-Webserver. Erstellen Sie dazu lokal einen neuen Ordner und ändern Sie das Verzeichnis auf Ihrem Endgerät.

mkdir express-netlify
CD Express-Netlify

Als nächstes erstellen Sie eine package.json Datei verwenden npm, der Node Package Manager.

npm init -y

Installieren Sie abschließend die im Projekt erforderlichen Abhängigkeiten.

npm install express netlify-lambda serverless-http

Der netlify-lambda Das Paket dient als lokaler Entwicklungsserver, der das Testen serverloser Funktionen erleichtert. serverlos-http hilft bei der Anpassung von Express.js-Apps an ein Format, das mit serverlosen Funktionshandlern kompatibel ist.

Netlify bietet keine native Unterstützung für das Hosten und Ausführen vollwertiger Backend-Anwendungen. Stattdessen bietet es serverlose Funktionen als alternative Lösung für die Handhabung der Backend-Funktionalität.

Diese Funktionen verwalten die serverseitige Logik, verarbeiten HTTP-API-Anfragen und stellen dynamische Inhalte bereit, wodurch Backend-ähnliche Funktionen innerhalb des serverlosen Paradigmas bereitgestellt werden.

Den Code dieses Projekts finden Sie in seiner GitHub-Repository.

Erstellen Sie den Express-Webserver

Erstellen Sie drei Ordner: dist, Funktionen, Und src im Stammverzeichnis Ihres Projektordners.

Bevor Sie den Express-Server einrichten, erstellen Sie einen Rohling index.html Datei in der dist Ordner. Diese Datei fungiert als Platzhalter, der es Netlify ermöglicht, die Express-Anwendung erfolgreich bereitzustellen und die API-Routen bereitzustellen.

Erstellen Sie nun eine src/app.js Datei und fügen Sie den folgenden Code hinzu:

const ausdrücken = erfordern("äußern");
const serverlos = erfordern(„serverlos-http“);
const app = express();
const Router = Express. Router();


router.get("/", (req, res) => {
 res.send("Hallo Welt!")
});


app.use(`/.netlify/functions/app`, Router);
Modul.exports = app;
Modul.exports.handler = serverlos (App);

Dieser Code definiert einen Express-Server mit einer einzigen Route für die Root-URL, die GET-Anfragen verarbeitet. Der app.use Die Funktion registriert die Middleware der Route bei der Express-Anwendung und stellt so sicher, dass alle HTTP-Anfragen an den Pfad gestellt werden /.netlify/functions/app wird vom Router auch in einer Produktionsumgebung ordnungsgemäß verarbeitet.

Wenn Sie also einen neuen Endpunkt hinzufügen, z /api/auth, es wird auf zugänglich sein /.netlify/functions/app/api/auth. Schließlich exportiert der Code die Express-Anwendung und die serverlose Handlerfunktion.

Dies ermöglicht das lokale Testen des Servers und stellt sicher, dass Sie ihn als serverlose Funktion auf Netlify bereitstellen können.

Definieren Sie die Netlify.toml-Datei

Erstellen Sie im Stammverzeichnis ein neues Netlify.toml Datei und fügen Sie den folgenden Code hinzu.

[bauen]
 Basis = „/“
 command = „npm run build“
 veröffentlichen = "/dist/"
 Funktionen = "Funktionen/"
[build.environment]
 NODE_VERSION = "16"
[Funktionen]
 external_node_modules = ["äußern"]
 node_bundler = "esbuild"
[[Weiterleitungen]]
 Kraft = wahr
 from = "/api/*"
 Status = 200
 to = "/.netlify/functions/app/:splat"
[[Weiterleitungen]]
 from = "/*"
 Status = 200
 to = "/index.html"

Der Code gibt die Build- und Bereitstellungskonfigurationseinstellungen für die Express-App auf Netlify an. Es umfasst Einstellungen wie das Basisverzeichnis, den Build-Befehl, das Veröffentlichungsverzeichnis und das Funktionsverzeichnis.

Darüber hinaus werden Umleitungseinstellungen definiert, die die Weiterleitung von HTTP-API-Anfragen verwalten und sicherstellen sollen, dass diese ordnungsgemäß an die serverlosen Netlify-Funktionen weitergeleitet werden.

Aktualisieren Sie die Datei Package.json

Öffne das package.json Datei und fügen Sie diese Befehle dem Skriptobjekt hinzu.

„Skripte“: {
"Start": „netlify-lambda dienen src“,
"bauen": „netlify-lambda build src“
 },

Führen Sie die folgenden Befehle aus, um die Anwendung lokal zu erstellen und zu starten.

npm run build
NPM-Laufstart

Der Server startet auf Port 9000. Sie können die API mit Postman testen, indem Sie Anfragen an senden http://localhost: 9000/.netlify/functions/app

Bevor Sie schließlich den GitHub Actions-Workflow einrichten, um Bereitstellungen auf Netlify zu automatisieren, Erstellen Sie ein Repository auf GitHub, und übertragen Sie die Projektdateien.

Stellen Sie die Express-Anwendung auf Netlify bereit

Stellen Sie zunächst die API auf Netlify bereit, bevor Sie den GitHub Actions-Workflow konfigurieren. Befolgen Sie diese Schritte, um die Express-App auf Netlify bereitzustellen.

  1. Geh 'rüber zu Netlify und erstellen Sie ein Konto und melden Sie sich an Überblick Buchseite.
  2. Wählen Sie aus und klicken Sie darauf Websites Tab.
  3. Klick auf das Aus Git importieren drücken und auswählen GitHub als Git-Anbieterplattform. Netlify fordert Sie auf, sich bei GitHub zu authentifizieren, um ihm Zugriff auf Ihr Konto und die Projekt-Repositories zu gewähren.
  4. Wählen Sie das Express-Projekt-Repository aus der Liste der angezeigten Repositorys aus.
  5. Nachdem Sie das Repository ausgewählt haben, müssen Sie die Build-Einstellungen für den Bereitstellungsprozess konfigurieren. Netlify vereinfacht diesen Prozess, indem es die zum Erstellen der Anwendung verwendete Technologie automatisch erkennt und die Felder mit den erforderlichen Build-Einstellungen vorab ausfüllt. In diesem Fall der Build-Befehl, das Veröffentlichungs- und das Funktionsverzeichnis.
  6. Klicken Sie abschließend auf Site bereitstellen Klicken Sie auf die Schaltfläche, um den Vorgang abzuschließen.

Erstellen Sie einen GitHub-Aktionsworkflow

Klick auf das Aktionen Registerkarte im GitHub-Repository Ihres Projekts. Im Kontinuierliche Integration Abschnitt auswählen, auswählen und anklicken Konfigurieren Sie Node.js Arbeitsablauf.

Benennen Sie den Dateinamen im GitHub-Editor in um Netlify.yml, löschen Sie den Boilerplate-Node.js-Workflowcode und fügen Sie den folgenden Code hinzu:

Name:BauenUndEinsetzenZuNetlify
An:
drücken:
pull_request:
Arbeitsplätze:
bauen:
läuft auf:Ubuntu-22.04
Schritte:
-Verwendet:Aktionen/checkout@v3
# (In ./dist oder ein anderes Verzeichnis erstellen... )
-Name:EinsetzenZuNetlify
Verwendet:nwtgck/[email protected]
mit:
Veröffentlichungsverzeichnis:'./dist'
Produktionszweig:hauptsächlich
Github-Token:${{Geheimnisse. GITHUB_TOKEN}}
Bereitstellungsnachricht:„Bereitstellung über GitHub-Aktionen“
enable-pull-request-comment:FALSCH
enable-commit-comment:WAHR
überschreibt-Pull-Request-Kommentar:WAHR
Umgebung:
NETLIFY_AUTH_TOKEN:${{Geheimnisse. NETLIFY_AUTH_TOKEN}}
NETLIFY_SITE_ID:${{Geheimnisse. NETLIFY_SITE_ID}}
Timeout-Minuten:1

Hier ist eine Aufschlüsselung der Workflow-Eigenschaften:

  • An: Ereignisse, die die Aktionen in diesem Workflow auslösen.
  • Arbeitsplätze: Gibt das Ereignis an, das eine bestimmte Aktion ausführen soll. Dabei handelt es sich um die Build- und Deployment-Ereignisse.
  • läuft auf: die Host-Produktionsumgebung für die Aktion.
  • Schritte: Gibt eine Reihe von Schritten an, die zur Ausführung einer bestimmten Aufgabe erforderlich sind.
  • mit: Definiert die Argumente, die für die ordnungsgemäße Ausführung der Aktionen erforderlich sind.
  • env: Gibt die erforderlichen Umgebungsvariablen für den Workflow an.

Übernehmen Sie abschließend die an dieser Datei vorgenommenen Aktualisierungen. GitHub sollte den Workflow automatisch auslösen.

Der erste Build löst jedoch einen Fehler aus, da Sie geheime Variablen hinzufügen müssen, die für den Workflow erforderlich sind: die bereitgestellte Site-ID und das Authentifizierungstoken von Netlify. Gehen Sie zu Ihrem Seiteneinstellungen auf Netlify und kopieren Sie die Webseitenadresse.

Um das Authentifizierungstoken zu erhalten, klicken Sie auf Benutzerprofil Symbol und wählen Sie das aus Benutzereinstellungen Option aus dem Dropdown-Fenster. Wählen Sie auf der Einstellungsseite aus Anwendungen, und klicken Sie Neues Zugriffstoken um Ihr Authentifizierungstoken zu generieren.

Fügen Sie die beiden Umgebungsvariablen NETLIFY_SITE_ID und NETLIFY_AUTH_TOKEN sowohl zu den Umgebungsvariablen als auch zu den Repository-Geheimnissen in Ihrem GitHub-Repository hinzu. Nachdem Sie diese Änderungen vorgenommen haben, führen Sie den Workflow erneut aus. Netlify stellt automatisch alle nachfolgenden Änderungen bereit, die Sie über diese Pipeline übertragen.

Testen Sie die API mit Postman, indem Sie Anfragen an diese URL stellen: /.netlify/functions/app.

Konfigurieren von CI/CD-Pipelines mit GitHub Actions und Netlify

Durch die Nutzung der serverlosen Funktionen von Netlify können Sie vollwertige Webanwendungen bereitstellen, die sowohl clientseitige als auch Backend-Funktionalitäten auf Netlify umfassen.

Darüber hinaus bietet die Einrichtung von CI/CD-Pipelines für Anwendungen mit GitHub Actions einen optimierten Ansatz zur Automatisierung des Build- und Bereitstellungsprozesses. Dadurch können Sie Arbeitsabläufe definieren, die einen reibungslosen und zuverlässigen Entwicklungsprozess gewährleisten, angefangen bei der Ideenfindung über den Fortschritt bis hin zur Release-Phase.