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

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

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

背景

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

环境准备

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

快速开始

创建一个 Next 项目，这里以 nextjs 为例：

npm init next-app

进入到刚刚创建的示例项目中：

cd nextjs

本地运行测试该示例：

npm run dev 或者 yarn dev

效果如下：

编译 nextjs 项目：

npm run build

部署项目到函数计算：
仅需要一个命令fun deploy，Fun 会自动进入部署流程，在该流程中，用户仅仅需要按下一系列的回车即可。流程细节如下：

1. Fun 检测到这不是一个 Fun 项目，会提示协助创建（直接回车或者输入 y 即可）:![20200313105720.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584068254790-8f53c8aa-bcb5-4f91-9160-a028bbb9b13a.jpeg)
2.     Fun 项目自动创建成功，提示是否进行部署？可以直接回车，或者输入 y 进行确认：![20200313111040.jpg](https://intranetproxy.alipay.com/skylark/lark/0/2020/jpeg/200393/1584069057784-57021e01-287a-4169-9237-22a65984ced2.jpeg)
3.  然后 Fun 会直接将应用部署到线上了。![20200313111259.jpg](https://intranetproxy.alipay.com/skylark/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 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践，做最懂云原生开发者的技术圈。”

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

快速迁移Next.js应用到函数计算相关推荐

快速迁移 Next.js 应用到函数计算
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准备计 ...
计算机符串长度的函数,用js写一个函数,计算出字符串的长度
// GBK字符集实际长度计算function getStrLeng(str){ var realLength = 0; var len = str.length; var charCode = -1 ...
开发函数计算的正确姿势 —— 移植 next.js 服务端渲染框架
为什么80%的码农都做不了架构师?>>> 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算 ...
迁移 Express 到函数计算
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准备计 ...
快速部署 Spring PetClinic 到函数计算平台
简介首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):[函数计算](https://statistics.functioncompute.com/?title ...
基于函数计算快速实现《为你写诗》（阿里云ECS）
简介通过简单的几行指令,部署一个自己的表白神器,用技术为心爱的人写诗,将诗句,整理成图片,发送给心爱的Ta. 阿里云体验实验室地址(尚未购买ECS可在此处体验) https://developer. ...
Python Flask web 项目零改动迁移至阿里云函数计算
引言最近尝试了一下阿里云的函数计算,整体感觉很好,主要是省钱!下面就简单聊一下,如何将 Python Flask 的 web 项目迁移至函数计算. 创建一个银行卡校验的 RestAPI 文件名:in ...
异步请求积压可视化｜如何 1 分钟内快速定位函数计算积压问题
作者 | 千风本文分为三个部分:概述中引入了积压问题,并介绍了函数计算异步调用基本链路:并在指标介绍部分详细介绍了指标查看方式,分类解读了不同的指标含义:最后以一个常见的异步请求积压场景为例,介绍如 ...
迁移 Spring Boot 到函数计算
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准备计 ...

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

背景

环境准备

快速开始

总结

快速迁移Next.js应用到函数计算相关推荐

最新文章

热门文章