Автоматизируйте все!
Давайте воспользуемся GitHub Actions, чтобы создать базовый конвейер развертывания для сайта Next.js SSG, размещенного на Github Pages.
Для справки, вот репозиторий Github для кода, использованного в этой статье.
Дополнительные чтения
Эта статья будет посвящена настройке GitHub Actions, поэтому я могу упустить технические детали, которые считаю дополнительными. Вот некоторые справочные материалы, если вам интересно:
- Документы о том, как создать сайт SSG с Next.js. В этой статье AYNTK использует команды
next build
иnext export
для создания файлов для статического сайта. - Документы о том, как опубликовать статический сайт на GitHub Pages. В этой статье AYNTK выполняет фиксацию и отправку файлов сборки в папку
docs
в корневом каталоге проекта для развертывания сайта. - Определения различных компонентов конвейера действий GitHub.
Большая фотография
Давайте создадим конвейер действий GitHub для автоматизации следующих шагов:
- Проверьте репозиторий GitHub
- Настроить Node.js
- Установите зависимости (или используйте кеш, если нет изменений)
- Создайте файлы для статического сайта (или используйте кеш, если нет изменений)
- Зависимости кеша и исходные файлы
- Зафиксируйте и отправьте файлы сборки в репо
Создать рабочий процесс
GitHub Actions использует синтаксис YAML для определения событий, заданий и шагов. Эти файлы YAML хранятся в репозитории кода в каталоге с именем .github/workflows
. Итак, давайте создадим файл YAML для определения рабочего процесса развертывания.
Аннотации комментариев к коду выше:
[A] Отправка фиксации в репозиторий GitHub - это событие, которое запускает рабочий процесс.
[B] Настраивает задание для запуска на новой виртуальной машине Ubuntu Linux. машина, размещенная на GitHub (также известном как Runner).
[C] Действие для проверки репо и загрузки кода в Runner.
[D ] Действие по установке Node.js в Runner, позволяющее запускать npm
команды.
Затем добавьте шаг для установки зависимостей проекта в Runner, которые включают пакет next
.
[E] Ах, наш старый друг.
Теперь, когда зависимости установлены, давайте добавим шаг для создания статических файлов.
[F] Что, черт возьми, build
спросите вы? Это сценарий, определенный в package.json
, который запускает:
next build && next export -o docs
См. Документацию. TL; DR, это команды Next.js для создания файлов для сайта SSG и их экспорта в папку docs
.
Наконец, добавьте шаг для фиксации и отправьте обновления в папку docs
в репо.
[G] Это действие зафиксирует изменения, сделанные в среде Runner, и отправит фиксацию в репозиторий GitHub. Сообщение фиксации по умолчанию будет Автоматическая публикация.
Теперь при внесении изменений в репозиторий мой сайт SSG будет автоматически развернут на страницах GitHub. 🎉
Теперь я могу смотреть на конвейер на вкладке Действия моего репозитория GitHub.
Кеширование
Я понял, что задание запускается заново npm install
каждый раз, когда я нажимаю коммит. Итак, давайте введем кеширование, чтобы новая установка происходила только при package-lock.json
изменениях.
[H] Это действие кэширует папку node_modules
во всех сборках и заставляет Runner использовать кеш, пока package-lock.json
не изменяется.
Кроме того, заметил, что next build
выдает следующее предупреждение об отсутствии кеширования.
warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
Предупреждение связывает вас с ответом, чтобы исправить это. Любить это.
[I] Next.js хранит свой кеш в каталоге .next/cache
. Это сохранит кеш во всех сборках для более быстрой перестройки приложений. Например, если я обновил только свою кодовую базу, но не зависимости, это позволит избежать повторного объединения зависимостей.
Время развертывания уменьшено примерно на 30%! 🥰
Подробнее
- Развернуть React SSR в продакшене
- Введение в рендеринг на стороне сервера React
- Отделение данных от пользовательского интерфейса с помощью ловушек React
📫 Давайте подключимся к LinkedIn или Twitter!
Больше контента на plainenglish.io