【手把手】Midway Serverless + React 实践

本文涉及的产品
简介: 结合官方教程,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 就是这样腻害!

相关实践学习
基于函数计算一键部署掌上游戏机
本场景介绍如何使用阿里云计算服务命令快速搭建一个掌上游戏机。
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
3月前
|
人工智能 NoSQL Serverless
基于函数计算3.0 Stable Diffusion Serverless API 的AI艺术字头像生成应用搭建与实践的报告
本文主要分享了自己基于函数计算3.0 Stable Diffusion Serverless API 的AI艺术字头像生成应用搭建与实践的报告
477 6
基于函数计算3.0 Stable Diffusion Serverless API 的AI艺术字头像生成应用搭建与实践的报告
|
4月前
|
前端开发 开发者
探索前端框架的新趋势:React Hooks的应用与实践
本文将深入探讨前端开发中的新趋势,重点介绍React Hooks的应用与实践。通过学习和使用React Hooks,开发者可以更高效地构建可维护、可扩展的前端应用程序。本文将详细介绍React Hooks的原理、优势以及如何在实际项目中运用Hooks来提高开发效率并改善代码结构。无论你是刚入门前端开发还是经验丰富的工程师,本文都将对你有所启发。
|
8月前
|
存储 运维 Serverless
【函数计算实践】一个应用案例
本文起源于一个用户匹配的需求。用户的不同信息分布于两个系统,且客观上无法直接打通(不必纠结具体是什么场景,这是真实存在,且非技术上能解决的),所以就涉及到两个系统id匹配的问题。
218 0
|
3月前
|
前端开发 JavaScript API
React拖拽实践
React拖拽实践
24 0
|
8月前
|
编解码 人工智能 运维
课时9:典型案例2:函数计算在音视频场景实践(三)
典型案例2:函数计算在音视频场景实践
500 0
|
5月前
|
运维 中间件 Java
淘宝权益玩法平台的Serverless化实践
淘宝权益玩法平台的Serverless化实践
231 0
|
5月前
|
SQL 弹性计算 运维
畅捷通的 Serverless 探索实践之路
畅捷通的 Serverless 探索实践之路
|
5月前
|
SQL 弹性计算 运维
畅捷通的 Serverless 探索实践之路
畅捷通非 Serverless 架构向 Serverless 架构转型,提高了5个核心运行稳定性,同时管理简化运维工作,真正的提升系统资源利用率。
128888 1
畅捷通的 Serverless 探索实践之路
|
6月前
|
存储 资源调度 前端开发
如何高效学习React:探索React的魅力与实践
React作为目前最受欢迎的前端框架之一,具有强大的性能和灵活的组件化开发方式,是每个前端开发者必须掌握的技能之一。本文将介绍一些学习React的有效方法,帮助读者快速入门并掌握React的核心概念与实践。
|
7月前
|
人工智能 运维 Serverless
基于函数计算模板部署AI应用实践
在本实验场景中,将向大家介绍如何基于阿里云函数计算FC服务部署Stable Diffusion实现文字到图片的生成;以及部署ImageAI 目标检测应用,对现有图片内容进行检测。

热门文章

最新文章

相关产品

  • 函数计算