Next.js Scaffolding Advanced — развертывание онлайн

Next.js Scaffolding Расширенная серия

Идеально подходит для муравьиного дизайна
Инкапсулируйте выборку &&, чтобы добавить промежуточное ПО
Развертывание запущено
Развертывание Zeit Now

В последнее время меня часто спрашивают как развернуть проект в первых нескольких статьях о Next.js, и некоторые друзья пытаются использовать этот скаффолдинг для написания проекта, я очень доволен и спасибо, написание не очень, я надеюсь, что единомышленники Мои друзья могут высказать больше мнений, я могу улучшить ~. Но вы ударите меня, если я скажу, что не развернул его? Ха-ха, не волнуйтесь, сегодня мы развернем развертывание и запустим его ~ чтобы удовлетворить все потребности, чтобы доказать, что эти леса очень хороши и их можно использовать ~

Экспорт статических ресурсов

Когда дело доходит до страницы релиза, мы не можем не упомянуть функцию Next, которая раньше была сокращена, но представлена очень кратко.Next-Markdown-EditorДля проверки получилось, что эта демонстрация представляет собой все статические страницы без каких-либо операций по сбору данных~

Функция Экспорта заключается в экспорте страницы маршрутизации под соответствующими страницами в статический html-файл через конфигурацию.

Экспортная конфигурация

// package.json
"scripts": {
    "start": "node server.js",
    "build": "next build",
    "prod": "NODE_ENV=production node server.js",
    // 新增export命令
    "preexport": "next build",
    "export": "next export"
 }
 
 // next.config.js
 exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
      '/normal': { page: '/normal' },
      '/edit': { page: '/edit' },
      '/preview': { page: '/preview' }
    }
  }

Случай начала

Мы используем команду экспорта для создания папки статического ресурса для проекта, как показано на рисунке:

На самом деле это очень похоже на папку сборки, созданную нашим обычным приложением SPA, таким как create-react-app, которое имеет index.html. Точно так же мы можем использовать serve для запуска ~

1.安装serve
yarn add serve

2.增加启动命令
"scripts": {
    "start": "node server.js",
    "build": "next build",
    "prod": "NODE_ENV=production node server.js",
    "preexport": "next build",
    "export": "next export",
    // 增加
    "static-run": "next export && serve out"
  }

3.运行命令
yarn static-run

Скриншот консоли после запуска и посетите localhost: 5000/

Развернуть на страницах Github

Зачем вводить предыдущий шаг? Поскольку моя цель состоит в том, чтобы статическое приложение Next можно было развернуть как страницы Github для просмотра демонстрации, было бы напрасно не использовать такой бесплатный и простой в использовании сервер.Далее я расскажу, как развернуть статическую программу Next. как страницы Github.

На самом деле, официальная документация очень подробная и очень понятная, в том числе для чего делается каждый шаг, я укажу адрес, чтобы его сделать, потом объясню, как я это сделал, или это предложение, уровень приложения ~Next-How-To-Deploy-Github-Pages

Шаг 1. Настройте параметры, связанные с экспортом

см. выше

Шаг 2. Добавьте команду развертывания

// 一体化一部直接deploy语句
  "scripts": {
    "start": "node server.js",
    "build": "next build",
    "prod": "NODE_ENV=production node server.js",
    "preexport": "next build",
    "export": "next export",
    "static-run": "next export && serve out",
    // 新增
    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
  },

Шаг 3: Откройте новую локальную ветку (deploy-branch)

Здесь я хочу рассказать о том, почему открывается новый местный филиал.Обратите внимание, что эту ветку не нужно отправлять на удаленку, из-за некоторых специальных операций операция развертывания не подходит для основной и целевой веток gh-pages..

Причины следующие:

Не подходит по основным причинам

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

Причины, не подходящие для ветки gh-pages

Github Pages опирается на ветку gh-pages.После успешного релиза склад принимает следующую картину:

Очевидно, что если мы поместим его в ветку gh-pages, каждый раз, когда потребуется много хлопот (например, -f для фиксации, удаленный репозиторий и локальный код несовместимы, нужно вытащить и т. д.), переиздать .

Мое решение, новое открытоеdeploy-branchМестный филиал, имя всех вас.

// next.config.js增加代码
const debug = process.env.NODE_ENV !== 'production';

module.exports = {
  // 这里面改成你仓库的名字 
  assetPrefix: !debug ? '/next-markdown-editor/' : '',
  ...
}

Шаг 4: Публикация на страницах Github

// 在deploy-branch下直接运行
yarn deploy

[Примечание]: вам не нужно ничего делать, просто запустите его сразу после добавления assetsPrefix.yarn deployХорошо, результат показан ниже.

Посмотреть эффект

доступhttps://luffyzh.github.io/next-markdown-editor/, вы можете видеть, что наш следующий проект Github Pages успешно выпущен.

проблема появляется

Описание проблемы: Нет большой проблемы с вышеописанным нормальным запуском и развертыванием клиентского процесса, но при его варварском обновлении на другой, кроме домашней страницы, появится ошибка 404, т.к. с домашней страницыhttps://luffyzh.github.io/next-markdown-editor/Маршрут переходит на страницу1 и отображается какhttps://luffyzh.github.io/page1, мы должны ожидатьhttps://luffyzh.github.io/next-markdown-editor/page1, поэтому появляется 404.

Решение

# 安装babel-plugin-transform-define
yarn add -d babel-plugin-transform-define

# 新建env-config.js
const prod = process.env.NODE_ENV === 'production';

module.exports = {
  'process.env.BACKEND_URL': prod ? '/next-markdown-editor' : ''
};

# 更改.babelrc ->.babelrc.js
const envConfig = require("./env-config.js");

module.exports = {
  "presets": ["next/babel"],
  "plugins": [
    ... // other plugin
    ["transform-define", { ...envConfig }]
  ]
}

# 更改路由跳转
// 原来
<Link prefetch href='/normal'>
  <Button size='large' type='default'>普通编辑器</Button>
</Link>

// 现在
<Link prefetch href='/normal' as={process.env.BACKEND_URL + '/normal'}>
  <Button size='large' type='default'>普通编辑器</Button>
</Link>

# yarn deploy发布即可

Развертывание производственной среды

Я не думаю, что это необходимо. . . На самом деле, чиновник сделал это очень ясно.

"scripts": {
    "start": "node server.js", // 开发环境命令
    "build": "next build", // 生产环境打包
    "prod": "NODE_ENV=production node server.js" // 生产环境运行
},

Официальный код должен установить NODE_ENV для производства, что является производственной средой ~, вот объяснение, которое кто-то только что спросил, если это среда Windows, команда должна стать"prod": "set NODE_ENV=production && node server.js"

PM2 обеспечивает расширенное развертывание в Интернете

Прочитав вышеизложенное, ваши друзья могут усмехнуться😄, но, честно говоря, код, который запускает код, — это код продакшн-окружения, но при его развертывании могут возникнуть некоторые проблемы:

контролировать состояние
Система дает сбой и не может быть перезапущена
Балансировка нагрузки
...другие проблемы

Проще говоря, Next.js на самом деле является фреймворком на стороне узла (вы можете увидеть команду запускаnode server). Поэтому я планирую использовать для развертывания более популярную PM2.Специфика использования PM2 была описана в предыдущей статье, поэтому я не буду говорить о ней здесь, а только непосредственно управлять ею.

Портал:Простое руководство пользователя PM2

Шаг 1: Файл конфигурации

module.exports = {
  apps: [
    {
      name: 'next-antd-scaffold',
      script: './server.js',
      cwd: './', // 当前工作路径
      watch: [
        '.next' // 监控变化的目录，一旦变化，自动重启
      ],
      ignore_watch: [
        // 从监控目录中排除
        'node_modules',
        'logs',
        'static'
      ],
      instances: 2,  // 启动2个实例
      node_args: '--harmony',
      env: {
        NODE_ENV: 'development',
        PORT: 3006
      },
      env_production: {
        NODE_ENV: 'production',
        PORT: 5000
      },
      out_file: './logs/out.log', // 普通日志路径
      error_file: './logs/err.log', // 错误日志路径
      merge_logs: true,
      log_date_format: 'YYYY-MM-DD HH:mm Z' // 设置日志的日期格式
    }
  ]
};

Если вы не понимаете, просто перейдите к предыдущей статье и посмотрите ее~ Это очень просто.

Шаг 2. Разверните службу

# 运行命令
$ pm2 start pm2.config.js --env production

Как показано на рисунке выше, среда разработки на моей стороне — это порт 3006, а производственная среда — порт 5000. После использования pm2 для развертывания сервисов доступ к проектам нормальный, включая сервисы API. И pm2 также предоставляет нам функции ведения журнала и мониторинга, как показано на следующем рисунке:

Все консольные журналы вывода системы:Все журналы системных ошибок:

И т.д., и т.д...

PM2 также имеет множество дополнительных функций, давайте изучим их самостоятельно.

Суммировать

Эта статья не о гидрологии, ха-ха. Ведь это было написано по просьбам многих друзей.В итоге я думаю, что эти леса почти готовы. Можно ли раскрутить волну ~ написать несколько проектов и попробовать

🌟Star или Fork, не теряйся ~Next-Antd-Scaffold

общаться с

Если вам интересно общение, делитесь и обсуждайте вместе, вступайте в групповой чат, если не получается, добавляйте QQ: 439923999, отметьте Далее😄

Группа QQ: 641113448 (Примечание: Next.js)