Вам следует опубликовать свое приложение Next.js на страницах GitHub.

Недавно я обновил свою версию игры 2048 с открытым исходным кодом и решил перенести ее на Next.js и React 18. Существующая игра была опубликована на страницах GitHub без какого-либо личного домена. Я подумывал о развертывании в Верселе, но он потеряет органический трафик от Google, который накапливался за последние 3 года. Это означает, что мне нужно было поэкспериментировать с развертыванием на страницах GitHub, и сегодня я поделюсь тем, что узнал.

Если вы хотите увидеть конечный результат, прежде чем читать всю статью, вы можете проверьте это здесь .

Краткое введение

Я буду использовать две функции GitHub — GitHub Actions и GitHub Pages. Если вы о них не слышали, позвольте мне быстро объяснить:

Действия GitHub — это небольшие рабочие процессы, которые могут выполнять задачи в ваших проектах. Это похоже на помощника, который автоматически делает то, что вы ему говорите. Вы можете использовать Действия для запуска тестов, проверок качества или для создания приложения. В моем случае я использовал эти рабочие процессы для автоматизации конвейера развертывания.

Что такое страницы GitHub ? Думайте о них как о варианте веб-хостинга для разработчиков и проектов с открытым исходным кодом. Вы можете использовать GitHub Pages, чтобы делиться своими портфолио, размещать веб-сайты своих проектов с открытым исходным кодом или просто публиковать свои любимые проекты, такие как мой.

Теперь давайте начнем.

Шаг 1. Активируйте страницы GitHub для вашего репозитория

Чтобы опубликовать наше приложение Next.js, мне нужно было активировать GitHub Pages для репозитория проекта. Вы можете найти его на вкладке «Настройки» (1 на изображении ниже), затем выбрать «Страницы» в меню слева (2) и найти раскрывающееся меню, которое позволяет нам указать источник развертывания (3).

Теперь вам нужно будет изменить источник развертывания на GitHub Actions .

Отныне у вашего проекта будет отдельная страница. Вам нужно только публиковать там контент.

Шаг 2. Настройте процесс сборки Next.js

Перед развертыванием приложения Next.js важно изменить выходные данные сборки. По умолчанию Next.js использует Node.js для запуска приложения, и это несовместимо с GitHub Pages.

GitHub Pages предназначен для размещения статических файлов, а это означает, что мы можем публиковать там только HTML, CSS, JavaScript (и другие статические файлы). Поэтому нам нужно включить генерацию статических страниц в Next.js.

Для этого измените режим вывода на export внутри next.config.js :

 /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig;

Теперь после запуска next build Next.js создаст папку out , содержащую статические ресурсы для вашего приложения. На следующих шагах мы возьмем этот каталог и загрузим его на GitHub Pages.

Шаг 3 – Исправьте недостающие изображения

Страницы публикуются по подпути домена и принимают имя проекта в качестве подпути. Сбивает с толку? Давайте в качестве примера взглянем на URL-адрес моей игры 2048:

 https://mateuszsokola.github.io/2048-in-react/

Github создал для моего пользователя выделенный поддомен под названием mateuszsokola (мое имя пользователя) . Но проект публикуется по подпути, в моем случае это /2048-in-react . К сожалению, это приведет к проблемам с отсутствующими изображениями и стилями.

По умолчанию Next.js отображает все статические ресурсы в домене. Это означает, что файл favicon.ico будет разрешен в mateuszsokola.github.io/favicon.ico вместо mateuszsokola.github.io/2048-in-react/favicon.icon .

Чтобы исправить это, мы можем установить префикс пути, добавив basePath в файл next.config.js :

 /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig;

В моем случае это /2048-in-react поскольку мой проект называется 2048-in-react .
Не забудьте указать ( / ) в начале каталога проекта.

Шаг 4 – Создайте действия Github

Next.js создает артефакты развертывания, которые можно публиковать на страницах GitHub. Теперь пришло время настроить Github Actions для их публикации. Я решил разделить развертывание на два отдельных действия, чтобы обеспечить возможность повторного использования:

Действие setup-node настроит Node.js и установит все зависимости. Наличие отдельного действия для настройки Node.js позволит мне повторно использовать его для других конвейеров. Например, у меня есть конвейеры, которые работают линтер кода и тесты . Вероятно, вы также захотите иметь более одного действия.

Действие publish будет создавать артефакты Next.js и публиковать их на страницах GitHub каждый раз, когда мы объединяем код с main веткой.

Позвольте мне начать с объяснения действия setup-node . Вот код:

 # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci

Важно ! Создайте этот файл в каталоге .github/workflows/setup-node вашего проекта. Обязательно назовите его action.yml .

Что делает этот фрагмент?

1. Это создает composite действие. composite действие позволяет объединить несколько шагов рабочего процесса в одно действие. Если что-то неясно, вы поймете это, когда мы перейдем ко второму действию.

2. Он создает новую среду сборки с использованием Node.js 20 и устанавливает зависимости проекта.

Это наиболее важные части действия setup-node . Теперь перейдем к действию publish :

 # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main 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 ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4

Создайте этот файл в каталоге .github/workflows вашего проекта. Вы можете назвать файл как угодно — я назвал свой publish.yml .

Что оно делает?

1. Это действие запускается каждый раз, когда новый код добавляется или объединяется с main веткой.

2. Он использует действие setup-node для настройки среды. composite действие, которое я создал в предыдущем действии. Теперь вы знаете, как включать composite действия в другие действия.

3. Действие состоит из двух этапов: на первом этапе создается приложение Next.js. На втором этапе артефакты первого этапа загружаются на страницы GitHub.

Это наиболее важные аспекты конвейера развертывания. Я пропустил настройку разрешений и параллелизма, поскольку они остаются неизменными для всех развертываний страниц GitHub.

Теперь действие готово к использованию.

Зафиксируйте и нажмите

После фиксации и отправки изменений в main ветку GitHub автоматически запустит развертывание на страницах GitHub.

Чтобы проверить процесс, перейдите на вкладку «Действия» (1 на изображении ниже) и выберите действие публикации на github-страницах в меню слева (2) . Вы увидите на экране все свои развертывания (они называются рабочими процессами ).

Теперь выберите первый из этих рабочих процессов, и вы увидите двухэтапное развертывание. На этапе развертывания вы можете найти ссылку на свой веб-сайт на страницах GitHub.

Заключение

Github Pages недостаточно для размещения веб-сайтов с миллионами просмотров. Но это идеальный выбор для размещения вашего портфолио или веб-сайта вашего проекта с открытым исходным кодом.

Существует множество бесплатных вариантов размещения наших веб-сайтов, таких как Vercel, но я хотел показать вам альтернативу. GitHub Pages создан для разработчиков, и я думаю, что каждый разработчик должен быть с ним знаком.

Если эта статья вам помогла, поделитесь ею в социальных сетях.

И где вы развертываете свое приложение? Всегда ли это Версель?

Изучите React 18 и Next.js

Вы не чувствуете себя уверенно с React или Next.js? Присоединяйтесь к моему онлайн-курсу по Udemy! Я помогу вам начать работу с React, создав полнофункциональную игру 2048. Я верю, что создание игр делает обучение более увлекательным, и у вас будет что показать друзьям.

👇👇👇👇

🧑‍🎓 Присоединяйтесь Курс по React 18 и Next.js на Udemy – СКИДКА 80% только на этой неделе.