Публикация next.js приложения на github pages
Содержание
Подготовка
коммит все предыдущего состояния на случай вынужденного отката
Для того чтобы Actions имели доступ к репозиторию нужно подключить ключи шифрования
Настройка репозитория
Создаю ключи
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
Создалось 2 файла с ключами:
- gh-pages - приватный
- gh-pages.pub - публичный
в Репозитории (не профиле)
https://github.com/romankurnovskii/notion-project/settings/keys
Settings → Deploy keys →Add new
из файла gh-pages.pub вставляю текст публичного ключа
Settings → Secrets
Имя: ACTIONS_DEPLOY_KEY
Вставляю приватный ключ из приватного файла gh-pages
https://github.com/romankurnovskii/notion-project/settings/secrets/actions/new
Удаляю ключи файлы чтобы случайно не закоммитить
на гитхабе создаю экшн
Actions → Create
Создание Actions
Выбираю стандартный action (Deploy…)
Редактирую нижнюю часть кода
- name: Build
run: |
npm i
npm run build
npm run export
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./out
npm run export - для создания статических файлов (добавлю позже)
ACTIONS_DEPLOY_KEY - название ключа, что создал ранее
peaceiris/actions-gh-pages@v3 - action из другого популярного репозитория. Ссылаюсь на него.
Итого код:
name: Deploy to Github Pages
on:
push:
branches:
- main
workflow_dispatch:
jobs:
deployment:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: "lts/*"
cache: "npm"
- name: Build
run: |
npm i
npm run build
npm run export
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./out
открыть package.json
найти поле scripts, если нет создать:
{
...,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"deploy": "vercel --prod",
"export": "next export"
},
...
}
Если npm run build && npm run export отработала, то хорошо
Отладка
Не отработала, ошибка:
info - Copying "static build" directory
info - No "exportPathMap" found in "next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Read more: https://nextjs.org/docs/messages/export-image-api
https://nextjs.org/docs/api-reference/next.config.js/exportPathMap
пример кода из документации
module.exports = {
exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
"/": { page: "/" },
"/about": { page: "/about" },
"/p/hello-nextjs": { page: "/post", query: { title: "hello-nextjs" } },
"/p/learn-nextjs": { page: "/post", query: { title: "learn-nextjs" } },
"/p/deploy-nextjs": { page: "/post", query: { title: "deploy-nextjs" } },
};
},
};
мой:
module.exports = withBundleAnalyzer({
images: {
domains: ["pbs.twimg.com"],
},
});
Редактирую **next.config.js**
Добавляю:
const repoName = '/notion-project'
module.exports = {
basePath: repoName,
assetPrefix: repoName,
...
https://github.com/romankurnovskii/notion-project/blob/main/next.config.js
Проблема с установкой зависимости вовремя использованя npm установщика. Буду использовать yarn потому что он пропускает минорные уведомления для меня кажется более стабильным.
Пока разбирался с проблемы запуска экшенов и настройками нашёл новые экшены и без использования ключа. Обновлю код
После того как я редактирую данные нужен они не меняются на сайте. Не меняются потому что гитхаб создаёт статические файлы, то есть нужно заново сделать новый билд. Для меня моментальные изменения не критичны поэтому я поставлю задачу билда повторяться каждый день в 7:00 утра
Добавляю код в yaml файл
on:
push:
branches: [main]
schedule:
- cron: "0 7 * * *" ## every day 7 am
Итоговый результат
https://github.com/romankurnovskii/notion-project/blob/main/.github/workflows/main.yml
lines (32 sloc) 867 Bytes
name: Deploy to GitHub Pages
on:
push:
branches: [main]
schedule:
- cron: "0 7 * * *" ## every day 7 am
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
- name: Get files
uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- name: Install packages
run: yarn install
- name: Build project
run: yarn run build
- name: Export static files
run: yarn run export
- name: Add .nojekyll file
run: touch ./out/.nojekyll
- name: Deploy
uses: JamesIves/github-pages-deploy-action@4.1.1 #third party github actions / ok to use
with:
branch: gh-pages
folder: out
После тестового комитета и билда получаю 2 проблемы:
- Стилей нет, картинки не подгружены
- Ссылки не работают
Next.js ожидает адрес вида https://username.github.io/
А у меня в конце ещё добавляется репозиторий. Т.е. добавился ещё один уровень в пути
- name: Deploy
uses: JamesIves/github-pages-deploy-action@4.1.1 #third party github actions / ok to use
with:
branch: gh-pages
folder: out
- name: Add .nojekyll file
run: touch ./out/.nojekyll
