【手把手】Midway Serverless + React 实践

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
函数计算FC,每月15万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 架构模式
目录
相关文章
|
14天前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
66 1
|
22天前
|
运维 Kubernetes 前端开发
拥抱Knative, 合思加速Serverless化演进实践
合思信息基于阿里云容器服务Knative, 实现Serverless化演进的最佳实践。
拥抱Knative, 合思加速Serverless化演进实践
|
5天前
|
前端开发 JavaScript UED
深入React Hooks与性能优化实践
深入React Hooks与性能优化实践
11 0
|
1月前
|
弹性计算 关系型数据库 Serverless
函数计算驱动多媒体文件处理:高效、稳定与成本优化实践
本次测评的解决方案《告别资源瓶颈,函数计算驱动多媒体文件处理》展示了如何利用阿里云函数计算高效处理多媒体文件。文档结构清晰、内容详实,适合新客户参考。方案提供了一键部署与手动部署两种方式,前者简便快捷,后者灵活性高但步骤较多。通过部署,用户可体验到基于函数计算的文件处理服务,显著提升处理效率和系统稳定性。此外,测评还对比了应用内处理文件与函数计算处理文件的不同,突出了函数计算在资源管理和成本控制方面的优势。
22703 19
|
1月前
|
运维 Kubernetes Serverless
Serverless Argo Workflows荣获信通院标杆实践案例,引领大规模离线任务处理新方法
阿里云容器服务Serverless Argo Workflows大规模离线计算工作流平台荣获2024信通院Serveless实践标杆案例。本文介绍其应用场景、平台特性以及领域实践。
|
2月前
|
分布式计算 Java Serverless
EMR Serverless Spark 实践教程 | 通过 spark-submit 命令行工具提交 Spark 任务
本文以 ECS 连接 EMR Serverless Spark 为例,介绍如何通过 EMR Serverless spark-submit 命令行工具进行 Spark 任务开发。
367 7
EMR Serverless Spark 实践教程 | 通过 spark-submit 命令行工具提交 Spark 任务
|
1月前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发:技术探索与实践
【8月更文挑战第10天】React Native以其跨平台、高性能、易学习等优势,在移动开发领域取得了显著的成果。通过合理使用React Native,开发者可以更加高效地开发出高质量、低成本的移动应用。然而,在享受React Native带来的便利的同时,我们也需要关注其潜在的挑战和限制,并通过不断学习和实践来提升我们的开发能力。
|
28天前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
20 0
|
28天前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
27 0
|
28天前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
31 0

相关产品

  • 函数计算