## 体验内容
[服务器资源地址](https://developer.aliyun.com/adc/scenario/90b2bceaf9954d6f8780f26a1c913385)
系统会自动去创建一台Linux ECS。其中，创建的ECS中已经部署了web应用和OSS python SDK。在本实验中，已创建的ECS作为web服务器，浏览器中直接访问其IP地址会显示包含四个小图片的页面，并且四个图片都保存在ECS本地。通过调用OSS API将四个图片上传到OSS中，同时删除保存在ECS本地的四个图片，此时访问ECS IP将会看到页面中没有图片可以显示。为了在页面中显示原有的四个图片，实验中需要修改web应用服务器根目录下默认访问页面中的图片地址，将图片地址修改为四个图片分别在OSS中的访问地址。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304153801293.png)
体验此场景后，你可以掌握的能力有：

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 张小图片组成的。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154049130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
3.远程登录到 ECS 服务器，查看图片并分享网站的源码。登录信息请使用本实验 云产品资源 提供的 ECS 服务器的 弹性IP，用户名 和 密码。

说明：本实验 ECS 服务器为 Linux 操作系统，因此远程登录 ECS 实例的详细步骤，请参考云 帮助文档 远程连接 Linux 系统。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154102252.png)
4.  登录到 ECS 服务器后，执行如下命令，进入网站系统的根目录。

```
cd /alidata/www/default
```
然后，使用如下查看命令，查看保存在根目录下的四张图片 01.png，02.png，03.png 和 04.png，也就是图片分享网站所展示的 4 张小图片。

```
ls
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154132654.png)
在浏览器中，新建一个页面，并在地址栏中输入 <ECS实例外网地址>/01.png，可以查看到 01.png 的图片内容。同理，可以查看 "02.png", "03.png" 以及 "04.png" 的图片内容。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030415414825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
5.  使用如下命令，查看网站首页的源码，可以看到图片分享网页中显示的图片，是从网站根目录 /alidata/www/default 中，读取图片 01.png，02.png，03.png 和 04.png 拼接的。

```
cat index.html
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154205443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

## 使用ECS+OSS实验图片网站

1.本小节将存储在本地的图片上传到 OSS Bucket 中，从而，图片分享网站将从 OSS Bucket 中读取图片，本地无需保存图片。
2.在ECS实例的 /alidata/www/default 目录中，执行如下命令，进入 cfg.json 的编辑页面，并修改 OSS 的配置信息。

```
vim cfg.json
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030415423257.png)
在键盘上输入 “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
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154325772.png)
3.  执行如下命令，将 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上传和下载文件。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154349664.png)
4.  首先，点击页面左侧 云产品资源 ， 然后点击 一键复制登录url，用浏览器隐身窗口登录控制台；

在阿里云 RAM 登录界面，依次输入 云产品资源 提供的 子用户名称 、子帐号密码 ，然后点击 登录，进入阿里云管理控制台。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030415435964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
5.  登录成功后，在左侧列表点击 产品与服务 ，然后在主页面找到并点击 对象存储 OSS，从而进入 OSS 管理控制台。

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030415440784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
6.  进入 OSS 管理控制台后，在 Bucket 列表中，点击 云产品资源 提供的 Bucket名称，例如 adc-oss-969hd2，进入 adc-oss-969hd2 Bucket 管理页面。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154415320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
7.  点击 【文件管理】 ，可以查看到当前 Object 列表中存在一个或多个文件夹。点击 云产品资源 分配的一级 Object 路径。例如：用户分配的 Object 路径 为 OSSCTY/u-xxx/，则 OSSCTY 为一级 Object 路径。点击 OSSCTY，进入 Object  “OSSCTY” 路径中。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154424831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
在 “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。 
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154435227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
8.  返回 ECS 实例终端页面，执行下面命令进入 alidata/www/default 目录。

```
cd /alidata/www/default
```
然后执行如下命令，删除当前目录中的所有 “ .png ” 文件，也就是，图片分享网站中读取的 4 张图片 01.png, 02.png, 03.png 和  04.png。

```
rm -rf *.png
```
执行查看文件命令，查看当前目录中无图片文件，证明图片已删除。

```
ls
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154513894.png)
9.  打开（在浏览器的地址栏中，输入 云产品资源 分配的 ECS 外网地址 并访问）或刷新图片分享网站主页面，查看到当前页面中所有图片均无法正常显示。这是因为图片分享网站读取的是本地图片文件，而本地存储的图片文件已被删除，因此无法读取到图片信息。

注意：若访问页面仍旧可以显示图片，可能是由于浏览器缓存问题，建议清理下浏览器的缓存或者换一个浏览器查看ECS服务器主页。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154524186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
10.  接下来，将重新配置 index.html 中的图片访问信息，按照以下步骤将图片链接修改为上传到 OSS 的图片的 URL 访问地址：

1)   返回 OSS 管理控制台，进入 云产品资源 分配的 Object 路径 中，获取图片的URL访问地址。点击 01.png ,找到并点击右侧弹出框的 【复制文件 URL】。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154537675.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
2)  执行如下命令返回 ECS 服务器的 /alidata/www/default 目录下，并进入服务器访问首页 index.html 的编辑界面。

```
cd /alidata/www/default

vim index.html
```
3)  在下，找到第一张图片的链接参数 src="01.png"，删除 01.png，并粘贴上面步骤中复制的上传到 OSS 01.png 图片的访问

地址。 同理，修改 02.png，03.png，04.png 的链接地址为 OSS 的存储地址。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154559240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
4)  完成所有图片的修改后，点击 esc键 退出编辑状态，执行以下命令保存并退出编辑页面。

```
:wq
```
11.在浏览器中，刷新 ECS实例的 外网地址 的访问页面，页面将再次显示 花园 的图片，说明现在网站可以使用存储在 OSS 上的图片来显示页面。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210304154614646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

ITPub博客

阿里云OSS云存储管理实践

最新文章