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

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

函数计算（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 应用移植相关文章：

• 开发函数计算的正确姿式——移植 Express
• 移植 express.js 应用到函数计算
• next.js 运行在 express 中

如今，咱们提供了一个 fun 模块，经过该模板，三分钟就可让 next.js 应用在函数计算中运行起来。效果以下：

快速开始

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 应用了。

相关连接

• Fun Init 自定义模板
• 移植 express.js 应用到函数计算
• 开发函数计算的正确姿式——移植 Express
• 开发函数计算的正确姿式 —— 使用 Fun Init 初始化项目
• next.js 运行在 express 中

---

本文做者：木香丘

阅读原文

本文为云栖社区原创内容，未经容许不得转载。