快速迁移 Next.js 应用到函数计算

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
任务调度 XXL-JOB 版免费试用,400 元额度,开发版规格
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
简介: 本文演示了如何快速从零开始搭建一个 Serverless 的 Next.js 的博客应用。

m1.jpg

首先介绍下在本文出现的几个比较重要的概念:

函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考
Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件(template.yml),协助您进行开发、构建、部署操作。Fun 的更多文档 参考

备注: 本文介绍的技巧需要 Fun 版本大于等于 3.7.0。

2

背景

Next.js 是一种 React 的服务端渲染框架,且 Next.js 集成度极高,框架自身集成了 webpack、babel、express 等,使得开发者可以仅依赖 Next、react、react-dom 就可以非常方便的构建自己的 SSR React 应用,开发者甚至都不用像以前那样关心路由。
Next.js 的高度集成性,使得我们很容易就能实现代码分割、路由跳转、热更新以及服务端渲染和前端渲染。

环境准备

首先按照 Fun 的 安装文档 里介绍的方法将 Fun 安装到本机。
PS: 本文介绍的方法,不需要安装 Docker,仅仅安装 Fun 即可,最简单的方式就是直接下载可执行的二进制文件。
安装完成后,可以执行 fun --version 检查 Fun 是否安装成功。

快速开始

  1. 创建一个 Next 项目,这里以 nextjs 为例:
npm init next-app
  1. 进入到刚刚创建的示例项目中:
cd nextjs
  1. 本地运行测试该示例:
npm run dev 或者 yarn dev

效果如下:
20200313103411.jpg

  1. 编译 nextjs 项目:
npm run build
  1. 部署项目到函数计算:
    仅需要一个命令fun deploy,Fun 会自动进入部署流程,在该流程中,用户仅仅需要按下一系列的回车即可。流程细节如下:
1. Fun 检测到这不是一个 Fun 项目,会提示协助创建(直接回车或者输入 y 即可):
    ![20200313105720.jpg](https://ucc.alicdn.com/images/lark/0/2020/jpeg/200393/1584068254790-8f53c8aa-bcb5-4f91-9160-a028bbb9b13a.jpeg) 
2.     Fun 项目自动创建成功,提示是否进行部署?可以直接回车,或者输入 y 进行确认:
  ![20200313111040.jpg](https://ucc.alicdn.com/images/lark/0/2020/jpeg/200393/1584069057784-57021e01-287a-4169-9237-22a65984ced2.jpeg) 
3.  然后 Fun 会直接将应用部署到线上了。
    ![20200313111259.jpg](https://ucc.alicdn.com/images/lark/0/2020/jpeg/200393/1584069191767-2e544c50-a331-4dc3-9b45-f260f6447801.jpeg) 
部署完成后,我们可以根据部署成功的日志看到,函数计算为我们生成了临时域名 14069166-1986114430573743.test.functioncompute.com,我们可以通过这个临时域名直接访问我们刚刚部署的应用。
**注意:临时域名仅仅用作演示以及开发,是有时效的,如果用作生产,请绑定已经备案的域名,绑定自定义域名可以参考 [详情](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E8%BF%81%E7%A7%BB%20Next.js%20%E5%BA%94%E7%94%A8%E5%88%B0%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97&author=%E7%94%B0%E5%B0%8F%E5%8D%95&src=&url=https%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F90722.html)**

总结

本文主要介绍了如何将 Next.js 应用部署到函数计算。相比较与传统的部署方法,不仅没有更复杂,还省略了购买机器等步骤。实现,将传统的 Next.js 应用在本地开发完成后,一键部署到远端直接用于生产,并拥有了弹性伸缩、按量付费、免运维等特性。

阿里巴巴云原生关注微服务、Serverless、容器、Service Mesh 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践,做最懂云原生开发者的技术圈。”

相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
9天前
|
存储 人工智能 Serverless
函数计算进化之路:AI 应用运行时的状态剖析
AI应用正从“请求-响应”迈向“对话式智能体”,推动Serverless架构向“会话原生”演进。阿里云函数计算引领云上 AI 应用 Serverless 运行时技术创新,实现性能、隔离与成本平衡,开启Serverless AI新范式。
174 12
|
2月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
71 0
|
4月前
|
存储 编解码 Serverless
Serverless架构下的OSS应用:函数计算FC自动处理图片/视频转码(演示水印添加+缩略图生成流水线)
本文介绍基于阿里云函数计算(FC)和对象存储(OSS)构建Serverless媒体处理流水线,解决传统方案资源利用率低、运维复杂、成本高等问题。通过事件驱动机制实现图片水印添加、多规格缩略图生成及视频转码优化,支持毫秒级弹性伸缩与精确计费,提升处理效率并降低成本,适用于高并发媒体处理场景。
218 0
|
4天前
|
人工智能 运维 安全
聚焦 AI 应用基础设施,云栖大会 Serverless AI 全回顾
2025 年 9 月 26 日,为期三天的云栖大会在杭州云栖小镇圆满闭幕。随着大模型技术的飞速发展,我们正从云原生时代迈向一个全新的 AI 原生应用时代。为了解决企业在 AI 应用落地中面临的高成本、高复杂度和高风险等核心挑战,阿里云基于函数计算 FC 发布一系列重磅服务。本文将对云栖大会期间 Serverless+AI 基础设施相关内容进行全面总结。
|
4天前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
46 3
|
15天前
|
人工智能 Kubernetes 安全
重塑云上 AI 应用“运行时”,函数计算进化之路
回顾历史,电网的修建,深刻地改变了世界的经济地理和创新格局。今天,一个 AI 原生的云端运行时的进化,其意义也远不止于技术本身。这是一次设计哲学的升华:从“让应用适应平台”到“让平台主动理解和适应智能应用”的转变。当一个强大、易用、经济且安全的 AI 运行时成为像水电一样的基础设施时,它将极大地降低创新的门槛。一个独立的开发者、一个小型创业团队,将有能力去创造和部署世界级的 AI 应用。这才是技术平权的真谛,是激发全社会创新潜能的关键。
|
2月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
86 0
|
5月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
129 3
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
242 2
|
11月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
163 1
JavaScript中的原型 保姆级文章一文搞懂