Вот краткое руководство по развертыванию 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 ""
- Следуя разделу Начало работы этого действия gh-pages, мы добавляем новый ключ развертывания с доступом для записи ** в раздел
/repo/settings/keys
, вставляя наш открытый ключ из файла.pub
. .
- Нам нужно сделать закрытый ключ доступным для нашего действия 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
он выполняет следующие задачи:
- Получите код из главного push-уведомления
- Установить Node v12
- Беги
npm install
- Запустите
npm build
, который создаст папкуbuild
. - Разверните папку
./build
на gh-страницах, используя ключ развертывания в переменнойsecrets.ACTIONS_DEPLOY_KEY
.
Чтобы протестировать процесс развертывания, отправьте этот файл рабочего процесса в master.
Первоначально опубликовано на https://cmichel.io/create-react-app-github-actions/