【手把手】Midway Serverless + React 实践

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 结合官方教程,Midway Serverless + React 实操

一、安装 @midwayjs/faas-cli 工具。

npm i @midwayjs/faas-cli -g

二、生成示例代码

f create --template-package=@midwayjs-examples/faas-with-react

终端输出如下:

Generating boilerplate...
√ The directory where the service should be created · my_new_serverless

1...
2...
3...
Enjoy it...

Successfully generated boilerplate for template: "@midwayjs-examples/faas-with-react"

Usage:
    - cd my_new_serverless
    - npm install
    - npm run test
    - and read README.md

Document ❤ Star: https://github.com/midwayjs/midway

记得在vscode安装 alibaba midway 研发助手Midway Serverless 研发助手

midway 研发助手

语雀/Alibaba MidwayJs Team/Midway Serverless 使用文档/React 一体化项目

三、安装依赖并运行

npm install
npm run dev

四、部署

f deploy

需要注意的是,第一次部署需要配置 Aliyun Account ID、Access Key Id、Access Key Secret 等
配置项如下:
在这里插入图片描述
如果报错如下:

FC service is not enabled for current user. Please enable FC service before using fun.
You can enable FC service on this page https://www.aliyun.com/product/fc 

在这里插入图片描述
那是你没有开通阿里云函数计算服务,到 此链接-函数计算 开通即可

显示如下即部署成功:
在这里插入图片描述
但实际上你访问提示信息里给的链接时,实际上是触发了文件下载,这是由于阿里云默认提供的域名为了避免网络黑灰产等情况,直接通过浏览器访问会自动添加下载header,表现出来的行为就是下载了一个文件。

五、域名设置

如果要部署为可以正常访问的站点或接口,那么需要在f.yml里面配置您的域名,配置规范如下

custom:
  customDomain:
    domainName: 'example.com'

由于国内个人域名要求备案,因此选择部署区域为国内(如 cn-hangzhou / cn-zhangjiakou )等,所配置的域名均需要备案。

如果您的域名没有备案,请选择部署到 cn-hongkong 等非大陆区域。

如上配置成功后,先不着急执行f deploy部署,
因为如果你直接部署的话,不出意外你会报错如下:

domain name 你配置的域名 has not been resolved to your FC endpoint, the expected endpoint is '%s'

这是因为你的域名没有设置CNAME到指定的Endpoint

当然你也可能报错如下:

domain name 你配置的域名 has not got ICP license, or the ICP license does not belong to Aliyun

这是因为你的域名没有备案,或备案未接入阿里云。

所以

你还需要在在域名解析里配置域名CNAME指向刚刚部署成功给出的域名,如下所示:
在这里插入图片描述

至此,大功告成!
访问自有域名即可成功查看部署项目!

更多内容请查看官方文档:语雀-midwayjs

最后,7-25 阿里淘系 midway 技术团队在上海召开了 workshop 沙龙,庆祝自己参加了人生第一个沙龙~
并签到获取了 Alibaba T恤 一件~
撒花~ ★,°:.☆( ̄▽ ̄)/$:.°★

对了,已经部署成功的服务可以在阿里云函数计算找到哦~
无论是监控还是部署都及其简单!
serverless 就是这样腻害!

相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
目录
相关文章
|
2月前
|
运维 监控 Cloud Native
【云故事探索】NO.17:国诚投顾的云原生 Serverless 实践
国诚投顾携手阿里云,依托Serverless架构实现技术全面升级,构建高弹性、智能化技术底座,提升业务稳定性与运行效率。通过云原生API网关、微服务治理与智能监控,实现流量精细化管理与系统可观测性增强,打造安全、敏捷的智能投顾平台,助力行业数字化变革。
【云故事探索】NO.17:国诚投顾的云原生 Serverless 实践
|
4月前
|
前端开发 JavaScript 流计算
React 18 流式渲染:解锁极致性能优化实践
React 18 流式渲染:解锁极致性能优化实践
299 80
|
2月前
|
运维 监控 Cloud Native
【云故事探索】NO.17:国诚投顾的云原生 Serverless 实践
通过与阿里云深度合作,国诚投顾完成了从传统 ECS 架构向云原生 Serverless 架构的全面转型。新的技术架构不仅解决了原有系统在稳定性、弹性、运维效率等方面的痛点,还在成本控制、API 治理、可观测性、DevOps 自动化等方面实现了全方位升级。
|
3月前
|
前端开发 JavaScript 编译器
React编程新手入门实践教程
本书深入解析React核心思想与设计哲学,涵盖组件化思维、虚拟DOM原理及JSX本质,探讨函数组件与类组件特性,详解状态管理、生命周期控制及事件处理机制,帮助开发者掌握高效构建用户界面的技巧。
88 0
|
6月前
|
存储 运维 Serverless
千万级数据秒级响应!碧桂园基于 EMR Serverless StarRocks 升级存算分离架构实践
碧桂园服务通过引入 EMR Serverless StarRocks 存算分离架构,解决了海量数据处理中的资源利用率低、并发能力不足等问题,显著降低了硬件和运维成本。实时查询性能提升8倍,查询出错率减少30倍,集群数据 SLA 达99.99%。此次技术升级不仅优化了用户体验,还结合AI打造了“一看”和“—问”智能场景助力精准决策与风险预测。
557 69
|
5月前
|
JSON 前端开发 算法
掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
312 23
|
12月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
800 2
|
6月前
|
Cloud Native Serverless 流计算
云原生时代的应用架构演进:从微服务到 Serverless 的阿里云实践
云原生技术正重塑企业数字化转型路径。阿里云作为亚太领先云服务商,提供完整云原生产品矩阵:容器服务ACK优化启动速度与镜像分发效率;MSE微服务引擎保障高可用性;ASM服务网格降低资源消耗;函数计算FC突破冷启动瓶颈;SAE重新定义PaaS边界;PolarDB数据库实现存储计算分离;DataWorks简化数据湖构建;Flink实时计算助力风控系统。这些技术已在多行业落地,推动效率提升与商业模式创新,助力企业在数字化浪潮中占据先机。
360 12
|
8月前
|
Kubernetes 监控 Serverless
基于阿里云Serverless Kubernetes(ASK)的无服务器架构设计与实践
无服务器架构(Serverless Architecture)在云原生技术中备受关注,开发者只需专注于业务逻辑,无需管理服务器。阿里云Serverless Kubernetes(ASK)是基于Kubernetes的托管服务,提供极致弹性和按需付费能力。本文深入探讨如何使用ASK设计和实现无服务器架构,涵盖事件驱动、自动扩展、无状态设计、监控与日志及成本优化等方面,并通过图片处理服务案例展示具体实践,帮助构建高效可靠的无服务器应用。

相关产品

  • 函数计算