体验内容
服务器资源地址
零碎会主动去创立一台 Linux ECS。其中,创立的 ECS 中曾经部署了 web 利用和 OSS python SDK。在本试验中,已创立的 ECS 作为 web 服务器,浏览器中间接拜访其 IP 地址会显示蕴含四个小图片的页面,并且四个图片都保留在 ECS 本地。通过调用 OSS API 将四个图片上传到 OSS 中,同时删除保留在 ECS 本地的四个图片,此时拜访 ECS IP 将会看到页面中没有图片能够显示。为了在页面中显示原有的四个图片,试验中须要批改 web 应用服务器根目录下默认拜访页面中的图片地址,将图片地址批改为四个图片别离在 OSS 中的拜访地址。
体验此场景后,你能够把握的能力有:
1. 通过阿里云治理控制台治理对象存储服务 OSS
2. 在理论的 web 开发中应用对象存储服务 OSS 存储页面中的图片
3. 调用 OSS API 上传图片
背景常识
阿里云对象存储(Object Storage Service,简称 OSS),是阿里云对外提供的海量、平安、低成本、高牢靠的云存储服务。用户能够通过调用 API,在任何利用、任何工夫、任何地点上传和下载数据,也能够通过用户 Web 控制台对数据进行简略的治理。OSS 适宜寄存任意文件类型,适宜各种网站、开发企业及开发者应用。
阿里云 OSS 图片解决服务(Image Service,简称 IMG),是阿里云 OSS 对外提供的海量、平安、低成本、高牢靠的图片解决服务。用户将原始图片上传保留在 OSS 上,通过简略的 RESTful 接口,在任何工夫、任何地点、任何互联网设施上对图片进行解决。图片解决服务提供图片解决接口,图片上传请应用 OSS 上传接口。基于 IMG,用户能够搭建出跟图片相干的服务。图片服务解决的图片来自于 OSS,所以图片的上传理论是上传到 OSS 的同名 Bucket 中。
在实在的工作场景中,个别将图片、音频、视频等存储到 OSS 服务中,这样能够极大的进步用户的页面访问速度。
创立资源
1. 请点击页面左侧的 云产品资源,在下拉栏中,查看本次试验资源信息;
2. 在资源下拉栏点击 收费开明 按钮,开始创立试验资源。
阐明:资源创立过程须要 1 - 3 分钟。实现试验资源的创立后,用户能够通过 云产品资源 查看试验中所需的资源信息,例如:IP 地址、用户名、明码等。
基于单 ECS 的图片网站
1. 本大节将展现一个在 ECS 上已搭建的图片分享网站,以及图片分享网站的源码。
2. 首先,在浏览器中新建一个页面。而后,在浏览器的地址栏中,输出本次试验调配的 ECS 实例 弹性 IP。查看到以后页面中显示 1 张“花园”的图片,该图片理论是由 4 张小图片组成的。
3. 近程登录到 ECS 服务器,查看图片并分享网站的源码。登录信息请应用本试验 云产品资源 提供的 ECS 服务器的 弹性 IP,用户名 和 明码。
阐明:本试验 ECS 服务器为 Linux 操作系统,因而近程登录 ECS 实例的具体步骤,请参考云 帮忙文档 近程连贯 Linux 零碎。
- 登录到 ECS 服务器后,执行如下命令,进入网站零碎的根目录。
cd /alidata/www/default
而后,应用如下查看命令,查看保留在根目录下的四张图片 01.png,02.png,03.png 和 04.png,也就是图片分享网站所展现的 4 张小图片。
ls
在浏览器中,新建一个页面,并在地址栏中输出 <ECS 实例外网地址 >/01.png,能够查看到 01.png 的图片内容。同理,能够查看 “02.png”, “03.png” 以及 “04.png” 的图片内容。
- 应用如下命令,查看网站首页的源码,能够看到图片分享网页中显示的图片,是从网站根目录 /alidata/www/default 中,读取图片 01.png,02.png,03.png 和 04.png 拼接的。
cat index.html
应用 ECS+OSS 试验图片网站
1. 本大节将存储在本地的图片上传到 OSS Bucket 中,从而,图片分享网站将从 OSS Bucket 中读取图片,本地无需保留图片。
2. 在 ECS 实例的 /alidata/www/default 目录中,执行如下命令,进入 cfg.json 的编辑页面,并批改 OSS 的配置信息。
vim cfg.json
在键盘上输出“I”,切换到编辑模式,在编辑页面中,批改如下参数信息。
- id:云产品资源 调配的 AK ID 值;
- secret:云产品资源 调配的 AK Secret 值;
- endpoint:请依据上面的 OSS 地区与 Endpoint 对应关系表,输出 云产品资源 所调配 地区 绝对应的 外网 Endpoint
。例如:调配的 地区 为 华东 1(杭州),则输出 oss-cn-hangzhou.aliyuncs.com; - bucket:云产品资源 调配的 OSS 资源 Bucket 名称;
- object_dir:云产品资源 调配的 OSS 资源 Object 门路。
实现后,首先按 esc 键 退出编辑状态,而后输出上面命令保留并退出编辑页面。
:wq
OSS 地区 与 外网 Endpoint 对应关系表:
地区
外网 Endpoint
华东 1 (杭州)
oss-cn-hangzhou.aliyuncs.com
华东 2 (上海)
oss-cn-shanghai.aliyuncs.com
华北 1 (青岛)
oss-cn-qingdao.aliyuncs.com
华北 2 (北京)
oss-cn-beijing.aliyuncs.com
华南 1 (深圳)
oss-cn-shenzhen.aliyuncs.com
- 执行如下命令,将 01.png 上传到 OSS,该脚本应用 OSS 提供的 API 接口 put_object_from_file() 将本地文件上传到 云产品资源 调配的 Object 门路 中。
python oss_upload.py 01.png
而后,执行雷同命令,只把 01.png 改为 02.png 等,将 02.png、03.png 和 04.png 三个图片别离上传到 OSS。接下来,用户将拜访 OSS 治理控制台,并查看上传到 OSS 的文件。
阐明:通过 Python SDK 的形式上传本地文件到 OSS 的具体方法,请参考试验 SL003 应用 OSS API 上传和下载文件。
- 首先,点击页面左侧 云产品资源,而后点击 一键复制登录 url,用浏览器隐身窗口登录控制台;
在阿里云 RAM 登录界面,顺次输出 云产品资源 提供的 子用户名称、子帐号密码,而后点击 登录,进入阿里云治理控制台。
- 登录胜利后,在左侧列表点击 产品与服务,而后在主页面找到并点击 对象存储 OSS,从而进入 OSS 治理控制台。
- 进入 OSS 治理控制台后,在 Bucket 列表中,点击 云产品资源 提供的 Bucket 名称,例如 adc-oss-969hd2,进入 adc-oss-969hd2 Bucket 治理页面。
- 点击【文件治理】,能够查看到以后 Object 列表中存在一个或多个文件夹。点击 云产品资源 调配的一级 Object 门路。例如:用户调配的 Object 门路 为 OSSCTY/u-xxx/,则 OSSCTY 为一级 Object 门路。点击 OSSCTY,进入 Object“OSSCTY”门路中。
在“OSSCTY”的 Object 门路中,点击调配的二级 Object 门路。例如:用户调配的 Object 门路 为 OSSCTY/u-xxx/,则 u-xxx 为二级 Object 门路。点击 u-xxx 进入 Object OSSCTY/u-xxx 门路中。
此时,在 Object 治理的列表的第一行中,用户能够查看到以后 Object 门路信息。在 Object 治理的 Object 列表中,展现已上传并保留到“SOSSCTY/u-xxx /”门路下的 4 张图片:01.png,02.png,03.png,04.png。
- 返回 ECS 实例终端页面,执行上面命令进入 alidata/www/default 目录。
cd /alidata/www/default
而后执行如下命令,删除当前目录中的所有“.png”文件,也就是,图片分享网站中读取的 4 张图片 01.png, 02.png, 03.png 和 04.png。
rm -rf *.png
执行查看文件命令,查看当前目录中无图片文件,证实图片已删除。
ls
- 关上(在浏览器的地址栏中,输出 云产品资源 调配的 ECS 外网地址 并拜访)或刷新图片分享网站主页面,查看到以后页面中所有图片均无奈失常显示。这是因为图片分享网站读取的是本地图片文件,而本地存储的图片文件已被删除,因而无奈读取到图片信息。
留神:若拜访页面仍旧能够显示图片,可能是因为浏览器缓存问题,倡议清理下浏览器的缓存或者换一个浏览器查看 ECS 服务器主页。
- 接下来,将重新配置 index.html 中的图片访问信息,依照以下步骤将图片链接批改为上传到 OSS 的图片的 URL 拜访地址:
1) 返回 OSS 治理控制台,进入 云产品资源 调配的 Object 门路 中,获取图片的 URL 拜访地址。点击 01.png , 找到并点击右侧弹出框的【复制文件 URL】。
2) 执行如下命令返回 ECS 服务器的 /alidata/www/default 目录下,并进入服务器拜访首页 index.html 的编辑界面。
cd /alidata/www/default
vim index.html
3) 在 <!– 图片 1 –> 下,找到第一张图片的链接参数 src=”01.png”,删除 01.png,并粘贴下面步骤中复制的上传到 OSS 01.png 图片的拜访
地址。同理,批改 02.png,03.png,04.png 的链接地址为 OSS 的存储地址。
4) 实现所有图片的批改后,点击 esc 键 退出编辑状态,执行以下命令保留并退出编辑页面。
:wq
11. 在浏览器中,刷新 ECS 实例的 外网地址 的拜访页面,页面将再次显示 花园 的图片,阐明当初网站能够应用存储在 OSS 上的图片来显示页面。