Next.js脚手架进阶系列

前言

好久没写文章了，最近也没有学什么，有点荒废。尝试着学习一些新东西，GraphQL、Gatsby、Netlify等（可能对很多人来说不是新东西了）。其中学到Netlify的时候发现，很适合部署静态网站，所以就尝试着部署了一下，发现还真是简单，只需要填写几个命令就可以完成静态站点的部署了，免费托管，简直是比gh pages还要方便。所以尝试了几个静态网站之后，比如周公子的花园，就是一键式部署。

然后我就想，把一些项目都试着部署一下，首先就想把这个Next-Antd-Scaffold脚手架部署上去，之前讲过部署了，但是那个部署是有条件的：

gh pages部署需要生成静态文件，也就是next export
pm2部署需要开发者拥有一个服务器

那么对于学生党或者初学者来说，实际上并没有感受到自己建站的完整体验，这里就想着通过这种部署方式，把脚手架部署上去。

ok,上面说了，想用的是Nelify进行部署，那么我想多了，或者说我功课没做到位，Netlify部署虽然很简单，但是并没有成功，过程如下：

第一步，选择仓库
第二步，部署配置
第三步，部署中
第四步，部署完成（失败）

可以看到，部署完成，并且活去了netlify分配给我们的地址，访问一下，oh no～失败了，原因我并不知道，主要它也没提供错误日志，不过我猜测既然是静态站部署，那么这个脚手架其实是用了node动态获取数据，可能是有一部分原因吧，而且build完之后的文件夹并没有index.html，也没有再去纠结，因为本文主题是now部署。

那个长得不是很好看的地址是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和贡献一下吗～哈哈