【手把手】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 就是这样腻害!

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
4月前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
187 1
|
3月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
294 2
|
17天前
|
负载均衡 Serverless 持续交付
云端问道9期实践教学-省心省钱的云上Serverless高可用架构
详细介绍了云上Serverless高可用架构的一键部署流程
45 10
|
30天前
|
人工智能 Serverless API
尽享红利,Serverless构建企业AI应用方案与实践
本次课程由阿里云云原生架构师计缘分享,主题为“尽享红利,Serverless构建企业AI应用方案与实践”。课程分为四个部分:1) Serverless技术价值,介绍其发展趋势及优势;2) Serverless函数计算与AI的结合,探讨两者融合的应用场景;3) Serverless函数计算AIGC应用方案,展示具体的技术实现和客户案例;4) 业务初期如何降低使用门槛,提供新用户权益和免费资源。通过这些内容,帮助企业和开发者快速构建高效、低成本的AI应用。
74 12
|
1月前
|
Serverless 开发工具 开发者
活动实践 | 西游再现,函数计算一键部署 Flux 超写实文生图模型部署
这些图片展示了阿里巴巴云开发者生态的多个方面,包括开发工具、技术文档、社区交流、培训认证等内容,旨在为开发者提供全方位的支持和服务。
|
1月前
|
存储 弹性计算 关系型数据库
活动实践 | 告别资源瓶颈,函数计算驱动多媒体文件处理测评
本方案介绍了一种高效处理文件的方法,适用于企业办公和社交媒体应用。通过阿里云的函数计算、对象存储OSS和轻量消息队列,实现文件的异步处理,如格式转换和水印添加,有效减轻了核心应用的负担,提高了业务稳定性和资源利用率。方案包括云服务器ECS、云数据库RDS、OSS存储等组件,支持快速部署和资源清理。
|
2月前
|
监控 Serverless 云计算
探索Serverless架构:开发实践与优化策略
本文深入探讨了Serverless架构的核心概念、开发实践及优化策略。Serverless让开发者无需管理服务器即可运行代码,具有成本效益、高可扩展性和提升开发效率等优势。文章还详细介绍了函数设计、安全性、监控及性能和成本优化的最佳实践。
|
2月前
|
弹性计算 算法 搜索推荐
活动实践 | 通过函数计算部署ComfyUI以实现一个AIGC图像生成系统
ComfyUI是基于节点工作流稳定扩散算法的新一代WebUI,支持高质量图像生成。用户可通过阿里云函数计算快速部署ComfyUI应用模板,实现个性化定制与高效服务。首次生成图像因冷启动需稍长时间,之后将显著加速。此外,ComfyUI允许自定义模型和插件,满足多样化创作需求。
|
2月前
|
弹性计算 自然语言处理 搜索推荐
活动实践 | 基于函数计算部署GPT-Sovits模型实现语音生成
通过阿里云函数计算部署GPT-Sovits模型,可快速实现个性化声音的文本转语音服务。仅需少量声音样本,即可生成高度仿真的语音。用户无需关注服务器维护与环境配置,享受按量付费及弹性伸缩的优势,轻松部署并体验高质量的语音合成服务。
|
2月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践

相关产品

  • 函数计算