内容简介:最近经常有人在前几篇关于Next.js的文章里问我如何部署项目,并且还有小伙伴尝试使用这个脚手架编写项目,真的是非常开心和感谢大家啊,写的不怎么样,希望志同道合的小伙伴可以多提意见,我好改进~。不过我如果说我也没部署过你们会不会打我?哈哈,不要着急,今天咱们就撸一发部署上线~满足大家的需求,证明一下这个脚手架是很ok的,可以使用~提到发布页面,就不能不提到Next提供的这个功能了,前面也减少过,但是很简单的介绍的,今天就真正的拿来用用,以Export的功能就是通过配置,将对应的pages下的路由页面导出成静
最近经常有人在前几篇关于Next.js的文章里问我如何部署项目,并且还有小伙伴尝试使用这个脚手架编写项目,真的是非常开心和感谢大家啊,写的不怎么样,希望志同道合的小伙伴可以多提意见,我好改进~。不过我如果说我也没部署过你们会不会打我?哈哈,不要着急,今天咱们就撸一发部署上线~满足大家的需求,证明一下这个脚手架是很ok的,可以使用~
Export静态资源
提到发布页面,就不能不提到Next提供的这个功能了,前面也减少过,但是很简单的介绍的,今天就真正的拿来用用,以 Next-Markdown-Editor 来测试,正好这个Demo全是静态页,没有任何数据获取操作~
Export的功能就是通过配置,将对应的pages下的路由页面导出成静态html文件。
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,如图所示:
其实这个就跟我们正常的SPA应用例如create-react-app生成的build文件夹很像,里面有一个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 Pages
为啥介绍上一步呢?因为我的目的是静态的Next应用可以部署成Github Pages查看Demo,这样的免费又好用的服务器,不去用岂不是一种浪费~接下来就介绍如何把静态Next程序部署成Github Pages。
其实官方文档介绍的很详细,也讲的很清晰,包括每个步骤为什么那么做,我这里为了方便,就把地址列出来,然后说明一下我是怎么做的就可以了,还是那句话,应用层级~ Next-How-To-Deploy-Github-Pages
第一步:配置好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分支上 。
原因如下:
- 不适合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就发布成功了。
生产环境部署
这个我觉得就没必要讲了吧。。。事实上,官方已经说得很清楚了。
"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实现高级部署上线
看完上面的,小伙伴可能会嗤之以鼻:smile:,但是实事求是那个运行完代码就是生产环境的代码了,只不过那么去部署可能会存在一些问题:
- 监控状态
- 系统崩溃无法重启
- 负载均衡
- ...其他问题
说白了,其实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还有很多高级功能,大家自己去探索吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
垃圾回收的算法与实现
中村成洋、相川光 / 丁灵 / 人民邮电出版社 / 2016-7-1 / 99.00元
★ Ruby之父Matz作推荐语:上古传承的魔法,彻底揭开垃圾回收的秘密! ★ 日本天才程序员兼Lisp黑客竹内郁雄审校 本书前半介绍基本GC算法,包括标记-清除GC、引用计数、复制算法的GC、串行GC的算法、并发GC的算法等。后半介绍V8、Rubinius、Dalvik、CPython等几种具体GC的实现。本书适合各领域程序员阅读。一起来看看 《垃圾回收的算法与实现》 这本书的介绍吧!