Рубрики
Uncategorized

Развернуть приложение NextJS на страницы GitHub, используя действия GitHub

Страницы GitHub позволяют нам размещать статические сайты из репозитория. NextJs можно использовать как статический сайт Gen … Tagged with React, NextJs, DevOps, GitHub.

Страницы GitHub позволяют нам размещать статические сайты из репозитория. NextJS можно использовать в качестве статического генератора сайтов. Если мы комбинируем эти две вещи и добавим некоторое действие GitHub, мы получим веб-сайт на основе React, который легко поддерживать, тестировать и хост.

Подготовьте приложение NextJS

Чтобы сгенерировать статический выход, нам нужно добавить Следующий экспорт Команда, которая создает статическую версию приложения.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
+   "export": "next export",
    "start": "next start"
  },

Согласно NextJS документация есть несколько предостережений, которые мы должны встретить (например, мы не можем использовать getserversideprops из -за статического рендеринга без сервера) для успешного экспорта. Если вы используете по умолчанию Next/Image Загрузчик, вы должны добавить по умолчанию загрузчик Анкет

Если наше приложение NextJS готово, мы должны попробовать NPM Run Build && NPM Run Export командование Вывод Экспорт успешно. означает, что приложение готово к развертыванию.

Если вы хотите использовать пользовательский домен, просто добавьте файл cname в public каталог.

GitHub Page

Чтобы разместить веб -сайт на страницах GitHub, мы должны активировать его в настройках репозитория. Мы можем выбрать пользовательский домен (в этом случае вы должны добавить файл cname , который содержит адрес и изменять DNS). Вы также можете проверить Применение https вариант.

Каждый .dev Домен находится в списке предварительной загрузки HSTS, который делает HTTPS, необходимые для всех соединений. Так что, если вы хотите использовать .dev Домен вы должны проверить Применение https

Действие GitHub

GitHub предоставляет 2000 действий минут/месяц для бесплатных счетов. Этого более чем достаточно, чтобы проверить, как это работает, и использовать его в некоторых побочных проектах.

Давайте перейдем к созданию действия GitHub. Введите свой проект на GitHub, затем перейдите к Действия вкладка и выберите Node.js GitHub Действия (Имя действия зависит от вас).

Я использовал следующий сценарий:

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: GitHub Pages deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: "14.x"

      - name: Installing my packages
        run: npm ci

      - name: Build my App
        run: npm run build && npm run export && touch ./out/.nojekyll

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: out # The folder the action should deploy.

Я думаю, что это YML Файл прост для понимания. Некоторые грубые объяснения:

  • Действие будет вызвано на каждом толчке к Главный ответвляться,
  • Ubuntu будет использоваться в качестве ОС (вы также можете выбрать Windows или MacOS),
  • В скрипте первого шага будет оформлять наш код из репозитория и использовать Nodejs в данной версии,
  • npm ci используется для установки пакетов вместо NPM Установка Потому что это быстрее, чем то, о чем мы заботимся из -за ограничений действий GitHub,

  • Шаг назван Создайте мое приложение является главным:

    • NPM Run Build && NPM Run Export приложение сборки и экспорта,
    • запустить: touch ./out/.nojekyll потому что _next Папка по умолчанию не обслуживается GitHub из -за обработки Jekyll, .nojekyll Файл предотвращает это,
  • github-pages-deploy-action используется, чтобы подтолкнуть статический экспортируемый сайт в GH-Pages ответвляться.

npm ci используется в действии, требуется Package-lock.json Это не создано пряжа . Есть несколько способов справиться с этим (например, установка пряжи-Frozen-Lockfile ), но я решил просто использовать npm вместо пряжа .

Резюме

Теперь мы можем обслуживать статический веб -сайт на бесплатном хостинге с автоматическим развертыванием на push to Главный Анкет HTTPS предоставляется страницами GitHub. Единственная стоимость — это пользовательский домен (если мы хотим). Другие статические генераторы сайтов, такие как Гэтсби , Jekyll , или Хьюго (Почти на каждом веб -сайте вы можете прочитать, что их структура является самой быстрой) можно использовать с страницами и действиями GitHub почти так же, как и NextJS.

Проверьте Репозиторий С примером приложения приложения NextJS, созданного с описанным GitHub Action это размещено правильно Здесь Анкет

Первоначально опубликовано в https://lukaszwozniak.dev 18 апреля 2021 года.

Оригинал: «https://dev.to/lukaszwozniak/deploy-nextjs-app-to-github-pages-using-github-actions-27f3»

Читайте ещё по теме: