Автоматизируйте все!

Давайте воспользуемся GitHub Actions, чтобы создать базовый конвейер развертывания для сайта Next.js SSG, размещенного на Github Pages.

Для справки, вот репозиторий Github для кода, использованного в этой статье.

Дополнительные чтения

Эта статья будет посвящена настройке GitHub Actions, поэтому я могу упустить технические детали, которые считаю дополнительными. Вот некоторые справочные материалы, если вам интересно:

  • Документы о том, как создать сайт SSG с Next.js. В этой статье AYNTK использует команды next build и next export для создания файлов для статического сайта.
  • Документы о том, как опубликовать статический сайт на GitHub Pages. В этой статье AYNTK выполняет фиксацию и отправку файлов сборки в папку docs в корневом каталоге проекта для развертывания сайта.
  • Определения различных компонентов конвейера действий GitHub.

Большая фотография

Давайте создадим конвейер действий GitHub для автоматизации следующих шагов:

  1. Проверьте репозиторий GitHub
  2. Настроить Node.js
  3. Установите зависимости (или используйте кеш, если нет изменений)
  4. Создайте файлы для статического сайта (или используйте кеш, если нет изменений)
  5. Зависимости кеша и исходные файлы
  6. Зафиксируйте и отправьте файлы сборки в репо

Создать рабочий процесс

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%! 🥰

Подробнее

📫 Давайте подключимся к LinkedIn или Twitter!

Больше контента на plainenglish.io