如何优雅地部署一个 Serverless Next.js 应用

梗妹说剧 發表於 2020-7-23 18:58:00

如何优雅地部署一个 Serverless Next.js 应用

上一篇前端福音：Serverless 和 SSR 的天作之合，详细介绍了 SSR 相关知识，同时也提到了 Serverless 给 SSR 方案带来的福利。但它只是将 Next.js 应用部署到 Serverless 服务上而已，并不适合实际生产业务。为此本篇专门针对 Next.js 的 SSR 方案进行了探索和优化，一步一步带大家了解，如何基于 Serverless 架构部署一个实际的线上业务。
<blockquote>
抢先体验：serverless-cnode
</blockquote>
本文主要内容：
<ol>
<li>如何快速部署 Serverless Next.js</li>
<li>如何自定义 API 网关域名</li>
<li>如何通过 COS 托管静态资源</li>
<li>静态资源配置 CDN</li>
<li>基于 Layer 部署 node_modules</li>
</ol>
<h2 id="如何快速部署-serverless-nextjs">如何快速部署 Serverless Next.js</h2>
由于本人对 Serverless Framework 开发工具比较熟悉，并且长期参与相关开源工作，所以本文均使用 Serverless Components 方案进行部署，请在开始阅读本文之前，保证当前开发环境已经全局安装 <code>serverless</code> 命令行工具。 
本文依然上一篇中介绍的 Next.js 组件来帮助快速部署 Next.js 应用到腾讯云的 Serverless 服务上。
我们先快速初始化一个 Serverless Next.js 项目：
<pre><code class="language-bash">$ serverless create -u https://github.com/serverless-components/tencent-nextjs/tree/master/example -p serverless-nextjs
$ cd serverless-nextjs
</code></pre>
该项目模板已经默认配置好 <code>serverless.yml</code>，可以直接执行部署命令：
<pre><code class="language-bash">$ serverless deploy
</code></pre>
大概 <code>30s</code> 左右就可以部署成功了，之后访问生成的 <code>apigw.url</code> 链接 <code>https://service-xxx-xxx.gz.apigw.tencentcs.com/release/</code> 就可以看到首页了。
Next.js 组件，会默认帮助我们创建一个 <code>云函数</code> 和 <code>API 网关</code>，并且将它们关联，实际我们访问的是 API 网关，然后触发云函数，来获得请求返回结果，流程图如下：
<img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200723185745636-646093253.png">
<blockquote>
解释：我们在执行部署命令时，由于一个简单的 Next.js 应用除了业务代码，还包括庞大的 <code>node_modules</code> 文件夹，这就导致打包压缩的代码体积大概 <code>20M</code> 左右，所以大部分时间消耗在代码上传上。这里的速度也跟开发环境的网络环境有关，而实际上我们云端部署是很快的，这也是为什么需要 <code>30s</code> 左右的部署时间，而且网络差时会更久，当然后面也会提到如何提高部署速度。
</blockquote>
相信你已经体会到，借助 Serverless Components 解决方案的便利，它确实可以帮助我们的应用高效的部署到云端。而且这里使用的 Next.js 组件，针对代码上传也做了很多优化工作，来保证快速的部署效率。
接下来将介绍如何基于 Next.js 组件，进一步优化我们的部署体验。
<h2 id="如何自定义-api-网关域名">如何自定义 API 网关域名</h2>
使用过 API 网关的小伙伴，应该都知道它可以配置自定义域名，如下图所示：
<img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200723185745857-1817893136.png">
但是这个手动配置还是不够方便，为此 Next.js 组件也提供了 <code>customDomains</code> 来帮助开发者快速配置自定义域名，于是我们可以在项目的 <code>serverless.yml</code> 中新增如下配置：
<pre><code class="language-yaml">org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
src:
dist: ./
hook: npm run build
exclude:
 - .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
protocols:
 - https
environment: release
enableCORS: true
# 自定义域名相关配置
customDomains:
 - domain: test.yuga.chat
 certificateId: abcdefg # 证书 ID
 # 这里将 API 网关的 release 环境映射到根路径
 pathMappingSet:
 - path: /
 environment: release
 protocols:
 - https
</code></pre>
由于这里使用的是 <code>https</code> 协议，所以需要配置托管在腾讯云服务的证书 ID，可以到 SSL 证书控制台查看。腾讯云已经提供了申请免费证书的功能，当然你也可以上传自己的证书进行托管。
之后我们再次执行部署命令，会得到如下输出结果：
<img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200723185746076-487336482.png">
这里由于自定义域名时通过 CNAME 映射到 API 网关服务，所以还需要手动添加输出结果中红框部分的 CNAME 解析记录。等待自定义域名解析成功，就可以正常访问了。
<h2 id="如何通过-cos-托管静态资源">如何通过 COS 托管静态资源</h2>
Next.js 应用，有两种静态资源：
<ol>
<li>项目中通过资源引入的方式使用，这种会经过 <code>Webpack</code> 打包处理输出到 <code>.next/static</code> 目录，比如 <code>.next/static/css</code> 样式文件目录。</li>
<li>直接放到项目根目录的 <code>public</code> 文件夹，通过静态文件服务返回，然后项目中可以直接通过 url 的方式引入（官方介绍）。</li>
</ol>
第一种的资源很好处理，Next.js 框架直接支持在 <code>next.config.js</code> 中配置 <code>assetPrefix</code> 来帮助我们在构建项目时，将提供静态资源托管服务的访问 url 添加到静态资源引入前缀中。如下：
<pre><code class="language-js">// next.config.js
const isProd = process.env.NODE_ENV === "production";
const STATIC_URL =
"https://serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com";
module.exports = {
assetPrefix: isProd ? STATIC_URL : "",
};
</code></pre>
上面配置中的 <code>STATIC_URL</code> 就是静态资源托管服务提供的访问 url，示例中是腾讯云对应的 COS 访问 url。
那么针对第二种资源我们如何处理呢？这里就需要对业务代码进行稍微改造了。
首先，需要在 <code>next.config.js</code> 中添加 <code>env.STATIC_URL</code> 环境变量:
<pre><code class="language-js">const isProd = process.env.NODE_ENV === "production";
const STATIC_URL =
"https://serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com";
module.exports = {
env: {
// 3000 为本地开发时的端口，这里是为了本地开发时，也可以正常运行
STATIC_URL: isProd ? STATIC_URL : "http://localhost:3000",
},
assetPrefix: isProd ? STATIC_URL : "",
};
</code></pre>
然后，在项目中修改引入 <code>public</code> 中静态资源的路径，比如：
<pre><code class="language-html">
<head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</head>


<head>
<title>Create Next App</title>
<link rel="icon" href={`${process.env.STATIC_URL}/favicon.ico`} />
</head>
</code></pre>
最后，在 <code>serverless.yml</code> 中新增静态资源相关配置 <code>staticConf</code>，如下：
<pre><code class="language-yaml">org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
src:
dist: ./
hook: npm run build
exclude:
 - .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
# 此处省略....
# 静态资源相关配置
staticConf:
cosConf:
 # 这里是创建的 COS 桶名称
 bucket: serverless-nextjs
</code></pre>
通过配置 <code>staticConf.cosConf</code> 指定 COS 桶，执行部署时，会默认自动将编译生成的 <code>.next</code> 和 <code>public</code> 文件夹静态资源上传到指定的 COS。
修改好配置后，再次执行 <code>serverless deploy</code> 进行部署：
<pre><code class="language-bash">$ serverless deploy

serverless ⚡framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo"

region: ap-guangzhou
# 此处省略......
staticConf:
cos:
region: ap-guangzhou
cosOrigin: serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com
bucket: serverless-nextjs-xxx
</code></pre>
浏览器访问，打开调试控制台，可以看到访问的静态资源请求路径如下：
<img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200723185746271-583030190.png">
上图可以看出，静态资源均通过访问 COS 获取，现在云函数只需要渲染入口文件，而不需要像之前，静态资源全部通过云函数返回。
<blockquote>
备注：之前由于都是将 .next 部署到了云函数，所以没法访问页面后，页面中的静态资源，如图片，都需要再次访问云函数，然后获取。于是看似我们请求了一次云函数，而实际上云函数单位时间并发数，会根据页面静态资源请求数而增加，从而造成冷启动问题。
</blockquote>
<h2 id="静态资源配置-cdn">静态资源配置 CDN</h2>
上面我们已经将静态资源都部署到 COS 了，页面访问也快了很多。但是对于生产环境，还需要给静态资源配置 CDN 的。通过 COS 控制台已经可以很方便的配置 CDN 加速域名了。但是还是需要手动去配置，作为一名懒惰的程序员，我还是不能接受的。而 Next.js 组件正好提供了给静态资源配置 CDN 的能力，只需要在 <code>serverless.yml</code> 中新增 <code>staticConf.cdnConf</code> 配置即可，如下所示：
<pre><code class="language-yaml"># 此处省略....
inputs:
# 此处省略....

# 静态资源相关配置
staticConf:
cosConf:
 # 这里是创建的 COS 桶名称
 bucket: serverless-nextjs
cdnConf:
 domain: static.test.yuga.chat
 https:
 certId: abcdefg
</code></pre>
这里使用 <code>https</code> 协议，所以也添加了 <code>https</code> 的 <code>certId</code> 证书 ID 配置。此外静态资源域名也需要修改为 CDN 域名，修改 <code>next.config.js</code> 如下：
<pre><code class="language-js">const isProd = process.env.NODE_ENV === "production";
const STATIC_URL = "https://static.test.yuga.chat";
module.exports = {
env: {
STATIC_URL: isProd ? STATIC_URL : "http://localhost:3000",
},
assetPrefix: isProd ? STATIC_URL : "",
};
</code></pre>
配置好后，再次执行部署，结果如下：
<pre><code class="language-bash">$ serverless deploy

serverless ⚡framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo"

region: ap-guangzhou
apigw:
# 省略...
scf:
# 省略...
staticConf:
cos:
region: ap-guangzhou
cosOrigin: serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com
bucket: serverless-nextjs-xxx
cdn:
domain: static.test.yuga.chat
url: https://static.test.yuga.chat
</code></pre>
<blockquote>
注意：这里虽然添加了 CDN 域名，但是还是需要手动配置 CNAME <code>static.test.yuga.chat.cdn.dnsv1.com</code> 解析记录。
</blockquote>
<h2 id="优化前后对比">优化前后对比</h2>
到这里，Serverless Next.js 应用体验已经优化了很多，我们可以使用 <code>Lighthouse</code> 进行性能测试，来验证下我们的收获。测试结果如下：
优化前：
<img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200723185746584-1697354677.png">
优化后：
<img src="https://img2020.cnblogs.com/other/1718416/202007/1718416-20200723185746752-681544686.png">
前后对比，可以明显看出优化效果，当然这里主要是针对静态资源进行了优化处理，减少了冷启动。为了更好地游湖体验，我们还可以做的更多，这里就不展开讨论了。
<h2 id="基于-layer-部署-node_modules">基于 Layer 部署 node_modules</h2>
随着我们的业务变得复杂，项目体积会越来越大，node_modules 文件夹也会变得原来越大，而现在每次部署都需要将 node_modules 打包压缩，然后上传，跟业务代码一起部署到云函数。在实际开发中， <code>node_modules</code> 大部分时候是不怎么变化的，但是当前每次都需要上传，这必然会浪费很多部署时间，尤其在网络状态不好的情况下，代码上传就更慢了。
既然 <code>node_modules</code> 文件夹是不怎么变更的，那么我们能不能只有在它变化时才上传更新呢？
借助 Layer 的能力是可以实现的。
在这之前，先简单介绍下 Layer:
<blockquote>
借助 Layer，可以将项目依赖放在 Layer 中而无需部署到云函数代码中。函数在执行前，会先加载 Layer 中的文件到 <code>/opt</code> 目录下（云函数代码会挂载到 <code>/var/user/</code> 目录下），同时会将 <code>/opt</code> 和 <code>/opt/node_modules</code> 添加到 <code>NODE_PATH</code> 中，这样即使云函数中没有 <code>node_modules</code> 文件夹，也可以通过 <code>require('abc')</code> 方式引入使用该模块。
</blockquote>
正好 Layer 组件可以帮助我们自动创建 <code>Layer</code>。
使用时只需要在项目下添加 <code>layer</code> 文件夹，并且创建 <code>layer/serverless.yml</code> 配置如下：
<pre><code class="language-yaml">org: orgDemo
app: appDemo
stage: dev
component: layer
name: nextjsDemo-layer

inputs:
region: ap-guangzhou
name: ${name}
src: ../node_modules
runtimes:
- Nodejs10.15
- Nodejs12.16
</code></pre>
配置说明:
<blockquote>
region：地区，需要跟云函数保持一致 
name：Layer 名称，在云函数绑定指定 Layer 时需要指定 
src：指定需要上传部署到 Layer 的目录 
runtimes：支持的云函数运行环境
</blockquote>
执行部署 Layer 命令:
<pre><code class="language-bash">$ serverless deploy --target=./layer

serverless ⚡framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo-layer"

region: ap-guangzhou
name: nextjsDemo-layer
bucket: sls-layer-ap-guangzhou-code
object: nextjsDemo-layer-1594356915.zip
description: Layer created by serverless component
runtimes:
- Nodejs10.15
- Nodejs12.16
version: 1
</code></pre>
从输出可以清晰看到 Layer 组件已经帮助我们自动创建了一个名称为 <code>nextjsDemo-layer</code>，版本为 <code>1</code> 的 Layer。
接下来我们如何自动和我们的 Next.js 云函数绑定呢？
参考 serverless components outputs 说明文档，可以通过引用一个基于 Serverless Components 部署成功的实例的 <code>outputs</code> (这里就是控制台输出对象内容)，语法如下：
<pre><code># Syntax
${output:::.}
</code></pre>
那么我们只需要在项目根目录的 <code>serverless.yml</code> 文件中，添加 <code>layers</code> 配置就可以了：
<pre><code class="language-yaml">org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
src:
dist: ./
hook: npm run build
exclude:
 - .env
 - "node_modules/**"
region: ap-guangzhou
runtime: Nodejs10.15
layers:
- name: ${output:${stage}:${app}:${name}-layer.name}
 version: ${output:${stage}:${app}:${name}-layer.version}
# 静态资源相关配置
# 此处省略....
</code></pre>
<blockquote>
注意：不同组件部署实例结果的依赖使用，需要保证 serverless.yml 中 <code>org,app,stage</code> 三个配置是一致的。
</blockquote>
由于 <code>node_modules</code> 已经通过 Layer 部署，所以还需要在 <code>src.exclude</code> 中添加忽略部署该文件夹。
之后再次执行部署命令 <code>serverless deploy</code> 即可，你会发现这次部署时间大大缩减了，因为我们不在需要每次压缩上传 <code>node_moduels</code> 这个庞大的文件夹了 (▽)
<h2 id="最后">最后</h2>
基于以上方案，我部署了一个完整的 Cnode 项目，serverless-cnode，欢迎感兴趣的小伙伴，提交宝贵的 ISSUE/PR。
关于 Serverless SSR 的方案，我也在不断尝试和探索中，如果你有更好的方案和建议，欢迎评论或者私信来撩~
<h2 id="one-more-thing">One More Thing</h2>
3 秒你能做什么？喝一口水，看一封邮件，还是 —— 部署一个完整的 Serverless 应用？
<blockquote>
复制链接至 PC 浏览器访问：https://serverless.cloud.tencent.com/deploy/express
</blockquote>
3 秒极速部署，立即体验史上最快的 ServerlessHTTP 实战开发！
<blockquote>
传送门：
<ul>
<li>GitHub: github.com/serverless</li>
<li>官网：serverless.com</li>
</ul>
</blockquote>
欢迎访问：Serverless 中文网，您可以在最佳实践里体验更多关于 Serverless 应用的开发！
<hr>
<blockquote>
推荐阅读：《Serverless 架构：从原理、设计到项目实战》
</blockquote> 
来源：https://www.cnblogs.com/serverlesscloud/p/13368107.html

頁: [1]

琼殿技术论坛's Archiver

如何优雅地部署一个 Serverless Next.js 应用