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

最新推荐文章于 2024-08-15 09:08:41 发布

Serverless

最新推荐文章于 2024-08-15 09:08:41 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_42409476/article/details/107545035

版权

本文详述了如何优雅地部署 Serverless Next.js 应用，包括快速部署、自定义 API 网关域名、使用 COS 托管静态资源、配置 CDN 以及基于 Layer 部署 node_modules。通过这些步骤，可以显著优化部署效率并提升应用性能。

摘要由CSDN通过智能技术生成

上一篇前端福音：Serverless 和 SSR 的天作之合，详细介绍了 SSR 相关知识，同时也提到了 Serverless 给 SSR 方案带来的福利。但它只是将 Next.js 应用部署到 Serverless 服务上而已，并不适合实际生产业务。为此本篇专门针对 Next.js 的 SSR 方案进行了探索和优化，一步一步带大家了解，如何基于 Serverless 架构部署一个实际的线上业务。

抢先体验：serverless-cnode

本文主要内容：

如何快速部署 Serverless Next.js
如何自定义 API 网关域名
如何通过 COS 托管静态资源
静态资源配置 CDN
基于 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 Requst Flow

解释：我们在执行部署命令时，由于一个简单的 Next.js 应用除了业务代码，还包括庞大的 node_modules 文件夹，这就导致打包压缩的代码体积大概 20M 左右，所以大部分时间消耗在代码上传上。这里的速度也跟开发环境的网络环境有关，而实际上我们云端部署是很快的，这也是为什么需要 30s 左右的部署时间，而且网络差时会更久，当然后面也会提到如何提高部署速度。

相信你已经体会到，借助 Serverless Components 解决方案的便利，它确实可以帮助我们的应用高效的部署到云端。而且这里使用的 Next.js 组件，针对代码上传也做了很多优化工作，来保证快速的部署效率。

接下来将介绍如何基于 Next.js 组件，进一步优化我们的部署体验。

如何自定义 API 网关域名

使用过 API 网关的小伙伴，应该都知道它可以配置自定义域名，如下图所示：

Manual Config Custom Domain

但是这个手动配置还是不够方便，为此 Next.js 组件也提供了 customDomains 来帮助开发者快速配置自定义域名，于是我们可以在项目的 serverless.yml 中新增如下配置：

org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
  src:
    dist: ./
    hook: npm run build
    exclude:
      - .env
  region: ap-guangzhou