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

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: 本文演示了如何快速从零开始搭建一个 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 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践,做最懂云原生开发者的技术圈。”

相关实践学习
基于函数计算一键部署掌上游戏机
本场景介绍如何使用阿里云计算服务命令快速搭建一个掌上游戏机。
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
1月前
|
人工智能 Serverless 测试技术
nacos常见问题之Serverless 应用引擎2.0不支持 MSE nacos如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
23 0
|
1月前
|
监控 Serverless 数据库
Serverless 应用引擎常见问题之biphon-education-配置了SLS后一直重启如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
28 5
|
1月前
|
运维 Serverless 调度
Serverless 应用引擎常见问题之事件中心看不着如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
33 4
|
1月前
|
监控 关系型数据库 Serverless
Serverless 应用引擎常见问题之工作流这执行输出通过jsonpath过滤如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
391 3
|
10天前
|
人工智能 Serverless 数据处理
利用阿里云函数计算实现 Serverless 架构的应用
阿里云函数计算是事件驱动的Serverless服务,免服务器管理,自动扩展资源。它降低了基础设施成本,提高了开发效率,支持Web应用、数据处理、AI和定时任务等多种场景。通过实例展示了如何用Python实现图片压缩应用,通过OSS触发函数自动执行。阿里云函数计算在云计算时代助力企业实现快速迭代和高效运营。
46 0
|
11天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
30天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
14 1
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
3天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1

相关产品

  • 函数计算