Привет, добропожаловать! Мы Тихиро и Джастин, пара инженеров-программистов, которым нравится создавать приложения и учиться вместе. Чихиро — специалист по интерфейсу, а Джастин — эксперт по искусственному интеллекту.

В этой статье Тихиро ответит на вопросы Джастина о том, как создавать приложения React с конвейером CICD, с подробным пошаговым руководством.

Джастин: Мне нужно развернуть довольно много приложений React/TypeScript. Я хотел бы использовать конвейер CICD. Что вы порекомендуете?

Тихиро: Есть много способов добиться этого, но мне нравится использовать Vite для настройки моего приложения React вместо использования Webpack или CRA (Create React App), потому что это намного быстрее для настройки моего проекта.

Что касается создания конвейера CICD, если вы создаете только статические сайты, я рекомендую использовать действия GitHub и страницы GitHub. Это бесплатно для стандартных исполнителей, размещенных на GitHub в общедоступных репозиториях, и для бегунов, размещаемых самостоятельно. (подробнее об этом здесь )

Джастин: Звучит здорово, не могли бы вы рассказать мне, как начать?

Тихиро: Конечно! Подготовьте свой VS Code (или редактор кода по вашему выбору) и терминал!

Этапы реализации

1) Локальная настройка веб-приложения

1. Перейдите в каталог, в котором вы хотите разместить каталог репо.
2. Создайте страницы vite-to-gh (или название вашего проекта), используя npm create vite@latest( дополнительную информацию см. в документах Vite )
3. Используйте имя vite-to-gh-pages, выберите React и выберите Typescript.
4. Переместить в папкуcd vite-to-gh-pages
5. Установить с помощью npm iилиnpm install
6. Чтобы протестировать и увидеть приложение, запустите npm run devи просмотрите приложение в своем браузере.

1. Бегатьnpm install gh-pages --save-dev
2. Установить с помощьюnpm i
3. Создайте репозиторий GitHub и свяжите его с нашим локальным репозиторием:

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. Добавьте /distпапку в свой репозиторий, запустивgit add dist -f

7. Бегиgit commit -m "Adding dist"

8. Бегиgit subtree push --prefix dist origin gh-pages

9. Перейдите на свою активную страницу GH Pages, чтобы убедиться, что ваш сайт активен. (Перейдите в настройки вашего репозитория и найдите «Страницы» на левой боковой панели)

3) Настройте действия GitHub для восстановления вашего сайта при фиксации в основной ветке.

1. Чтобы разрешить действию GitHub обновить нашу сборку, перейдите в «Настройки репозитория»> «Действия»> «Основные»> «Разрешения рабочего процесса», выберите Read and write permissionsи нажмите «Сохранить». Наше изменение позволит действию обновлять сборку в ветке gh-pages при каждом нажатии на основную ветку.

# 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. Бегиgit add .

5. Бегиgit commit -m "add GH Action"

6. Бегиgit push

7. Откройте веб-приложение GitHub Pages, чтобы убедиться, что изменения были внесены. Вы можете следить за ходом выполнения, щелкнув вкладку «Действия» в верхней части навигации.

* Восхищайтесь и празднуйте свое недавно развернутое приложение!

Тихиро: Как это получилось для вас?

Джастин: Было очень легко развернуть и постоянно обновлять сайт, используя конвейер CICD! Теперь я могу уделять больше времени работе над решением реальных проблем. Спасибо!

4) Ресурсы

• См. развернутую страницу здесь
• репозиторий vite-to-gh-pages на GitHub

• Джастин Снайдер // GitHub: @sniderjustin LinkedIn: @sniderj
• Тихиро Снайдер// GitHub: @cheesehero112 LinkedIn: @chihiro-snider

электронная почта: [email protected]