开发函数计算的正确姿势 —— 移植 next.js 服务端渲染框架

本文涉及的产品
简介: 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。

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

函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考
Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件(template.yml),协助您进行开发、构建、部署操作。Fun 的更多文档 参考
2.0 版本的 Fun,在部署这一块做了很多努力,并提供了比较完善的功能,能够做到将云资源方便、平滑地部署到云端。但该版本,在本地开发上的体验,还有较多的工作要做。于是,我们决定推出 Fun Init 弥补这一处短板。
Fun Init: Fun Init 作为 Fun 的一个子命令存在,只要 Fun 的版本大于等于 2.7.0,即可以直接通过 fun init 命令使用。Fun Init 工具可以根据指定的模板快速的创建函数计算应用,快速体验和开发函数计算相关业务。官方会提供常用的模板,用户也可以自定自己的模板。

背景

next.js 是一种 React 的服务端渲染框架,且 next.js 集成度极高,框架自身集成了 webpack、babel、express 等,使得开发者可以仅依赖 next、react、react-dom 就可以非常方便的构建自己的 SSR React 应用,开发者甚至都不用像以前那样关心路由。


next.js 的高度集成性,使得我们很容易就能实现代码分割、路由跳转、热更新以及服务端渲染和前端渲染。


next.js 可以与 express、koa 等服务端结合使用。为了能让 next.js 在函数计算运行,首先需要让 next.js 
在 express 中运行起来,然后再移植 express 到函数计算中运行。express 应用移植相关文章:

现在,我们提供了一个 fun 模块,通过该模板,三分钟就可以让 next.js 应用在函数计算中运行起来。效果如下:

nextjs

快速开始

1. 安装 node

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 8

2. 安装 fun 工具

npm install @alicloud/fun -g

fun 工具的某些子命令可能会用到 docker,所以你需要安装好 docker,具体参考文档:Fun 安装教程

3. 通过 fun 模板生成项目

fun init -n demo https://github.com/muxiangqiu/fc-next-nodejs8.git

项目生成好后,在根目录下有个 README.md 文件,阅读该文件可以帮你快速了解项目骨架为你做了什么,以及相关的命令。具体详情:README.md

4. 安装依赖

cd demo # 切换到项目根下面,后面的所有命令,都是在项目根下面执行
npm install

5. 本地运行 next.js

npm run dev

6. 编译 next.js 

npm run build

7. next.js 在本地函数中运行

npm run start

8. 部署函数到云端

部署函数的时候需要用到 AK 等下信息,可以通过 fun config 来配置,如果配置过请忽略,部署函数命令如下:

npm run deploy

小结

该模板默认提供的是 http 触发器方式触发函数,同时也提供了 API 网关方式触发函数,只是与 API 网关的代码被注释掉了而已,其中,template.yml 文件与 API 网关相关的配置也被注释掉了。在模板项目中,提供了两个比较重要的文件:server.js 和 fc.js。server.js 负责 next.js 与 express 对接;fc.js 负责 express 与 express 对接。这两个文件一般情况下不需要修改。接下来,你就可以按照 next.js 标准方式开发 next.js 应用了。

相关链接

相关实践学习
基于函数计算一键部署掌上游戏机
本场景介绍如何使用阿里云计算服务命令快速搭建一个掌上游戏机。
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
14天前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
1天前
|
JavaScript Java 测试技术
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
6 1
|
1天前
|
JavaScript Java 测试技术
基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
9 1
|
2天前
|
Web App开发 JavaScript 前端开发
构建高效Web API:使用Node.js与Express框架
构建高效Web API:使用Node.js与Express框架
6 0
|
2天前
|
JavaScript Java 测试技术
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
10 0
|
8天前
|
IDE JavaScript 开发工具
Auto.js 开发入门
Auto.js 开发入门
|
8天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
30 0
|
12天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
40 3
|
12天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
17 0
|
13天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例

热门文章

最新文章

相关产品

  • 函数计算