Недавно я обновил свою версию игры 2048 с открытым исходным кодом и решил перенести ее на Next.js и React 18. Существующая игра была опубликована на страницах GitHub без какого-либо личного домена. Я подумывал о развертывании в Верселе, но он потеряет органический трафик от Google, который накапливался за последние 3 года. Это означает, что мне нужно было поэкспериментировать с развертыванием на страницах GitHub, и сегодня я поделюсь тем, что узнал. Если вы хотите увидеть конечный результат, прежде чем читать всю статью, вы можете . проверьте это здесь Краткое введение Я буду использовать две функции GitHub — GitHub Actions и GitHub Pages. Если вы о них не слышали, позвольте мне быстро объяснить: — это небольшие рабочие процессы, которые могут выполнять задачи в ваших проектах. Это похоже на помощника, который автоматически делает то, что вы ему говорите. Вы можете использовать Действия для запуска тестов, проверок качества или для создания приложения. В моем случае я использовал эти рабочие процессы для автоматизации конвейера развертывания. Действия GitHub Что такое ? Думайте о них как о варианте веб-хостинга для разработчиков и проектов с открытым исходным кодом. Вы можете использовать GitHub Pages, чтобы делиться своими портфолио, размещать веб-сайты своих проектов с открытым исходным кодом или просто публиковать свои любимые проекты, такие как мой. страницы GitHub Теперь давайте начнем. Шаг 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.js создаст папку , содержащую статические ресурсы для вашего приложения. На следующих шагах мы возьмем этот каталог и загрузим его на GitHub Pages. next build out Шаг 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 для их публикации. Я решил разделить развертывание на два отдельных действия, чтобы обеспечить возможность повторного использования: Действие настроит Node.js и установит все зависимости. Наличие отдельного действия для настройки Node.js позволит мне повторно использовать его для других конвейеров. Например, у меня есть конвейеры, которые работают и . Вероятно, вы также захотите иметь более одного действия. setup-node линтер кода тесты Действие будет создавать артефакты Next.js и публиковать их на страницах GitHub каждый раз, когда мы объединяем код с веткой. publish 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 Что делает этот фрагмент? Это создает действие. действие позволяет объединить несколько шагов рабочего процесса в одно действие. Если что-то неясно, вы поймете это, когда мы перейдем ко второму действию. composite composite Он создает новую среду сборки с использованием 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 Что оно делает? Это действие запускается каждый раз, когда новый код добавляется или объединяется с веткой. main Он использует действие для настройки среды. действие, которое я создал в предыдущем действии. Теперь вы знаете, как включать действия в другие действия. setup-node composite composite Действие состоит из двух этапов: на первом этапе создается приложение Next.js. На втором этапе артефакты первого этапа загружаются на страницы GitHub. Это наиболее важные аспекты конвейера развертывания. Я пропустил настройку разрешений и параллелизма, поскольку они остаются неизменными для всех развертываний страниц GitHub. Теперь действие готово к использованию. Зафиксируйте и нажмите После фиксации и отправки изменений в ветку GitHub автоматически запустит развертывание на страницах GitHub. main Чтобы проверить процесс, перейдите на вкладку (1 на изображении ниже) и выберите действие в меню слева (2) Вы увидите на экране все свои развертывания (они называются ). «Действия» публикации на github-страницах . рабочими процессами Теперь выберите первый из этих рабочих процессов, и вы увидите двухэтапное развертывание. На этапе вы можете найти ссылку на свой веб-сайт на страницах GitHub. развертывания Заключение Github Pages недостаточно для размещения веб-сайтов с миллионами просмотров. Но это идеальный выбор для размещения вашего портфолио или веб-сайта вашего проекта с открытым исходным кодом. Существует множество бесплатных вариантов размещения наших веб-сайтов, таких как Vercel, но я хотел показать вам альтернативу. GitHub Pages создан для разработчиков, и я думаю, что каждый разработчик должен быть с ним знаком. Если эта статья вам помогла, поделитесь ею в социальных сетях. И где вы развертываете свое приложение? Всегда ли это Версель? Изучите React 18 и Next.js Вы не чувствуете себя уверенно с React или Next.js? Присоединяйтесь к моему онлайн-курсу по Udemy! Я помогу вам начать работу с React, создав полнофункциональную игру 2048. Я верю, что создание игр делает обучение более увлекательным, и у вас будет что показать друзьям. 👇👇👇👇 🧑🎓 Присоединяйтесь Курс по React 18 и Next.js на Udemy – СКИДКА 80% только на этой неделе.
