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

2,800 阅读5分钟

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和贡献一下吗~哈哈