zl程序教程

您现在的位置是:首页 >  APP

当前栏目

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

2023-02-26 12:29:01 时间

给应用接上后端存储能力

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

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

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

1. 资源准备

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

- 填写vpc名称和交换机名称,选一下可用区即可

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

- 创建成功后如下

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

  • 创建RDS实例

    • 实例创建

    点击刚才创建的vpc管理按钮,然后点击RDS实例就可以跳转到RDS控制台

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

这里计费方式我们选择`按量计费`就好了,部署方案选择单可用区部署,实例规格选择最便宜的就好了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225205507133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70) 然后进行实例配置,选择我们刚才创建的VPC,这里选择可用区的时候发现没有,我们看到下面可用区配置是H,我们创建的交换机可用区是B,可以重新创建一个可用区H的交换机(需要把上面创建的交换机先删除掉)

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

刷新一下就可以看到刚才创建的交换机了,其他默认就ok ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225210402651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70)

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

- 创建数据库,获得数据库名

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

数据库创建好以后,我们可以通过在线的方式进行访问【访问前要创建账号,查看下一步】 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225212220833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70) - 创建账号,获得用户名密码

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

- 添加白名单,交换机的IP段

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

- 登录数据库建表,创建表代码下面会讲到

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

  • 创建安全组

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

`网络`选择刚才创建的VPC,添加一条入规则:目的为`MySQL(3306 )`,`源`选择我们刚才创建的VPC网段,然后点击创建就好了

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

2. 云开发平台

  • 在云开发平台创建一个空应用,创建教程可以查看此篇文章?Web训练营Day01——创建应用,示例模板选择Midway Serverless MySQL数据库示例

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

如下为我创建的应用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225211307880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70)
  • 点击开发部署跳转到 IDE,查看README.md文件,里面有创建数据库表代码,我们直接在RDS中执行语句就ok

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

  • 环境管理

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

  • 应用配置

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

这边的配置填我们创建的数据库的对应信息就好 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225214139938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70)
  • 部署

    • 首先 install 一下

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

    • install 完成后,点击部署即可

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

部署成功后会有一个临时域名,进行访问即可 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225221149905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70)

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

案例二:用Nas存储文件

云开发平台集成了NAS功能

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

  • 创建应用

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

  • 应用环境管理

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

  • 部署,访问

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

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

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

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

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

1. 资源准备

  • 创建OSS-bucket

    • 创建

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

填写名称,将公共读打开

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

- 设置跨域

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

  • 创建RAM子账号,AK,SK,授权OSS访问

    • 创建子账号

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

可以看到ak和sk ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201225222846829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70) - 创建目录

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

- 用户添加权限

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

2. 云开发平台

  • 创建应用

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

  • 应用配置管理

    • OSSBUCKET:OSS的bucket名称
    • OSSDIR:目录
    • REGION:地域
    • AKID:ak
    • AKSK:sk

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

  • 添加静态页面 index.html?userCode=wrvvs1rm,添加接口 osstoken.js

    • 直接从官方解决方案中复制前端index.html?userCode=wrvvs1rm代码即可

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

- 添加接口,同样直接从官方文档中复制即可

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

- 添加路由

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

  • 部署

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

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

1. 创建 OTS 资源

  • 创建实例

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

  • 创建数据表

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

2. 云开发平台

  • 创建应用

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

  • 应用配置

    • MIDWAY_OTS_ACCESSKEY 阿里云账户 AccessKey ID
    • MIDWAY_OTS_SECRET 阿里云账户 AccessKey Secret
    • MIDWAY_OTS_ENDPOINT 表格存储实例公网访问地址
    • MIDWAY_OTS_INSTANCE 表格存储实例名称

创建ak:https://ram.console.aliyun.com/manage/ak
阿里云-云开发平台存储篇——给应用接上后端存储能力
阿里云-云开发平台存储篇——给应用接上后端存储能力
存储桶公网和实例名称
阿里云-云开发平台存储篇——给应用接上后端存储能力

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

  • 部署运行

    • npm install 一下

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

- 部署

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

- 部署成功访问临时二级域名即可

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

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


本站部分内容转载自网络,版权属于原作者所有,如有异议请联系QQ153890879修改或删除,谢谢!
转载请注明原文链接:阿里云-云开发平台存储篇——给应用接上后端存储能力

你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)
[[email protected]]
分享 (0)