江苏龙网

  1. 主页 > 生活百科 > >

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

Serverless N

本篇专门针对 Next.js 的 SSR 方案进行了探索和优化，一步一步带大家了解，如何基于 Serverless 架构部署一个实际的线上业务 。

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

文章插图
 
本文主要内容：
  1. 如何快速部署 Serverless Next.js
  2. 如何自定义 API 网关域名
  3. 如何通过 COS 托管静态资源
  4. 静态资源配置 CDN
  5. 基于 Layer 部署 node_modules
如何快速部署 Serverless Next.js由于本人对 Serverless Framework 开发工具比较熟悉，并且长期参与相关开源工作，所以本文均使用 Serverless Components 方案进行部署，请在开始阅读本文之前，保证当前开发环境已经全局安装 serverless 命令行工具 。本文依然上一篇中介绍的 Next.js 组件 来帮助快速部署 Next.js 应用到腾讯云的 Serverless 服务上 。
我们先快速初始化一个 Serverless Next.js 项目：
$ serverless create -u https://github.com/serverless-components/tencent-nextjs/tree/master/example -p serverless-nextjs$ cd serverless-nextjs该项目模板已经默认配置好 serverless.yml，可以直接执行部署命令：
$ serverless deploy大概 30s 左右就可以部署成功了，之后访问生成的 apigw.url 链接 https://service-xxx-xxx.gz.apigw.tencentcs.com/release/ 就可以看到首页了 。
Next.js 组件，会默认帮助我们创建一个 云函数 和 API 网关，并且将它们关联，实际我们访问的 是 API 网关，然后触发云函数，来获得请求返回结果，流程图如下：
如何优雅的部署一个 Serverless Next.js 应用

文章插图
 
解释：我们在执行部署命令时，由于一个简单的 Next.js 应用除了业务代码，还包括庞大的 node_modules 文件夹，这就导致打包压缩的代码体积大概 20M 左右，所以大部分时间消耗在代码上传上 。这里的速度也跟开发环境的网络环境有关，而实际上我们云端部署是很快的，这也是为什么需要 30s 左右的部署时间，而且网络差时会更久，当然后面也会提到如何提高部署速度 。
相信你已经体会到，借助 Serverless Components 解决方案的便利，它确实可以帮助我们的应用高效的部署到云端 。而且这里使用的 Next.js 组件，针对代码上传也做了很多优化工作，来保证快速的部署效率 。
接下来将介绍如何基于 Next.js 组件，进一步优化我们的部署体验 。
如何自定义 API 网关域名使用过 API 网关的小伙伴，应该都知道它可以配置自定义域名，如下图所示：
如何优雅的部署一个 Serverless Next.js 应用

文章插图
 
但是这个手动配置还是不够方便，为此 Next.js 组件也提供了 customDomains 来帮助开发者快速配置自定义域名，于是我们可以在项目的 serverless.yml 中新增如下配置：
org: orgDemoApp: appDemostage: devcomponent: nextjsname: nextjsDemoinputs:src:dist: ./hook: npm run buildexclude:- .envregion: ap-guangzhouruntime: Nodejs10.15apigatewayConf:protocols:- httpsenvironment: releaseenableCORS: true# 自定义域名相关配置customDomains:- domain: test.yuga.chatcertificateId: abcdefg # 证书 ID# 这里将 API 网关的 release 环境映射到根路径pathMappingSet:- path: /environment: releaseprotocols:- https由于这里使用的是 https 协议，所以需要配置托管在腾讯云服务的证书 ID，可以到 SSL 证书控制台 查看 。腾讯云已经提供了申请免费证书的功能，当然你也可以上传自己的证书进行托管 。
之后我们再次执行部署命令，会得到如下输出结果：
如何优雅的部署一个 Serverless Next.js 应用

文章插图
 
这里由于自定义域名时通过 CNAME 映射到 API 网关服务，所以还需要手动添加输出结果中红框部分的 CNAME 解析记录 。等待自定义域名解析成功，就可以正常访问了 。
如何通过 COS 托管静态资源Next.js 应用，有两种静态资源：
  1. 项目中通过资源引入的方式使用，这种会经过 Webpack 打包处理输出到 .next/static 目录，比如 .next/static/css 样式文件目录 。
  2. 直接放到项目根目录的 public 文件夹，通过静态文件服务返回，然后项目中可以直接通过 url 的方式引入（官方介绍） 。
第一种的资源很好处理，Next.js 框架直接支持在 next.config.js 中配置 assetPrefix 来帮助我们在构建项目时，将提供静态资源托管服务的访问 url 添加到静态资源引入前缀中 。如下：
// next.config.jsconst isProd = process.env.NODE_ENV === "production";const STATIC_URL ="https://serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com";module.exports = {assetPrefix: isProd ? STATIC_URL : "",};


推荐阅读


上一篇：没有了

下一篇：小满节气喝什么茶养生,女人要喝什么茶好