Next.js脚手架进阶系列
- 完美契合ant-design
- 封装fetch && 增加中间件
- 部署上线
- Zeit Now部署
前言
好久没写文章了，最近也没有学什么，有点荒废。尝试着学习一些新东西，GraphQL、Gatsby、Netlify等（可能对很多人来说不是新东西了）。其中学到Netlify的时候发现，很适合部署静态网站，所以就尝试着部署了一下，发现还真是简单，只需要填写几个命令就可以完成静态站点的部署了，免费托管，简直是比gh pages还要方便。所以尝试了几个静态网站之后，比如周公子的花园，就是一键式部署。
然后我就想，把一些项目都试着部署一下，首先就想把这个Next-Antd-Scaffold脚手架部署上去，之前讲过部署了，但是那个部署是有条件的：
- gh pages部署需要生成静态文件，也就是
next export - pm2部署需要开发者拥有一个服务器
那么对于学生党或者初学者来说，实际上并没有感受到自己建站的完整体验，这里就想着通过这种部署方式，把脚手架部署上去。
ok,上面说了，想用的是Nelify进行部署，那么我想多了，或者说我功课没做到位，Netlify部署虽然很简单，但是并没有成功，过程如下：
-
第一步，选择仓库
-
第二步，部署配置
-
第三步，部署中
-
第四步，部署完成（失败）
那个长得不是很好看的地址是netlify为我们分配的，你还可以通过 site settings进行custom化，确实很方便。
Now 部署
上面失败，也情有可原，谁让自己懒了呢，为啥这么说呢？Next.js原本就是zeit仓库的一个项目，而对应配套的，zeit仓库还有一个now项目，专门进行部署的，真是非常非常NB啊，不得不佩服大牛们～
原本我以为会很简单的就可以部署成功呢，为啥呢，因为准备工作做好之后只有一条命令，那就是now，然后就等待就行了，结果真是惨不忍睹，各种问题各种踩坑，所以分享给大家踩坑经历吧～
可以看到，部署失败了六次，第七次才部署成功～艰难险阻啊
事先声明，now-cli很强大，我只用来部署Next.js项目了，其实它可以支持很多很多种部署，具体如下图
准备工作
首先就是安装now工具了，官方提供下载地址，各种版本的。我习惯直接npm了，大家按需安装。
// 安装now
npm install -g now
复制代码部署踩坑
安装完之后迫不及待的进行尝试，我其实就是按照文档一步一步来做的，文档地址zeit-now docs以及now-next docs。
具体的大家自己去读吧，我只是负责帮你们踩坑，一步一步来。
第一次尝试 - add now.json
新建now.json配置文件，键入如下代码：
{
"version": 2,
"builds": [{ "src": "next.config.js", "use": "@now/next" }]
}
复制代码然后运行部署命令:
now
复制代码没错，我什么都没做，就直接运行命令了。显而易见，我失败了，哈哈。now的好处就是失败了会有详细的部署日志，失败原因。
OK，原因很明显提示我们了，no serverless pages，这是个什么东西我不太清楚，因为next.js正常部署是不会有这个东西的，那么就去查文档，发现如下：
也就是我们想通过now进行部署Next.js项目,需要将target配置为serverless，这样就可以了。
第二次尝试 - serverless
我们对代码进行了如下修改：
// next.config.js
...
module.exports = {
...
+ target: 'serverless'
...
}
...
复制代码再次进行部署：
now
复制代码不出意外，又失败了：
从图中可以看到，非常明显，serverless模式下，不支持publicRuntimeConfig，至于publicRuntimeConfig是个什么东西，可以去看官方文档，这里就不多说了，然后我去看了下Next.js的文档，发现了如下提示 文档地址：Next.js的部署文档也提供了now的注意事项，所以我们如果看的特别仔细，也会避免这种问题。 那么，我们就修改吧，把代码里所有的提前配置都修改掉。修改方式有很多种，官方也给了方案，比如：
还有就是可以通过babel-plugin-transform-define或者Webpack DefinePlugin。
第三次尝试 - 修改config
ok ,没问题了，部署成功就可以直接访问了部署后线上地址。预览一下，也基本没什么问题，觉得还是挺简单的，可能我太笨了，哈哈。
这次单纯是我想写，从开始到结束也就两个小时各种截图，没什么技术，纯当是没有服务器的同学免费尝试免费玩一玩了。
最后部署的分支是脚手架的now分支。部署过程是拿master分支尝试的，大家注意了哦。
Next-antd-scaffold脚手架可以正式用了，没有人提issue和贡献一下吗～哈哈