Einführung

Die Bereitstellung einer Next.js-Webanwendung in der Produktion kann rationalisiert und effizient sein, wenn AWS (Amazon Web Services) Elastic Beanstalk, Docker und CI/CD-Pipelines mit AWS Code Build, Code Deploy und GitLab genutzt werden. Dieser Leitfaden führt Sie durch die Einrichtung einer modernen Bereitstellungspipeline, um sicherzustellen, dass Ihre App robust, skalierbar und einfach zu warten ist.

Voraussetzungen

Bevor Sie in den Bereitstellungsprozess eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

• Ein AWS-Root-Konto oder ein IAM-Konto mit der Berechtigung zum Erstellen von Elastic Beanstalk-Umgebungen innerhalb von AWS

• Docker auf Ihrem lokalen Computer installiert

• GitLab- oder GitHub-Konto mit einem Repository für Ihre Next.js-App

• Ein Next.js-Projekt, das zur Bereitstellung bereit ist

Schritt 1: Richten Sie AWS Elastic Beanstalk ein

• Erstellen Sie eine Elastic Beanstalk-Umgebung – Melden Sie sich bei der AWS Management Console an, navigieren Sie zu Elastic Beanstalk und erstellen Sie eine neue Anwendung.

• Geben Sie Ihren Anwendungsnamen ein und klicken Sie auf Erstellen.

• Nachdem Sie die Anwendung erstellt haben, ist es nun an der Zeit, die neue Umgebung zu erstellen. Klicken Sie auf Neue Umgebung erstellen.

• Wählen Sie die Webserverumgebung. Der Umgebungsname erhält zusammen mit Ihrem Anwendungsnamen das Suffix env und Sie können es bei Bedarf bearbeiten.

• Geben Sie den gültigen Umgebungsnamen zusammen mit der Domäne ein. Geben Sie den Domainnamen ein.

• Wählen Sie die entsprechende Plattform. In diesem Fall wählen wir Managed Platform und Docker als Plattform.

• Wählen Sie im Anwendungscode „Beispielanwendung“ aus, da wir unseren eigenen Code über die AWS Code Pipeline bereitstellen werden.

• In Voreinstellungen können Sie die Standardeinstellung belassen, für Produktionsanwendungen empfiehlt es sich jedoch, die Hochverfügbarkeitsinstanz zu verwenden. Nachdem Sie die Voreinstellung ausgewählt haben, klicken Sie auf Weiter.

• Erstellen oder verwenden Sie Ihre vorhandene Servicerolle. Es ist wichtig, dass die Elastic Beanstalk-Dienstrolle zusammen mit der EC2-Dienstrolle eingerichtet ist, bevor Sie mit der Erstellung der EC2-Instanz fortfahren.
  Wenn Sie jedoch von Ihrem Terminal aus eine SSH-Verbindung zur EC2-Instanz herstellen möchten, fügen Sie ein EC2-Schlüsselpaar hinzu und erstellen Sie ein EC2-Instanzprofil, um die erforderlichen Vorgänge auszuführen.

• Wählen Sie Ihre VPC aus, in der Sie Ihre EC2-Instanz bereitstellen möchten.

• Wählen Sie nach Auswahl der VPC das Subnetz in jeder Availability Zone aus. Um Ihren Load Balancer und Ihre Instanzen in denselben öffentlichen Subnetzen auszuführen, weisen Sie den Instanzen öffentliche IP-Adressen zu, wie im Bild gezeigt.

• Da wir keine Datenbank konfigurieren müssen, können wir mit dem nächsten Schritt fortfahren, indem wir auf Weiter klicken.

• Als Root-Volume wählen wir Allzweck-SSD.

• Jetzt können Sie aus der Sicherheitsgruppe entweder eine bereits vorhandene Sicherheitsgruppe auswählen oder sie unverändert lassen, und Elastic Beanstalk erstellt beim Einrichten der EC2-Instanz eine für Sie.

• Bei der Bereitstellung für Produktionszwecke ist es immer ratsam, die automatische Skalierung zu konfigurieren und den Instanztyp auszuwählen, den Elastic Beanstalk zur Bereitstellung des Datenverkehrs erstellt. Wir werden mit der T3-Familie gehen.

• Klicken Sie auf Weiter.

• Bei der Gesundheitsberichterstattung entscheiden wir uns für die Basisberichterstattung, Sie können jedoch auch aus den verfügbaren Optionen wählen, je nachdem, welche Art von Bericht Sie benötigen.

• Wir werden auch die Aktualisierungen der verwalteten Plattform deaktivieren, da diese für die Demo-Website nicht erforderlich sind.

• Behalten Sie die restlichen Einstellungen bei und klicken Sie auf Weiter.

• Überprüfen Sie abschließend Ihre Änderungen und klicken Sie auf Senden.

• Elastic Beanstalk startet Ihre Umgebung, und es wird einige Zeit dauern.

• Nach einem erfolgreichen Start wird der Glückwunschbildschirm angezeigt.

Schritt 2: Erstellen Sie Ihre Next.js-App (oder verwenden Sie eine vorhandene)

• Um eine Next.js-App zu erstellen, öffnen Sie Ihr Terminal, wechseln Sie in das Verzeichnis, in dem Sie die App erstellen möchten, und führen Sie den folgenden Befehl aus:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 

Wenn Sie Ihren vorhandenen Code bereits bereit haben, können Sie mit dem nächsten Teil fortfahren.

• Sie haben jetzt ein neues Verzeichnis namens nextjs-blog. Lassen Sie uns hineingehen:

cd nextjs-blog 

Führen Sie dann den folgenden Befehl aus:

npm run dev 

Dadurch wird der „Entwicklungsserver“ Ihrer Next.js-App (mehr dazu später) auf Port 3000 gestartet.

Lassen Sie uns prüfen, ob es funktioniert. Öffnen Sie http://localhost:3000 in Ihrem Browser.

• Jetzt ist es an der Zeit, eine Docker-Datei innerhalb der Anwendung zu erstellen.

• Erstellen Sie eine Datei mit dem Namen Dockerfile im Stammverzeichnis Ihrer Anwendung und fügen Sie den folgenden Code hinzu:
  

FROM node:18-alpine 

RUN mkdir -p /app 

WORKDIR /app 

COPY . . 

RUN npm install 

RUN npm run build 

EXPOSE 3000 

CMD ["npm", "start"] 

• Nachdem Sie die Änderungen vorgenommen haben, ist es wichtig zu überprüfen, ob der Build erfolgreich ist. Starten Sie die Docker-Engine und führen Sie den folgenden Befehl aus:

docker build -t testapp . 

Sobald der Build erfolgreich ist, führen Sie die Anwendung mit dem folgenden Befehl aus:

docker run -p 3000:3000 testapp 

• Erstellen Sie eine Datei mit dem Namen buildspec.yml im Stammverzeichnis Ihrer Anwendung und fügen Sie den folgenden Code hinzu. Diese Datei wird zu einem späteren Zeitpunkt beim Einrichten der Code-Pipeline in AWS verwendet.

version: 0.2 

artifacts: 

  type: zip 

  files: 

    - '**/*' 

• Nachdem Sie diese Dateien zu Ihrem neuen oder vorhandenen Code hinzugefügt haben, übertragen Sie diese Änderungen per Push in das Remote-Repository auf Gitlab oder GitHub.

Schritt 3: Code-Pipeline einrichten

• Melden Sie sich bei der AWS Management Console an, navigieren Sie zu Code Pipeline und klicken Sie auf Pipeline erstellen.

• Geben Sie einen gültigen Pipeline-Namen ein und wählen Sie den Ausführungsmodus für die Pipeline. In unserem Fall wählen wir „Queued“ (Pipeline-Typ V2 erforderlich).

• Erstellen Sie eine neue Servicerolle, falls diese noch nicht vorhanden ist, oder wählen Sie eine vorhandene Servicerolle aus und klicken Sie auf Weiter.

• Wählen Sie beim Quellanbieter aus, wo Ihre Artefakte gespeichert sind. Wir werden „Gitlab“ auswählen.

• Wählen Sie in der Verbindungsliste eine vorhandene Verbindung aus oder erstellen Sie eine neue Verbindung.

• Sobald die Verbindung erfolgreich ist, wählen Sie den Repository-Namen und den Zweig aus, aus dem der Code verwendet werden soll.

• Als Triggertyp wählen wir „Kein Filter“ und klicken auf „Weiter“.

• Als nächstes wählen wir den Build Provider aus. In unserem Fall wählen wir AWS Code Build. Wählen Sie die Region aus oder belassen Sie sie bei der standardmäßigen AWS-Region.

• Erstellen Sie dann ein neues Projekt in Code Build, indem Sie auf Projekt erstellen klicken. Dadurch wird ein neues Fenster geöffnet. Geben Sie den Projektnamen ein und belassen Sie alles in der Umgebung als Standard.

• Stellen Sie beim Angeben der Build-Spezifikation sicher, dass Sie Buildspec-Datei verwenden auswählen. Dies ist dieselbe Datei, die wir zuvor erstellt haben. Behalten Sie die anderen Einstellungen als Standard bei und fahren Sie mit dem nächsten Schritt fort.

• Wenn Sie auf „Weiter zur Code-Pipeline“ klicken, wird das Fenster automatisch geschlossen und Sie gelangen zurück zum Code-Pipeline-Bildschirm.

• Geben Sie den Build-Typ als Einzelbuild an und klicken Sie auf Weiter.

• Wählen Sie in der Phase „Bereitstellung hinzufügen“ den Bereitstellungsanbieter aus. In diesem Fall wird es AWS Elastic Beanstalk sein, wo die Anwendung endgültig bereitgestellt werden soll.

• Wählen Sie den Anwendungsnamen und den Umgebungsnamen aus, konfigurieren Sie die Rollback-Einstellungen und klicken Sie auf Weiter. Überprüfen Sie Ihre Code-Pipeline-Einstellungen und klicken Sie auf Pipeline erstellen.

Schritt 4: Website ist live!

Die Bereitstellung der Next.js-Webanwendung für die Produktion ist wirklich einfach und kann mit AWS Elastic Beanstalk, Docker und CI/CD-Pipelines mithilfe von AWS Code Build, Code Deploy und GitLab effizienter erfolgen.

Sie können über die von Elastic Beanstalk bereitgestellte URL darauf zugreifen. Nehmen Sie Änderungen lokal vor und es wird automatisch bereitgestellt, wenn Sie es in Ihre Filiale übertragen.

Viel Spaß beim Codieren!!