给应用接上后端存储能力

云开发平台官网:https://workbench.aliyun.com/

往期文章:
​​​阿里云-云开发平台普及篇——创建应用​​​​阿里云-云开发平台入门篇——静态网站的全生命周期实战​

案例一:用RDS数据库实现Todolist

阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发

1. 资源准备

  • 创建vpc
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_02

  • 填写vpc名称和交换机名称,选一下可用区即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_03

  • 创建成功后如下
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_04

  • 实例创建
    点击刚才创建的vpc管理按钮,然后点击RDS实例就可以跳转到RDS控制台
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_05


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_06


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_07

  • 这里计费方式我们选择​​按量计费​​就好了,部署方案选择单可用区部署,实例规格选择最便宜的就好了
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_08

  • 然后进行实例配置,选择我们刚才创建的VPC,这里选择可用区的时候发现没有,我们看到下面可用区配置是H,我们创建的交换机可用区是B,可以重新创建一个可用区H的交换机(需要把上面创建的交换机先删除掉)
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_09


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_10


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_11


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_12

  • 刷新一下就可以看到刚才创建的交换机了,其他默认就ok
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_13


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_14

  • 创建数据库,获得数据库名
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_15


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_16

  • 数据库创建好以后,我们可以通过在线的方式进行访问【访问前要创建账号,查看下一步】
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_17

  • 创建账号,获得用户名密码
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_18


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_19

  • 添加白名单,交换机的IP段
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_20


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_21

  • 登录数据库建表,创建表代码下面会讲到
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_22

  • ​创建安全组​
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_23

  • ​网络​​选择刚才创建的VPC,添加一条入规则:目的为​​MySQL(3306 )​​,​​源​​选择我们刚才创建的VPC网段,然后点击创建就好了
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_24

2. 云开发平台

  • 在云开发平台创建一个空应用,创建教程可以查看此篇文章👉​​Web训练营Day01——创建应用​​,示例模板选择​​Midway Serverless MySQL数据库示例​
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_25

  • 如下为我创建的应用
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_26

  • 点击​​开发部署​​跳转到 IDE,查看​​README.md​​文件,里面有创建数据库表代码,我们直接在RDS中执行语句就ok
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_27


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_28

  • 环境管理
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_29


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_30

  • 应用配置
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_31

  • 这边的配置填我们创建的数据库的对应信息就好
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_32

  • 部署
  • 首先 install 一下
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_33

  • install 完成后,点击部署即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_34

  • 部署成功后会有一个临时域名,进行访问即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_35


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_36

案例二:用Nas存储文件

云开发平台集成了NAS功能

阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_37

  • 创建应用
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_38


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_39

  • 应用环境管理
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_40


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_41


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_42

  • 部署,访问
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_43

  • 部署成功后访问临时域名即可

案例三:用OSS上传和展示图片

可参考官方解决方案:​​OSS文件浏览器直传方案​

阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_44

1. 资源准备

  • 创建
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_45

  • 填写名称,将公共读打开
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_46

  • 设置跨域
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_47


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_48


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_49

  • 创建子账号
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_50


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_51

  • 可以看到ak和sk
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_52

  • 创建目录
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_53


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_54

  • 用户添加权限
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_55


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_56


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_57


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_58

2. 云开发平台

  • 创建应用
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_59

  • 应用配置管理
  • OSSBUCKET:OSS的bucket名称
  • OSSDIR:目录
  • REGION:地域
  • AKID:ak
  • AKSK:sk
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_60


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_61

  • 添加静态页面 index.html,添加接口 osstoken.js
  • 直接从官方解决方案中复制前端​​index.html​​代码即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_62


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_63

  • 添加接口,同样直接从官方文档中复制即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_64


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_65

  • 添加路由
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_66

  • 部署
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_67


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_68

  • 部署成功后,访问临时域名即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_69

实践:Midway Serverless + OTS Serverless 数据库快速开发 Todo List

1. 创建 OTS 资源

  • 创建实例
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_70


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_71

  • 创建数据表
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_72


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_73


  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_74

2. 云开发平台

  • 创建应用
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_75

  • 应用配置
  • MIDWAY_OTS_ACCESSKEY 阿里云账户 AccessKey ID
  • MIDWAY_OTS_SECRET 阿里云账户 AccessKey Secret
  • MIDWAY_OTS_ENDPOINT 表格存储实例公网访问地址
  • MIDWAY_OTS_INSTANCE 表格存储实例名称
创建ak:https://ram.console.aliyun.com/manage/ak

阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_76


阿里云-云开发平台存储篇——给应用接上后端存储能力_阿里云-云开发平台_77


存储桶公网和实例名称


阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_78

阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_79


阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_80

  • 部署运行
  • npm install 一下
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_81

  • 部署
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_RDS数据库开发_82

  • 部署成功访问临时二级域名即可
  • 阿里云-云开发平台存储篇——给应用接上后端存储能力_Nas存储文件_83