Hallo, willkommen! Wir sind Chihiro und Justin, ein Software-Ingenieurpaar, das gerne gemeinsam Anwendungen erstellt und lernt. Chihiro ist Frontend-Spezialist und Justin ist KI-Experte.

In diesem Artikel beantwortet Chihiro Justins Fragen zum Erstellen von React-Anwendungen mit einer CICD-Pipeline mit einer detaillierten Schritt-für-Schritt-Anleitung.

Justin: Ich muss einige React-/TypeScript-Anwendungen bereitstellen. Ich möchte eine CICD-Pipeline verwenden. Was empfehlen Sie?

Chihiro: Es gibt viele Möglichkeiten, das zu erreichen, aber es hat mir Spaß gemacht, Vite zum Einrichten meiner React-Anwendung zu verwenden, anstatt Webpack oder CRA (Create React App) zu verwenden, weil es viel schneller geht, mein Projekt einzurichten.

Wenn Sie zum Erstellen einer CICD-Pipeline nur statische Websites erstellen, empfehle ich die Verwendung von GitHub Actions und GitHub Pages. Es ist für standardmäßige, von GitHub gehostete Läufer in öffentlichen Repositories und für selbstgehostete Läufer kostenlos. (mehr dazu hier )

Justin: Das klingt großartig. Kannst du mir erklären, wie ich anfänge?

Chihiro: Klar! Bereiten Sie Ihren VS-Code (oder Code-Editor Ihrer Wahl) und Ihr Terminal vor!

Implementierungsschritte

1) Richten Sie die Web-App lokal ein

1. Navigieren Sie zu dem Verzeichnis, in dem sich das Repo-Verzeichnis befinden soll.
2. Erstellen Sie Vite-to-GH-Seiten (oder Ihren Projektnamen) mit npm create vite@latest( weitere Informationen finden Sie in den Vite-Dokumenten ).
3. Verwenden Sie den Namen „vite-to-gh-pages“, wählen Sie „Reagieren“ und dann „Typoskript“.
4. In Ordner verschiebencd vite-to-gh-pages
5. Installieren Sie mit npm iodernpm install
6. Um die Anwendung zu testen und zu sehen, führen Sie sie aus npm run devund zeigen Sie sie in Ihrem Browser an

1. Laufennpm install gh-pages --save-dev
2. Installieren Sie mitnpm i
3. Erstellen Sie ein GitHub-Repo und verknüpfen Sie es mit unserem lokalen Repo:

git init
git add .
git commit -m "first-commit"
git branch -M main
git remote add origin https://github.com/username/vite-to-gh-pages.git
git push -u origin main

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/vite-to-gh-pages/',
  plugins: [react()],
})

6. Fügen Sie /distdurch Ausführen einen Ordner zu Ihrem Repo hinzugit add dist -f

7. Laufengit commit -m "Adding dist"

8. Laufengit subtree push --prefix dist origin gh-pages

9. Navigieren Sie zu Ihrer GH Pages-Live-Seite, um zu überprüfen, ob Ihre Website live ist. (Gehen Sie zu den Einstellungen Ihres Repos und suchen Sie im linken Seitenbereich nach „Seiten“).

3) Richten Sie GitHub-Aktionen ein, um Ihre Site beim Commit in den Hauptzweig neu zu erstellen

1. Damit die GitHub-Aktion unseren Build aktualisieren kann, gehen Sie zu Ihren Repo-Einstellungen > Aktionen > Allgemein > Workflow-Berechtigungen, wählen Sie sie aus Read and write permissionsund klicken Sie auf „Speichern“. Unsere Änderung ermöglicht es der Aktion, den Build im gh-pages-Zweig bei jedem Push in den Hauptzweig zu aktualisieren.

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - run: npm install
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

4. Laufengit add .

5. Laufengit commit -m "add GH Action"

6. Laufengit push

7. Öffnen Sie Ihre GitHub Pages-Webanwendung, um zu überprüfen, ob Ihre Änderung vorgenommen wurde. Sie können den Fortschritt überwachen, indem Sie in der oberen Navigation auf die Registerkarte „Aktionen“ klicken.

*Bewundern und feiern Sie Ihre neu bereitgestellte App!

Chihiro: Wie hat das für Sie geklappt?

Justin: Es war sehr einfach, die Site mithilfe einer CICD-Pipeline bereitzustellen und ständig zu aktualisieren! Jetzt kann ich mehr Zeit damit verbringen, echte Probleme zu lösen. Danke schön!

4) Ressourcen

• Die bereitgestellte Seite finden Sie hier
• vite-to-gh-pages-Repo auf GitHub

• Justin Snider // GitHub: @sniderjustin LinkedIn: @sniderj
• Chihiro Snider// GitHub: @cheesehero112 LinkedIn: @chihiro-snider

E-Mail: [email protected]