使用 serverless 与 next 开发第一个 next 应用

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 在上一章,我介绍到了 如何使用 serverless 部署第一个 koa 应用。对于一个后端(Node)项目使用 serverless 的方式要接收巨大的挑战,其中最大的挑战来自于传统的并已完善与成熟的架构。而对于一个弱存储弱状态的 SSR 项目或者纯前端项目,通过 zeit 或者 netlify 部署是一个更好的选择,然而由于网络原因并不适用于国内。国内也无如 netlify 一样的前端快速部署方案(笔者认为这一点对于国内的云服务商是一个可选的机会),此时 serverless 是一个不错的选择,只需一行命令即可充分利用缓存配置,对象存储服务,CDN 与自动 https 证书。

在上一章,我介绍到了 如何使用 serverless 部署第一个 koa 应用。对于一个后端(Node)项目使用 serverless 的方式要接收巨大的挑战,其中最大的挑战来自于传统的并已完善与成熟的架构。

而对于一个弱存储弱状态的 SSR 项目或者纯前端项目,通过 zeit 或者 netlify 部署是一个更好的选择,然而由于网络原因并不适用于国内。国内也无如 netlify 一样的前端快速部署方案(笔者认为这一点对于国内的云服务商是一个可选的机会),此时 serverless 是一个不错的选择,只需一行命令即可充分利用缓存配置,对象存储服务,CDN 与自动 https 证书。

本篇文章介绍如何使用 serverlss 开发第一个 SSR 应用。SSR,即 Server Side Render,服务端渲染为单页应用的 SEO 提供了一种更好的体验,同时,他对手游账号买号首屏优化也有极大提升。而 Next.js 无疑是服务端渲染框架中最璀璨的明珠。

这里是一个结合 ts 及 `` 快速部署到腾讯云函数计算中的模板。仓库见下

shfshanyue/serverless-template-zh: 中国云厂商 serverless framework 模板及示例 (更快的访问速度)
本篇文章来自于我的系列文章 有可能你不需要云服务器--如何更好地薅羊毛

如果你只想搭建一个博客
使用 Netlify 托管静态网站与持续集成
使用 AliOSS 部署及加速你的静态网站
Github Actions 持续集成简介及实践
Serverless 与 Serverless Framework
使用 serverless 开发第一个 Koa 应用
使用 serverless 开发第一个 Next 应用
快速使用
使用本模板快速创建应用

$ serverless install --url https://github.com/shfshanyue/serverless-template-zh/tree/master/tencent-next-helmet-ga --name next-app
复制代码
在项目创建早期尽可能对 package 进行升级,这里使用了 npm-check-updates

$ npm run ncu
复制代码
在测试环境中进行开发

$ npm run dev
复制代码
文件结构
.
├── node_modules/
├── pages/ # 所有的 pages
├── utils/
├── package.json
├── package-lock.json
├── README.md
└── serverless.yaml
复制代码
serverless component
serverless component 可以认为是把 faas 及 baas 资源集合的进一步抽象,该项目采用了 @serverless/tencent-next

next-app:
component: '@serverless/tencent-nextjs'
inputs:

functionName: nextjs-function
region: ap-guangzhou
runtime: Nodejs10.15
code: ./
functionConf:
  timeout: 60
  memorySize: 128
environment:
  variables:
    ENV: true
apigatewayConf:
  protocols:
    - http
    - https
  environment: release

复制代码
部署
部署之前需要准备好生产环境所需的 node_modules 以及编译完成的 js 资源。

编译静态文件

$ npm run build

部署到腾讯云

$ sls
next-app:

functionName:        nextjs-function
functionOutputs:
  ap-guangzhou:
    Name:        nextjs-function
    Runtime:     Nodejs10.15
    Handler:     serverless-handler.handler
    MemorySize:  128
    Timeout:     60
    Region:      ap-guangzhou
    Namespace:   default
    Description: This is a function created by serverless component
region:              ap-guangzhou
apiGatewayServiceId: service-r8i140rq
url:                 https://service-r8i140rq-1257314149.gz.apigw.tencentcs.com/release/
cns:                 (empty array)

240s › next-app › done

从日志可以看出,部署到腾讯云需要使用 4 分钟,而且这仅仅是一个 hello, world,不过现在国内的 serverless 还处于早期发展状态,这将在不久得到优化。

如果对于部署速度有所追求的话,可以使用 now.sh,仅需要 3s 就可以部署成功,now 以及 next 均处于一家公司旗下,对于 next 的部署有很大程度的优化。

缺点
这里是使用腾讯云目前部署 serverless 的一些缺点

部署过慢,node_modules 过大,导致上传时间过长
对于 SSR 项目,所有的静态资源相关的依赖可视为 devDep,对于这类库可以不上传,目前是全部上传,这也是部署过慢的原因
在本地不支持 log 及 metrics,需要转至腾讯云控制台查看

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
9天前
|
运维 Serverless 数据处理
Serverless架构通过提供更快的研发交付速度、降低成本、简化运维、优化资源利用、提供自动扩展能力、支持实时数据处理和快速原型开发等优势,为图像处理等计算密集型应用提供了一个高效、灵活且成本效益高的解决方案。
Serverless架构通过提供更快的研发交付速度、降低成本、简化运维、优化资源利用、提供自动扩展能力、支持实时数据处理和快速原型开发等优势,为图像处理等计算密集型应用提供了一个高效、灵活且成本效益高的解决方案。
36 1
|
13天前
|
监控 安全 Serverless
"揭秘D2终端大会热点技术:Serverless架构最佳实践全解析,让你的开发效率翻倍,迈向技术新高峰!"
【10月更文挑战第23天】D2终端大会汇聚了众多前沿技术,其中Serverless架构备受瞩目。它让开发者无需关注服务器管理,专注于业务逻辑,提高开发效率。本文介绍了选择合适平台、设计合理函数架构、优化性能及安全监控的最佳实践,助力开发者充分挖掘Serverless潜力,推动技术发展。
34 1
|
13天前
|
运维 监控 Serverless
Serverless架构在图像处理等计算密集型应用中展现了显著的优势
Serverless架构在图像处理等计算密集型应用中展现了显著的优势
26 1
|
24天前
|
存储 消息中间件 人工智能
ApsaraMQ Serverless 能力再升级,事件驱动架构赋能 AI 应用
本文整理自2024年云栖大会阿里云智能集团高级技术专家金吉祥的演讲《ApsaraMQ Serverless 能力再升级,事件驱动架构赋能 AI 应用》。
|
24天前
|
运维 Serverless 数据处理
Serverless架构通过提供更快的研发交付速度、降低成本、简化运维、优化资源利用、提供自动扩展能力、支持实时数据处理和快速原型开发等优势,为图像处理等计算密集型应用提供了一个高效、灵活且成本效益高的解决方案。
Serverless架构通过提供更快的研发交付速度、降低成本、简化运维、优化资源利用、提供自动扩展能力、支持实时数据处理和快速原型开发等优势,为图像处理等计算密集型应用提供了一个高效、灵活且成本效益高的解决方案。
56 3
|
25天前
|
运维 Serverless 数据处理
Serverless架构在图像处理等计算密集型应用中展现了显著的优势
Serverless架构在图像处理等计算密集型应用中展现出显著优势,包括加速研发交付、降低成本、零运维成本、高效资源利用、自动扩展、实时数据处理及快速原型开发,为高并发、动态需求场景提供高效解决方案。
47 1
|
30天前
|
运维 Serverless 数据处理
Serverless架构在图像处理等计算密集型应用中展现出显著优势
【10月更文挑战第6天】Serverless架构在图像处理等计算密集型应用中展现出显著优势,包括加速研发交付、成本效益、零运维成本、高效资源利用、自动扩展能力、实时数据处理及快速原型开发,为高并发、动态需求场景提供高效、灵活的解决方案。
46 4
|
30天前
|
监控 Serverless 云计算
探索Serverless架构:开发的未来趋势
【10月更文挑战第5天】Serverless架构,即无服务器架构,正逐渐成为云计算领域的热点。它允许开发者构建和运行应用程序而无需管理底层服务器。本文介绍了Serverless架构的基本概念、核心优势及挑战,并展示了其在事件驱动编程、微服务架构和数据流处理等场景中的应用。通过优化冷启动、使用外部存储等实战技巧,开发者可以更好地利用Serverless架构提升开发效率和应用性能。随着技术的成熟,Serverless将在未来软件开发中扮演重要角色。
|
2月前
|
人工智能 自然语言处理 Serverless
阿里云函数计算 x NVIDIA 加速企业 AI 应用落地
阿里云函数计算与 NVIDIA TensorRT/TensorRT-LLM 展开合作,通过结合阿里云的无缝计算体验和 NVIDIA 的高性能推理库,开发者能够以更低的成本、更高的效率完成复杂的 AI 任务,加速技术落地和应用创新。
143 13
|
3月前
|
机器学习/深度学习 机器人 Serverless
FaaS 的应用场景
FaaS 的应用场景

热门文章

最新文章

相关产品

  • 函数计算
  • 下一篇
    无影云桌面