Next.js脚手架进阶 —— 部署上线

时间 2019-11-08

原文原文链接

Next.js脚手架进阶系列

最近常常有人在前几篇关于Next.js的文章里问我如何部署项目，而且还有小伙伴尝试使用这个脚手架编写项目，真的是很是开心和感谢你们啊，写的不怎么样，但愿志同道合的小伙伴能够多提意见，我好改进～。不过我若是说我也没部署过大家会不会打我？哈哈，不要着急，今天我们就撸一发部署上线～知足你们的需求，证实一下这个脚手架是很ok的，可使用～html

Export静态资源

提到发布页面，就不能不提到Next提供的这个功能了，前面也减小过，可是很简单的介绍的，今天就真正的拿来用用，以Next-Markdown-Editor来测试，正好这个Demo全是静态页，没有任何数据获取操做～node

Export的功能就是经过配置，将对应的pages下的路由页面导出成静态html文件。react

export 配置

// 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' }
    }
  }
复制代码

serve启动

咱们经过export命令，会将项目生成一个静态资源文件夹out，如图所示：git

其实这个就跟咱们正常的SPA应用例如create-react-app生成的build文件夹很像，里面有一个index.html。同理，咱们可使用serve来进行启动～github

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/json

部署到Github Pages

为啥介绍上一步呢？由于个人目的是静态的Next应用能够部署成Github Pages查看Demo，这样的免费又好用的服务器，不去用岂不是一种浪费～接下来就介绍如何把静态Next程序部署成Github Pages。windows

其实官方文档介绍的很详细，也讲的很清晰，包括每一个步骤为何那么作，我这里为了方便，就把地址列出来，而后说明一下我是怎么作的就能够了，仍是那句话，应用层级～ Next-How-To-Deploy-Github-Pagesbash

第一步：配置好export相关参数

参考上面的内容服务器

第二步：增长deploy命令

// 一体化一部直接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"
  },
复制代码

第三步：新开一个本地分支(deploy-branch)

这里我要说一下，为何新开一个本地分支。注意，这个分支不须要push到远程，由于某些特殊操做，deploy操做不适合在master和目标gh-pages分支上。babel

缘由以下：

不适合master缘由

由于存在路由的关系，因此须要deploy前配置assetPrefix参数，可是配置完这个参数为的是发布到Github Pages，而会致使生产环境也会带上那个参数，以致于不少资源没法找到。因此不适合在master分支。

不适合gh-pages分支的缘由

Github Pages依赖的是gh-pages分支，发布成功后仓库变成了下图这样：

很明显，若是咱们放在gh-pages分支上，每一次都须要很麻烦（好比-f才能提交，远程仓库和本地代码不一致须要pull等等...），才能从新发布。

个人解决方案，新开一个deploy-branch本地分支，名字你们随意。

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

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

第四步：发布到Github Pages

// 在deploy-branch下直接运行
yarn deploy
复制代码

【注意】：什么都不用作，增长完assetPrefix后直接运行yarn deploy就行，运行结果以下图。

查看效果

访问https://luffyzh.github.io/next-markdown-editor/, 就能够看到，咱们的Next项目Github Pages就发布成功了。

出现问题

问题描述：上面那个正常跑部署走客户端流程，没有什么大问题，不过当在非首页的其余野蛮进行刷新，会出现404报错，缘由是从首页https://luffyzh.github.io/next-markdown-editor/ 路由跳转到page1被渲染成了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设置成production便可，就是生产环境～，这里说明一下正好有人问过，若是是windows环境，命令应该变成"prod": "set NODE_ENV=production && node server.js"

PM2实现高级部署上线

看完上面的，小伙伴可能会嗤之以鼻😄，可是实事求是那个运行完代码就是生产环境的代码了，只不过那么去部署可能会存在一些问题：

监控状态
系统崩溃没法重启
负载均衡
...其余问题

说白了，其实Next.js是一个node端框架（你看启动命令就知道了node server）。因此，部署上线我准备采用比较流行的PM2来进行部署，PM2的具体使用方法我在前面的一篇文章中讲过了，这里就很少讲了，直接操做了。

传送门：PM2简易使用手册

第一步：配置文件

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' // 设置日志的日期格式
    }
  ]
};
复制代码

不懂得，去前面的文章里看看就好啦～很简单都。

第二步：部署服务

# 运行命令
$ pm2 start pm2.config.js --env production
复制代码

如上图所示，我这边开发环境是3006端口，生产环境是5000端口，使用pm2部署服务之后，访问项目都是正常的，包括API服务。而且pm2还为咱们提供日志以及监控功能，详细以下图：

系统全部的控制台输出日志：

系统全部的错误日志：

等等等等...

PM2还有不少高级功能，你们本身去探索吧。

总结

这篇文章可不是水文了吧，哈哈。毕竟是应不少小伙伴要求写的，最后我以为这个脚手架完成的真差很少了。是否是能够推广一波了～写几个项目试试

🌟Star或Fork，不要迷路～Next-Antd-Scaffold

交流

有兴趣交流，你们一块儿分享探讨，加入群聊，若是失效请加QQ:439923999,备注Next😄

QQ群：641113448 （备注：Next.js）