如何优雅的部署一个 Serverless Next.js 应用( 三 ) _Serverless

文章插图

优化后：

文章插图

前后对比，可以明显看出优化效果，当然这里主要是针对静态资源进行了优化处理，减少了冷启动。为了更好地游湖体验，我们还可以做的更多，这里就不展开讨论了。
基于 Layer 部署 node_modules随着我们的业务变得复杂，项目体积会越来越大，node_modules 文件夹也会变得原来越大，而现在每次部署都需要将 node_modules 打包压缩，然后上传，跟业务代码一起部署到云函数。在实际开发中，node_modules 大部分时候是不怎么变化的，但是当前每次都需要上传，这必然会浪费很多部署时间，尤其在网络状态不好的情况下，代码上传就更慢了。
既然 node_modules 文件夹是不怎么变更的，那么我们能不能只有在它变化时才上传更新呢？
借助 Layer 的能力是可以实现的。
在这之前，先简单介绍下 Layer:

借助 Layer，可以将项目依赖放在 Layer 中而无需部署到云函数代码中。函数在执行前，会先加载 Layer 中的文件到 /opt 目录下（云函数代码会挂载到 /var/user/ 目录下），同时会将 /opt 和 /opt/node_modules 添加到 NODE_PATH 中，这样即使云函数中没有 node_modules 文件夹，也可以通过 require('abc') 方式引入使用该模块。

正好 Layer 组件可以帮助我们自动创建 Layer 。
使用时只需要在项目下添加 layer 文件夹，并且创建 layer/serverless.yml 配置如下：

org: orgDemoapp: appDemostage: devcomponent: layername: nextjsDemo-layerinputs:region: ap-guangzhouname: ${name}src: ../node_modulesruntimes:- Nodejs10.15- Nodejs12.16

配置说明:

region：地区，需要跟云函数保持一致
name：Layer 名称，在云函数绑定指定 Layer 时需要指定
src：指定需要上传部署到 Layer 的目录
runtimes：支持的云函数运行环境

执行部署 Layer 命令:

$ serverless deploy --target=./layerserverless ?frameworkAction: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo-layer"region:ap-guangzhouname:nextjsDemo-layerbucket:sls-layer-ap-guangzhou-codeobject:nextjsDemo-layer-1594356915.zipdescription: Layer created by serverless componentruntimes:- Nodejs10.15- Nodejs12.16version:1

从输出可以清晰看到 Layer 组件已经帮助我们自动创建了一个名称为 nextjsDemo-layer，版本为 1 的 Layer 。
接下来我们如何自动和我们的 Next.js 云函数绑定呢？
参考 serverless components outputs 说明文档，可以通过引用一个基于 Serverless Components 部署成功的实例的 outputs (这里就是控制台输出对象内容)，语法如下：
# Syntax${output:[stage]:[app]:[instance].[output]}那么我们只需要在项目根目录的 serverless.yml 文件中，添加 layers 配置就可以了：

org: orgDemoapp: appDemostage: devcomponent: nextjsname: nextjsDemoinputs:src:dist: ./hook: npm run buildexclude:- .env- "node_modules/**"region: ap-guangzhouruntime: Nodejs10.15layers:- name: ${output:${stage}:${app}:${name}-layer.name}version: ${output:${stage}:${app}:${name}-layer.version}# 静态资源相关配置# 此处省略....

注意：不同组件部署实例结果的依赖使用，需要保证 serverless.yml 中 org,app,stage 三个配置是一致的。

由于 node_modules 已经通过 Layer 部署，所以还需要在 src.exclude 中添加忽略部署该文件夹。
之后再次执行部署命令 serverless deploy 即可，你会发现这次部署时间大大缩减了，因为我们不在需要每次压缩上传 node_moduels 这个庞大的文件夹了 (^▽^)
最后基于以上方案，我部署了一个完整的 Cnode 项目，serverless-cnode，欢迎感兴趣的小伙伴，提交宝贵的 ISSUE/PR 。
关于 Serverless SSR 的方案，我也在不断尝试和探索中，如果你有更好的方案和建议，欢迎评论或者私信来撩~