web 实战营第3课:应用接上后端存储能力 | 学习笔记

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
对象存储 OSS,20GB 3个月
函数计算FC,每月15万CU 3个月
简介: 简介:快速学习 web 实战营第3课:应用接上后端存储能力

开发者学堂课程【云开发 Web 应用训练营:web 实战营第3课:应用接上后端存储能力】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/911/detail/14415


web 实战营第3课:应用接上后端存储能力

 

目录

一.函数计算部署原理

二.创建 RDS 实例

三.用 oss 上传和展示图片

四.Midway Serverless MySQL 数据库

五.云开发平台集成了 NAS 功能

六.head 内的配置


一.函数计算部署原理

基础原理

阿里云网络分地域,每个用户可以创建虚拟网络。

用 RDS 数据库实现 Todolist

主要用到函数计算,云开发平台把代码直接部署到函数计算上,生成一个临时域名。

阿里云网络分地域,一个地域可以看成一个内网,用户可以创建自己虚拟网络,可以和其他用户网络来区分隔离。函数计算本身是一个公用的虚拟网络

链路

image.png


二.创建 RDS 实例

效果

image.png

资源准备

创建 VPC 和交换机

登录 VPC 控制台

image.png


image.png规划了网络网段

创建 RDS 实例

1.在 RDS 下创建一个数据库,获得数据库名·

2.创建账号,获得用户名密码

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

4.登录数据库建表,参考代码 readme

表格代码

CREATE TABLE 'todo`(

'id" bigint( 20)NOT NULL AUTO_INCREMENT

,'todo varchar( 255) NOT NULL,

'status` int(11)NOT NULL,

'gmt_create’timestamp NOT NULLDEFAULT CURRENT_TIMESTAMP ON UPDATE

CURRENT__TIMESTAMP,

)ENGINE=InnoDB DEFAULT CHARSET=utf8;

应用的环境配置会在运行的时候注入到环境变量中去

将数据库名称填入应用配置中去

创建安全组

安全组 ecs 的功能(网卡)属于服务器,是一个虚拟防火墙

允许3306入方向流量

MySQL 基础端口是3306

云开发平台:

·创建应用.解决方案为:Midway Serverless MySQL 数据库示例·

应用环境管理.设置 woc. vswitch,安全组。

应用配置管理.设置数据库地址,数据库名.数据库端口,数据库用户名密码.

MIDwAY_RDS_HOST : RDS 实例内网地址

MIDWAY_RDS_DBNAME ∶数据库名 MIDWAY_RDS_USERNAME ∶数据库用户名MIDwAY_RDS_PASSwORD ∶数据库密码- MIDwAY_RDS_PORT ; RDS 实例内网端口

存储效果

NRAS 本地路径: worikbanch_nas_path=/wnt/wbreWrmteFle NAS本地路轻:J/mnt/wb,存在!

当前文件长度:184

NAS 本地路径: workbonch_ras path =/rmnt/wb

2020-12-24 09:23:56的函数计算服务写入!2020-12-24 09:24:31函数计算服务写入!2020-12-24 09:24:38函数计算服务写入!

三.用 oss 上传和展示图片

用户在网站上传图片如何展示

原理

image.png

云开发平台函数计算本身是无法接受图片上传

OSS 通过公网往外上传再读取数据,提供了临时上传加密

阶段一、资源准备:

创建 OSS-bucket

Bucket 可以认为存储文件的集合

设置跨域

打开自己的 OSS Bucket 概览页,在「基础设置」中找到「跨域访间」

设置权限,公共读

需要临时授权

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

·阶段二、云开发平台:

创建应用,解决方案为︰空应用(Nodejs/FC)

添加静态页面 index.html 。添加接口 osstoken.is.

应用配置管理,

- OSSBUCKET : OSS 的 bucket 名称

OSSDIR :日录

REGION :地域

AKID : ak

AKSK : sk

如果你的数据库中没有 todo 的表,可以参考如下键表spl来创建

‘’’SQL

CREATE TABLE ‘todo’(

‘id ‘bigint(20) NOT NULL AUTO_ INCREMENT,

‘todo’ varchar(255) NOT NULL,

‘statusint’(11) NOT NULL,

‘gnt_ create' timestamp NOT NULL DEFAULT CURRENT TIMESTANP ON UPDATECURRENT TIMESTAMP ,

PRIMARY KEY ( ‘id’ )

)ENGINE=InnoDB DEFAULT CHARSET=utf8;

Ja

exports . dbConfig . {

host: process . env.MIDWAY RDS HOST,

port: process. env MIDWAY RDS_ PORT II 3306,

Database: process. env MIDWAY RDS_ DBNAME,

username:process . env MIDWAY RDS_ USERNAME,

password: process . env MIDWAY RDS PASSWORD

};

return exports;

};


四.Midway Serverless MySQL 数据库

云开发平台:

创建应用,解决方案为: Midway Serverless MySQL 数据库示例:

应用环境管理,设置 vpc,vswitch, 安全组。

应用配置管理,设置数据库地址,数据库名,数据库端口,数据库用户名密码。

● MIDWAY_ RDS_ HOST : RDS 实例内网地址

● MIDWAY_ RDS_ DBNAMET :数据库名

●MIDWAY RDS USERNAME :数据库用户名

●MIDWAY_ RDS_ PASSWORD :数据库密码

●MIDWAY RDS_ PORT : RDS 实例内网端口

五.云开发平台集成了 NAS 功能:

Nsa 可以理解为网盘

基础原理

image.png

函数计算访问 VPC 需要设置

需要在 VPC 准备需要用的资源,在云开发平台进行部署、访问和测试。

步骤

●创建应用,解决方案为:空应用(Java/FC)

●应用环境管理,设置 vpc, vswitch, 安全组,NAS。

●应用配置管理,设置 NAS 环境。

nas mount path : nas挂载地址

部署,访问/file

阶段一、资源准备:

创建 OSS-bucket

设置跨域

设置权限,公共读

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

阶段二、云开发平台:

创建应用,解决方案为:空应用(Nodejs/FC)

添加静态页面 index.html , 添加接口 osstoken.is 应用配置管理,

OSSBUCKET : OSS的bucket 名称

OSSDIR:目录

REGION: 地域

AKID: ak

AKSK: sk

<?php

function handler($event, $context) [

Sconfig = array(

"dir' => getenv('OSSDIR'), 11 Lft8*

bucket => getenv('OSSBUCKET),// Bucket 8#

'region' = getenv('REGION),/l OSS FFCER Region

accessKeyld' = getenv('AKID'),// TÊßEG Access key ID

accessKeySecret' => getenv('AKSK'),/1 Access key secret

'expAfter => 3600, 11签名失效时间,秒

'maxSize' => 1048576000 1IeRtR-

);

Shost . https://' . $config['bucket] . 'oss-' . Sconfig[region'] . .aliyuncs.com';

Snow = strtotime('now);

SexpireTime = $now + $config expAfter];

Sexpiration . gmdate('Y-m-dITH;í:slZ, SexpireTime);

Spolicy = array(

expiration" => Sexpiration,

conditions" => array(

array( content-length-range", 0, $config['maxSize]),

六.head 内的配置

标签页 icon 图标

图标的文件名要求以 favicon.ico 命名,文件需要与 index.html 文件同级存储

使用方法:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"

CSS 分级引入

css 文件设置需要根据功能进行分层管理:目的是为了提取出多个页面公共的部分,提供多个 HTML 同时引用。

公共的部分也可以划分范围:有的是所有网站能用的,有的是某几个网站公共的部分

CSS 常见的分层组织:清除默认样式的 CSS 、网站的公共样式 CSS 、每个页面独有的 CSS

注意书写顺序,引入多层 css 时,需要按照后面的层叠前面的 css 进行设置,使用页面独有的样式层叠公共的样式

清除默认样式

使用范围:所有的网站都能用

命名的习惯:reset.css

引入时作为第一层引入

注意:reset.css 文件写完后不允许再次更改

公共样式

使用范围:单独的一个网站所有的页面、几个页面

制作方法:找到公共部分,划分成不同的模块分别进行.css 文件的书写

命名习惯:common.css 或者模块名. css

公共文件中的类名一般不要在其他的 css 文件中再用

引入顺序:一般在 reset.css 的后面,单独样式文件的前面

页面独有样式

使用范围:单独的一个 HTML 页面

命名习惯:一般与 HTML 的文件名保持一致,如果拆分的更细致可以使用多个单词的拼写,例如 index_banner.css

引入顺序:所有公共样式的后面

注意:使用单独样式文件去层叠前面公共样式时,需要注意选择器权重

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
打赏
0
0
0
0
55
分享
相关文章
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
如何在Python Web开发中确保应用的安全性?
如何在Python Web开发中确保应用的安全性?
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
63 7
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
219 3
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
134 19
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
300 17
使用Web浏览器访问UE应用的最佳实践
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
153 61
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
202 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问