Использование GitHub Pages

Если репозиторий вашего проекта хостится на GitHub, то для разворачивания своих веб-фронтендов очень удобно использовать механизм, предостявляемый GitHub.

Здесь рассмотрю вариант, когда вы хотите использовать свой поддомен и фронтенд у вас не просто файл, а его нужно собирать. В данном случае будем собирать Vite.

Настройка GitHub Pages

Предварительно следует верифицировать ваш поддомен. Для этого в настройках своего профиля во вкладке Pages добавьте поддомен, например subdmn.example.ru. GitHub вам выдаст две строки, которые следует добавить в управление зоной DNS вашего провайдера домена. Тип записи должен быть TXT.

Кроме того следует добавить CNAME запись, где Subdomain - subdmn (или другое имя поддомена), а Canonical name - username.github.io. (username следует заменить своим логином на GitHub).

После этого придется подождать до 24 часов для того, чтобы DNS запись разошлась по сервисам и дошла до используемого GitHub-ом. Время зависит от вашего провайдера, у моего прошло всего несколько минут. И только после этого можно жать кнопку Verify в Pages / Add a verified domain.

Если домен верифицировался, то можно продолжать. Если нет - подождите еще или проверьте правильность TXT записи.

После верификации поддомена в настройках проекта Settings заходим во вкладку Pages. В ней в разделе Build and deployment:

• Source выставляем в GitHub Actions
• Custom domain заполняем именем вашего поддомена, в нашем случае примера - subdmn.example.ru

Если не выставлена Enforce HTTPS, а домен DNS check successful, то следует её выставить, так как это добавит к вашему домену сертификат безопасности.

Автоматическая сборка GitHub Actions

В папку .github/workflows репозитория следует добавить YAML файл конфигурации CI GitHub-а, например такого содержания:

name: Deploy Vite with GitHub Pages

on:
  push:
    branches: ["master"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.18.0'
      - name: Install dependencies
        run: npm i
        working-directory: ./example
      - name: Build project
        run: npx vite build
        working-directory: ./example
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '../www'

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Конечно же, у вас могут быть другие значения, но основное для моего варианта было:

• в шаге Setup Node.js указание своей версии ноды в node-version
• в шагах Install dependencies и Build project указание другой рабочей директории working-directory, потому что собирать требовалось пример, а не сам модуль
• в шаге Upload artifact указание path на папку выше репозитория (настройка в Vite), потому что я никогда не собираю в репозиторий (чтобы потом не раздувать файл .gitignore), а собираю на папку выше и репозиторий остается чистым и шелковистым.

Настройка Vite для сборки у меня указана:

export default defineConfig({
    //...
    build: {
        //...
        outDir: '../../www'
        //...
    },
    //...
})

Именно поэтому на шаге Upload artifact именно такой путь.