Next.js 脚手架进阶 —— Zeit Now部署

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分配给咱们的地址，访问一下，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和贡献一下吗～哈哈