Cześć witaj! Nazywamy się Chihiro i Justin, para inżynierów oprogramowania, która lubi tworzyć aplikacje i uczyć się razem. Chihiro jest specjalistą od frontendu, a Justin ekspertem od sztucznej inteligencji.

W tym artykule Chihiro odpowie na pytania Justina dotyczące tworzenia aplikacji React za pomocą potoku CICD, przedstawiając szczegółowy przewodnik krok po kroku.

Justin: Muszę wdrożyć sporo aplikacji React/TypeScript. Chciałbym użyć potoku CICD. Co warto zamówić?

Chihiro: Istnieje wiele sposobów, aby to osiągnąć, ale lubię używać Vite do konfigurowania mojej aplikacji React, zamiast używać Webpacka lub CRA (Create React App), ponieważ konfiguracja mojego projektu jest o wiele szybsza.

Jeśli chodzi o tworzenie potoku CICD, jeśli tworzysz tylko witryny statyczne, polecam korzystanie z akcji GitHub i stron GitHub. Jest bezpłatny dla standardowych biegaczy hostowanych na GitHub w publicznych repozytoriach oraz dla biegaczy hostowanych samodzielnie. (więcej o tym tutaj )

Justin: To brzmi świetnie, czy możesz mi pokazać, jak zacząć?

Chihiro: Jasne! Przygotuj swój VS Code (lub wybrany edytor kodu) i terminal!

Kroki wdrażania

1) Lokalnie skonfiguruj aplikację internetową

1. Przejdź do katalogu, w którym ma się znajdować katalog repo.
2. Utwórz strony vite-to-gh (lub nazwę swojego projektu) za pomocą npm create vite@latest(przeczytaj dokumenty Vite , aby uzyskać więcej informacji)
3. Użyj nazwy vite-to-gh-pages, wybierz React i wybierz Typescript.
4. Przenieś do folderucd vite-to-gh-pages
5. Zainstaluj za pomocą npm ilubnpm install
6. Aby przetestować i zobaczyć aplikację, uruchom npm run devją i wyświetl w przeglądarce

1. Uruchomićnpm install gh-pages --save-dev
2. Zainstaluj za pomocąnpm i
3. Utwórz repozytorium GitHub i połącz się z naszym lokalnym repozytorium:

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. Dodaj /distfolder do repozytorium, uruchamiającgit add dist -f

7. Biegnijgit commit -m "Adding dist"

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

9. Przejdź do aktywnej strony GH Pages, aby sprawdzić, czy witryna jest aktywna. (Przejdź do ustawień swojego repozytorium i znajdź „Strony” na lewym panelu bocznym)

3) Skonfiguruj akcje GitHub, aby odbudować witrynę po zatwierdzeniu do głównej gałęzi

1. Aby umożliwić GitHubowi aktualizację naszej kompilacji, przejdź do swojego repozytorium Ustawienia> Akcje> Ogólne> Uprawnienia przepływu pracy, aby wybrać Read and write permissionsi kliknij „Zapisz”. Nasza zmiana pozwoli akcji aktualizować build w gałęzi gh-pages przy każdym pushu do głównej gałęzi.

# 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. Biegnijgit add .

5. Biegnijgit commit -m "add GH Action"

6. Biegnijgit push

7. Otwórz aplikację internetową GitHub Pages, aby sprawdzić, czy zmiana została wprowadzona. Możesz monitorować postęp, klikając zakładkę „Działania” w górnym panelu nawigacyjnym.

* Podziwiaj i świętuj swoją nowo wdrożoną aplikację!

Chihiro: Jak ci to wyszło?

Justin: Bardzo łatwo było wdrożyć i aktualizować witrynę za pomocą potoku CICD! Teraz mogę poświęcić więcej czasu na rozwiązywanie rzeczywistych problemów. Dziękuję!

4) Zasoby

• Zobacz wdrożoną stronę tutaj
• repozytorium vite-to-gh-pages na GitHub

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

e-mail: [email protected]