Розгортаємо застосунок React на GitHub Pages
Тут я покажу вам, як розгорнути застосунок React на GitHub Pages за допомогою GitHub Actions. GitHub Pages — це сервіс хостингу статичних сайтів, який бере HTML, CSS та JavaScript файли безпосередньо з репозиторію на GitHub та робить їх доступними у вигляді вебсайту. GitHub Actions — це сервіс CI/CD, що дозволяє автоматизувати робочий процес публікації вашого статичного сайту на GitHub Pages.
Створення застосунку React
Спочатку створіть новий застосунок React за допомогою Create React App.
npx create-react-app react-app --template typescript
cd react-app
Ваш git-репозиторій має бути ініціалізований автоматично.
Створення репозиторію на GitHub
Перебуваючи у теці з новоствореним застосунком та створіть новий репозиторій на GitHub.
gh repo create
Налаштування репозиторію
Перейдіть до налаштувань репозиторію та увімкніть GitHub Pages. Оберіть джерело для Build and deployment — GitHub Actions.
Відкрийте меню Actions/General, прокрутіть до розділу Workflow permissions та надайте дозволи на читання та запис для робочого процесу GitHub Actions.
Додавання робочого процесу GitHub Actions
Створіть нову теку .github/workflows
у корені вашого репозиторію.
mkdir -p .github/workflows
Створіть новий файл з назвою (наприклад) deploy.yml
у теці .github/workflows
.
Додайте назву вашого робочого процесу.
name: Deploy React App
Це дозволить вам вирізняти цей робочий процес серед інших.
Додайте наступний вміст до файлу deploy.yml
.
…
on:
push:
branches: [main]
pull_request:
types:
- closed
branches: [main]
workflow_dispatch:
…
Цей розділ описує події, що запускають робочий процес. У цьому випадку робочий процес буде запущений при безпосередньому внесенні змін в гілку main за допомогою git push
, при виконанні pull request та при ручному запуску робочого процесу.
Додайте опис завдань до робочого процесу.
…
jobs:
build:
runs-on: ubuntu-latest
…
Наше завдання з ім’ям build
буде виконуватись на останній версії Ubuntu.
Додайте кроки до завдання.
…
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
…
Перший крок витягує код з репозиторію. Другий крок налаштовує Node.js.
Додайте більше кроків до завдання.
…
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
…
Третій крок встановлює залежності, а четвертий крок збирає застосунок React.
Додайте останні кроки до завдання.
…
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
name: 'github-pages'
path: build
…
Тут ми використовуємо дію upload-pages-artifact
для завантаження теки збірки як артефакту для подальшого розгортання.
Створіть кроки розгортання.
deploy:
if: github.event.pull_request.merged == true || github.event_name == 'push' || github.event_name == 'workflow_dispatch'
needs: build
permissions:
pages: write
id-token: write
contents: read
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
Завдання розгортання буде виконуватись тільки якщо pull request обʼєднано з основною гілкою або робочий процес запускається через git push
або вручну. Воно потребує завершення завдання build
. Завдання розгортання має дозволи на запис до сторінок, запис токена id та читання вмісту. Ім’я середовища — github-pages
, а URL — покаже вам адресу після завершення кроку розгортання.
Додайте кроки до завдання розгортання.
…
runs-on: ubuntu-latest
steps:
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
artifact_name: 'github-pages'
Перший крок налаштовує Pages. Другий крок розгортає теку збірки на GitHub Pages за допомогою deploy-pages
. Ми використовуємо артефакт попередньо створений на етапі збірки (build
) та GitHub token для автентифікації розгортання.
Тепер зробіть commit змін та надішліть їх у репозиторій.
git add .
git commit -m "Add GitHub Actions workflow"
git push
Налаштування package.json
Відкрийте файл package.json
і додайте параметр homepage
. Ви можете встановити його значення як .
або надати URL вашого репо для GitHub Pages ("homepage": "https://andygol.github.io/react-app/").
{
"name": "react-app",
"version": "0.1.0",
"private": true,
+ "homepage": ".",
"dependencies": {
…
Розгортання застосунку React
Будь-які зміни, які ви вносите до гілки main
, запустять робочий процес GitHub Actions. Робочий процес збере застосунок React і розгорне його на GitHub Pages.
https://andygol.co.ua/react-app/
Ось і все! Ви успішно розгорнули застосунок React на GitHub Pages за допомогою GitHub Actions.
PS. Якщо ви хочете побачити повний файл робочого процесу, перегляньте репозиторій на GitHub.