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

m1.jpg

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

函数计算(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 是否安装成功。

快速开始

  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://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 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践,做最懂云原生开发者的技术圈。”

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker rabbitmq:3.9.10-management

文章目录一、入门试炼1. 快速入门2. 创建容器二、自定义配置2.1. 配置目录2.2. 拷贝配置2.3. 指定参数2.4. 自定义配置22.5. 启动容器一、入门试炼 1. 快速入门 # docker hub 搜索rabbitmq 选择版本 注意:3.9.10-management 内置控制台3.9.10 无控制台# 运行rabbi…

《我想进大厂》之 MYSQL 夺命连环13问

来源 | 科技缪缪想进大厂,mysql不会那可不行,来接受mysql面试挑战吧,看看你能坚持到哪里?能说下 myisam 和 innodb 的区别吗?myisam引擎是5.1版本之前的默认引擎,支持全文检索、压缩、空间函数等&#xff0…

心动网络:PolarDB助力心动网络打造爆款手游

公司介绍 心动网络,国内极具知名度的游戏公司,中国互联网百强企业。旗下业务涉及游戏研发运营、动画制作、偶像娱乐等多个产业。公司创立于2002年,前身为中国最早的互联网分享网站之一的VeryCD。2009年起,公司开始打造心动网络的…

Vue文件在VsCode工具中红色波浪线的问题解决方法

在setting.json种添加 "vetur.validation.template": false, //vue文件取消波浪线

docker tomcat:9.0

docker run \ -d \ --name tomcat \ -p 8080:8080 \ -v /app/tomcat/webapps:/usr/local/tomcat/webapps \ tomcat:9.0

数云:PolarDB助力数云轻松应对双十一

公司介绍 我们杭州数云信息技术有限公司成立于2011年,伴随着电子商务、大数据应用和零售企业互联网化的趋势快速发展,目前已成为国内领先的数据化营销软件产品和服务提供商。我们致力于为消费品牌和零售品牌商提供整合软件产品、数据模型和专业服务的一…

点触科技:构建实时计算和数据仓库解决方案

公司介绍 厦门点触科技股份有限公司,新三板挂牌企业(股票代码:870702),成立于2013年,是一家以历史养成类游戏研发与发行为主,专业从事手机游戏的策划、研发制作、商业化运营的创新型发展公司。…

定位云原生数据中台,「智领云」获数千万元A轮融资

来源 | 智领云科技据消息,「智领云」获金沙江联合资本领投,线性资本跟投的数千万元A轮融资。本轮融资将主要用于市场拓展和产品线完善。此前,智领云在2019年5月获得线性资本千万级人民币Pre-A轮融资。智领云成立于2016年,是一家数…

docker elasticsearch:7.14.2

参考文档 hub.docker文档:https://hub.docker.com/_/elasticsearch # 说明:容器中生成索引数据存储位置为:/usr/share/elasticsearch/data运行es容器 docker run \ -d \ --name es-temp \ -e "discovery.typesingle-node" \ -p 9…

Vue3 --- 使用vue-element-admin

1.下载 vue-element-admin,并启动 官方:https://github.com/PanJiaChen/vue-element-admin 2. 安装依赖 npm install 3. 启动 npm run dev 安装过程有些慢,别急!

写给大家看的“不负责任” K8s 入门文档

作者 | 邓青琳(轻零) 阿里巴巴技术专家 导读:本文转载自阿里巴巴技术专家邓青琳(轻零)在内部的分享,他从阿里云控制台团队转岗到 ECI 研发团队(Serverless Kubernetes 背后的实现基石),从零开…

腾讯智慧交通战略重磅升级 打造以人为中心的未来交通

在新基建加速布局下,智慧交通正在成为新基建的主力军,不仅可以助力新基建与传统基建融合,还将推动智慧城市建设,推动我国实现“交通大国”向“交通强国”的升级。9月10日,腾讯全球数字生态大会智慧交通分论坛云上召开&…

docker kibana:7.14.2

运行容器 docker run \ -d \ --name kibana \ -e "ELASTICSEARCH_HOSTShttp://192.168.92.129:9200" \ -p 5601:5601 \ kibana:7.14.2ik分词 # 测试ik分词器,只能分词法 GET _analyze?pretty {"analyzer": "ik_smart","text": "…

GitHub 标星 11000+,阿里开源微服务如何连续 10 年扛住双十一大促

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 作者 | 宿何,阿里云高级开发工程师 责编 | 唐小引 封图 | CSDN 下载自东方 IC 出品 | CSDN(ID&#x…

Vue3 --- Vite快速创建Vue项目

npm 命令 npm init vite-app 项目名称

轻松构建基于 Serverless 架构的弹性高可用音视频处理系统

作者 | 罗松(西流) 阿里巴巴技术专家 本文整理自架构师成长系列 2 月 12 日直播课程。 关注“阿里巴巴云原生”公众号,回复 “212”,即可获取对应直播回放链接及 PPT 下载链接。 前言 随着计算机技术和 Internet 的日新月异,视频点播技…

亚马逊云服务(AWS)中国与毕马威中国建立战略合作伙伴关系

2020年9月10日,亚马逊通技术服务(北京)有限公司(AWS中国)与毕马威企业咨询(中国)有限公司(毕马威中国)宣布已签署战略合作协议。 双方将充分利用各自的全球品牌影响力和资…

Vue3 --- vue-router4 编程导航

需求:简单实现登录页,点击登录按钮调转指定的页面 1. import { useRouter } from vue-router // 页面引入路由 2. setup(){ const router useRouter() // 定义路由 const login () >{ //点击登录按钮 router.push(/home) // 实现路由调…

学不动?Apache Member 教你评估实用技术的思路

导读:笔者从 2008 年开始工作到现在也有 11 个年头了,一路走来都在和数据打交道,做过很多大数据底层框架内核的开发 ( Hadoop,Pig,Tez,Spark,Livy ),现在是多个 Apache 项目的 PMC。…

docker sonarqube:7.7-community

创建挂载目录权限 mkdir /app/sonarqube/logs /app/sonarqube/conf /app/sonarqube/data /app/sonarqube/extensions -p chmod -R 777 /app/sonarqube/运行容器 docker run -d --name sonar -p 9090:9000 \-e ALLOW_EMPTY_PASSWORDyes \-e SONARQUBE_DATABASE_USERroot \-e S…