Vollständiger Leitfaden zur Next.js-Bereitstellung auf AWS Elastic Beanstalk: Using-Docker, AWS CodePipeline und CodeBuild

pengenalan

Menggunakan aplikasi web Next.js kepada pengeluaran boleh diperkemas dan cekap apabila memanfaatkan saluran paip Elastic Beanstalk, Docker dan CI/CD AWS (Perkhidmatan Web Amazon) dengan AWS Code Build, Code Deploy dan GitLab. Panduan ini akan memandu anda melalui penyediaan saluran paip penggunaan moden untuk memastikan apl anda teguh, berskala dan mudah diselenggara.

Prasyarat

Sebelum menyelami proses penempatan, pastikan anda mempunyai:

• Akaun akar AWS atau akaun IAM dengan kebenaran untuk mencipta persekitaran Elastic Beanstalk dalam AWS

• Docker dipasang pada mesin tempatan anda

• Akaun GitLab atau GitHub dengan repositori untuk apl Next.js anda

• Projek Next.js yang sedia untuk digunakan

Langkah 1: Sediakan AWS Elastic Beanstalk

• Buat Persekitaran Elastic Beanstalk - Log masuk ke AWS Management Console, navigasi ke Elastic Beanstalk dan buat aplikasi baharu.

• Masukkan nama aplikasi anda dan klik pada Cipta.

• Selepas anda mencipta aplikasi, kini tiba masanya untuk mencipta Persekitaran Baharu. Klik pada Cipta persekitaran baharu.

• Pilih persekitaran pelayan web. Nama persekitaran akan mempunyai akhiran env bersama-sama dengan nama aplikasi anda dan anda boleh mengeditnya jika mahu.

• Masukkan nama persekitaran yang sah bersama-sama dengan domain. Masukkan nama domain .

• Pilih platform yang sesuai. Dalam kes ini, kami akan memilih Platform Terurus dan Docker sebagai platform.

• Dalam kod aplikasi, pilih Aplikasi Contoh kerana kami akan menggunakan kod kami sendiri melalui AWS Code Pipeline.

• Dalam pratetap anda boleh membiarkannya lalai, walau bagaimanapun, untuk aplikasi pengeluaran, adalah dinasihatkan untuk menggunakan contoh ketersediaan Tinggi. Sebaik sahaja anda telah memilih pratetap klik pada Seterusnya.

• Buat atau gunakan peranan perkhidmatan anda yang sedia ada. Adalah penting untuk mempunyai peranan perkhidmatan Elastic Beanstalk bersama-sama dengan persediaan peranan perkhidmatan EC2 sebelum meneruskan dengan penciptaan tika EC2.
  Walau bagaimanapun, jika anda ingin SSH ke dalam tika EC2 dari terminal anda, tambahkan pasangan kunci EC2 dan buat profil tika EC2 untuk melaksanakan operasi yang diperlukan.

• Pilih VPC anda untuk menggunakan tika EC2 anda.

• Selepas memilih VPC, pilih subnet dalam setiap Zon Ketersediaan. Untuk menjalankan pengimbang beban dan kejadian anda dalam subnet awam yang sama, tetapkan alamat IP awam kepada kejadian seperti yang ditunjukkan dalam imej.

• Memandangkan, kita tidak perlu mengkonfigurasi pangkalan data, kita boleh meneruskan ke langkah seterusnya dengan mengklik pada Seterusnya.

• Untuk volum akar, kami akan memilih SSD Tujuan Umum.

• Kini, daripada kumpulan keselamatan, anda boleh sama ada memilih daripada kumpulan keselamatan yang sedia ada atau biarkan ia seperti sedia ada, dan Elastic Beanstalk akan mencipta satu untuk anda semasa menyediakan tika EC2.

• Jika digunakan untuk tujuan pengeluaran, anda dinasihatkan untuk mengkonfigurasi penskalaan automatik dan memilih jenis tika yang akan dibuat oleh Elastic Beanstalk untuk melayani trafik. Kami akan pergi bersama keluarga t3.

• Klicken Sie auf Weiter.

• Bei der Gesundheitsberichterstattung werden wir uns für die Basisberichterstattung entscheiden, aber Sie können jederzeit aus den verfügbaren Optionen wählen, basierend auf der Art des Berichts, den 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 prü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 bestehende 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 Auslösertyp 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 ist es AWS Elastic Beanstalk, 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!!

Das obige ist der detaillierte Inhalt vonVollständiger Leitfaden zur Next.js-Bereitstellung auf AWS Elastic Beanstalk: Using-Docker, AWS CodePipeline und CodeBuild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!