怎么优雅地部署一个Serverless Next.js应用

　　介绍

今天就跟大家聊聊有关怎么优雅地部署一个Serverless Next。js应用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

如何快速部署Serverless Next。js

由于本人对Serverless框架开发工具比较熟悉,并且长期参与相关开源工作,所以本文均使用Serverless组件方案进行部署,请在开始阅读本文之前,保证当前开发环境已经全局安装<代码> Serverless 命令行工具。本文依然上一篇中介绍的下一个。js组件来帮助快速部署。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 部署

大概30年代<代码> 左右就可以部署成功了,之后访问生成的<代码> apigw。url> 代码就可以看到首页了。

。js组件,会默认帮助我们创建一个<代码>云函数和<代码> API网关>

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

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

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

如何自定义API网关域名

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

但是这个手动配置还是不够方便,为下一步此。js组件也提供了<代码> customDomains> serverless。yml>

 org: orgDemo
　　应用:appDemo
　　阶段:开发
　　组件:nextjs
　　名称:nextjsDemo
　　
　　输入:
　　src才能:
　　,,,距离:。/,,,钩:npm  run 构建
　　,,,不包括:
　　,,,,,神;.env
　　地区:才能ap-guangzhou
　　运行时才能:Nodejs10.15
　　apigatewayConf才能:
　　,,,的协议:
　　,,,,,今天早上,https
　　,,,环境:释放
　　,,,enableCORS:真实
　　,,,#,自定义域名相关配置
　　,,,customDomains:
　　,,,,,神;域:test.yuga.chat
　　,,,,,,,certificateId:, abcdefg  #,证书,ID
　　,,,,,,,#,这里将,API 网关的,release 环境映射到根路径
　　,,,,,,,pathMappingSet:
　　,,,,,,,,,神;路径:/,,,,,,,,,,,环境:释放
　　,,,,,,,的协议:
　　,,,,,,,,,今天早上,https 

由于这里使用的是<代码> https 协议,所以需要配置托管在腾讯云服务的证书ID,可以到SSL证书控制台查看。腾讯云已经提供了申请免费证书的功能,当然你也可以上传自己的证书进行托管。

之后我们再次执行部署命令,会得到如下输出结果:

这里由于自定义域名时通过CNAME映射到API网关服务,所以还需要手动添加输出结果中红框部分的CNAME解析记录。等待自定义域名解析成功,就可以正常访问了。

如何通过因为托管静态资源

。js应用,有两种静态资源:

<李>

项目中通过资源引入的方式使用,这种会经过<代码> Webpack> 。下一个/静态

怎么优雅地部署一个Serverless Next.js应用