Вот краткое руководство по развертыванию CRA (create-response-app) на страницах GitHub с помощью действий GitHub. Мы создадим рабочий процесс GitHub Action, который запускает команду сборки, а затем развертывает каталог build, помещая его в ветку gh-pages.

Настраивать

1. Префиксные URL-адреса

URL-адреса страниц GitHub выглядят как user.github.io/repo-name, поэтому нам нужно убедиться, что все наши относительные URL-адреса имеют префикс /repo-name. Используя приложение create-response-app, достаточно добавить "homepage": "/repo-name", в package.json. Об остальном автоматически позаботится команда build.

2. Добавьте ключ развертывания.

Развертывание на страницах GitHub означает перемещение каталога build в ветку gh-pages. В настоящее время push-уведомления с использованием учетных данных GitHub Actions по умолчанию не запускают перестройку страниц GitHub. Это означает, что нам нужно сначала настроить ключ развертывания для репозитория, который может использоваться действием GitHub. Я использую один и тот же ключ развертывания для действий развертывания gh-страниц во всех моих репозиториях. Вы можете создать новую пару открытого / закрытого ключей SSH с помощью этой команды:

cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages-actions -N ""
  1. Следуя разделу Начало работы этого действия gh-pages, мы добавляем новый ключ развертывания с доступом для записи ** в раздел /repo/settings/keys, вставляя наш открытый ключ из файла .pub. .

  1. Нам нужно сделать закрытый ключ доступным для нашего действия GitHub. Для этого добавьте соответствующий секретный ключ в раздел repo/settings/secrets. Обязательно назовите его ACTIONS_DEPLOY_KEY.

Действие GitHub

Теперь осталось только создать новый .github/workflows/deploy.yml файл рабочего процесса и вставить следующий код YAML действия GitHub:

name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build

При каждом нажатии на ветку master он выполняет следующие задачи:

  1. Получите код из главного push-уведомления
  2. Установить Node v12
  3. Беги npm install
  4. Запустите npm build, который создаст папку build.
  5. Разверните папку ./build на gh-страницах, используя ключ развертывания в переменной secrets.ACTIONS_DEPLOY_KEY.

Чтобы протестировать процесс развертывания, отправьте этот файл рабочего процесса в master.

Первоначально опубликовано на https://cmichel.io/create-react-app-github-actions/