Kürzlich habe ich meine Open-Source-Version von 2048 Game überarbeitet und beschlossen, sie auf Next.js und React 18 zu migrieren. Das vorhandene Spiel wurde ohne benutzerdefinierte Domain auf GitHub Pages veröffentlicht. Ich habe über eine Bereitstellung auf Vercel nachgedacht, aber es würde den organischen Traffic von Google verlieren, der in den letzten drei Jahren aufgebaut wurde. Das bedeutet, dass ich mit der Bereitstellung auf GitHub Pages experimentieren musste und heute werde ich teilen, was ich gelernt habe. Wenn Sie das Endergebnis sehen möchten, bevor Sie den gesamten Artikel lesen, können Sie dies tun . Überprüfen Sie es hier Kurze Einführung Ich werde zwei GitHub-Funktionen verwenden – GitHub Actions und GitHub Pages. Wenn Sie noch nie davon gehört haben, lassen Sie es mich kurz erklären: sind wie kleine Workflows, die Aufgaben in Ihren Projekten erledigen können. Es ist, als hätte man einen Helfer, der automatisch die Dinge tut, die man ihm sagt. Sie können Aktionen zum Ausführen von Tests, für Qualitätsprüfungen oder zum Erstellen Ihrer Anwendung verwenden. In meinem Fall habe ich diese Workflows verwendet, um die Bereitstellungspipeline zu automatisieren. GitHub-Aktionen Was sind ? Betrachten Sie sie als eine Webhosting-Option für Entwickler und Open-Source-Projekte. Sie können GitHub Pages verwenden, um Ihre Portfolios zu teilen, Websites Ihrer Open-Source-Projekte zu hosten oder einfach Ihre Lieblingsprojekte wie meines zu veröffentlichen. GitHub-Seiten Jetzt fangen wir an. Schritt 1 – Aktivieren Sie GitHub-Seiten für Ihr Repository Um unsere Next.js-Anwendung zu veröffentlichen, musste ich GitHub Pages für das Repository des Projekts aktivieren. Sie finden die Registerkarte „Einstellungen“ (1 im Bild unten), wählen dann aus dem Menü auf der linken Seite (2) und finden das Dropdown-Menü, mit dem wir die angeben können (3). „Seiten“ Bereitstellungsquelle Jetzt müssen Sie die in ändern. Bereitstellungsquelle GitHub Actions Von nun an verfügt Ihr Projekt über eine eigene Seite. Sie müssen dort lediglich Inhalte veröffentlichen. Schritt 2 – Konfigurieren Sie den Next.js-Build-Prozess Vor der Bereitstellung der Next.js-App ist es wichtig, die Build-Ausgabe zu ändern. Standardmäßig verwendet Next.js Node.js, um die Anwendung auszuführen, und dies ist nicht mit GitHub Pages kompatibel. GitHub Pages ist für das Hosten statischer Dateien konzipiert, was bedeutet, dass wir dort nur HTML, CSS, JavaScript (und andere statische Dateien) veröffentlichen können. Daher müssen wir die statische Seitengenerierung in Next.js aktivieren. Dazu ändern Sie den Ausgabemodus in in : export next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; Nach der Ausführung generiert Next.js nun einen -Ordner mit statischen Assets für Ihre App. In den nächsten Schritten werden wir dieses Verzeichnis nehmen und es auf GitHub Pages hochladen. next build out Schritt 3 – Fehlende Bilder beheben Die Seiten werden unter einem Unterpfad einer Domain veröffentlicht und verwenden den Projektnamen als Unterpfad. Verwirrend? Werfen wir als Beispiel einen kurzen Blick auf eine URL meines 2048-Spiels: https://mateuszsokola.github.io/2048-in-react/ Github hat für meinen Benutzer eine eigene Subdomain namens erstellt. Aber das Projekt wird unter dem Unterpfad veröffentlicht, der in meinem Fall ist. Leider führt dies zu Problemen mit fehlenden Bildern und Stilen. mateuszsokola (mein Benutzername) /2048-in-react Standardmäßig ordnet Next.js alle statischen Assets der Domäne zu. Dies bedeutet, dass die Datei in statt in aufgelöst wird. favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon Um dies zu beheben, können wir ein Pfadpräfix einrichten, indem wir in die Datei einfügen: basePath next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; In meinem Fall ist es , da mein Projekt heißt. Denken Sie daran, das ( . /2048-in-react 2048-in-react / ) am Anfang des Projektverzeichnisses einzufügen Schritt 4 – Github-Aktionen erstellen Next.js erstellt Bereitstellungsartefakte, die auf GitHub-Seiten veröffentlicht werden können. Jetzt ist es an der Zeit, Github Actions einzurichten, um sie zu veröffentlichen. Ich habe die Bereitstellung in zwei separate Aktionen unterteilt, um die Wiederverwendbarkeit zu fördern: Die Aktion richtet Node.js ein und installiert alle Abhängigkeiten. Wenn ich eine eigenständige Aktion für das Node.js-Setup habe, kann ich sie für andere Pipelines wiederverwenden. Ich habe zum Beispiel Pipelines, die laufen Und . Wahrscheinlich möchten Sie auch mehr als eine Aktion haben. setup-node Code-Linter Tests Die erstellt Next.js-Artefakte und veröffentlicht sie jedes Mal auf GitHub-Seiten, wenn wir Code in den einbinden. publish main Lassen Sie mich zunächst die Aktion erläutern. Hier ist der Code: setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : Erstellen Sie diese Datei im Verzeichnis in Ihrem Projekt. Stellen Sie sicher, dass Sie es nennen. Wichtig .github/workflows/setup-node action.yml Was macht dieses Snippet? Es wird eine Aktion erstellt. Mit der können Sie mehrere Workflow-Schritte in einer einzigen Aktion bündeln. Wenn es nicht klar ist, werden Sie es verstehen, sobald wir mit der zweiten Aktion beginnen. composite composite Es erstellt eine neue Build-Umgebung mit Node.js 20 und installiert Projektabhängigkeiten. Dies sind die wichtigsten Teile der -Aktion. Kommen wir nun zur : setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 Erstellen Sie diese Datei im Verzeichnis in Ihrem Projekt. Sie können die Datei nach Belieben benennen – ich habe meine genannt. .github/workflows publish.yml Was es macht? Diese Aktion wird jedes Mal ausgelöst, wenn der neue Code in den gepusht oder zusammengeführt wird. main Es verwendet die Aktion um die Umgebung einzurichten. Die Aktion, die ich in der vorherigen Aktion erstellt habe. Jetzt wissen Sie, wie Sie Ihre Aktionen in andere Aktionen einbinden. setup-node composite composite Die Aktion besteht aus zwei Phasen: In der ersten Phase wird die Next.js-App erstellt. In der zweiten Phase werden die Artefakte aus der ersten Phase auf GitHub-Seiten hochgeladen. Dies sind die wichtigsten Aspekte der Bereitstellungspipeline. Ich habe die Einrichtung der Berechtigungen und der Parallelität übersprungen, da sie für alle GitHub Pages-Bereitstellungen unverändert bleiben. Jetzt ist die Aktion einsatzbereit. Commit und Push Nachdem Sie Ihre Änderungen festgeschrieben und in den übertragen haben, wird GitHub die Bereitstellung automatisch auf GitHub Pages hochfahren. main Um den Prozess zu überprüfen, navigieren Sie zur Registerkarte “ (1 im Bild unten) und wählen Sie die Aktion aus dem Menü auf der linken Seite (2) aus Auf dem Bildschirm werden alle Ihre Bereitstellungen angezeigt (sie werden als bezeichnet). „Aktionen „Publish-to-github-pages“ . Workflows Wählen Sie nun den ersten dieser Workflows aus und Sie sehen eine zweistufige Bereitstellung. In der finden Sie auf GitHub Pages einen Link zu Ihrer Website. Bereitstellungsphase Abschluss Github Pages reicht nicht aus, um Websites mit Millionen Aufrufen zu hosten. Aber es ist eine perfekte Wahl, um Ihr Portfolio oder eine Website für Ihr Open-Source-Projekt zu hosten. Es gibt viele kostenlose Optionen zum Hosten unserer Websites, wie z. B. Vercel, aber ich wollte Ihnen eine Alternative zeigen. GitHub Pages wurde für Entwickler entwickelt und ich denke, jeder Entwickler sollte damit vertraut sein. Wenn Ihnen dieser Artikel geholfen hat, teilen Sie ihn bitte in Ihren sozialen Medien. Und wo stellen Sie Ihre Anwendung bereit? Ist es immer Vercel? Lernen Sie React 18 und Next.js Du fühlst dich mit React oder Next.js nicht stark? Nehmen Sie an meinem Online-Kurs auf Udemy teil! Ich helfe Ihnen beim Einstieg in React, indem ich ein voll funktionsfähiges 2048-Spiel erstelle. Ich glaube, dass das Erstellen von Spielen das Lernen unterhaltsamer macht und Sie Ihren Freunden etwas Cooles zeigen können. 👇👇👇👇 🧑🎓 Machen Sie mit React 18 und Next.js-Kurs auf Udemy – 80 % RABATT nur diese Woche.
