## “云上漫步”第二期-反馈有礼
参与体验产品，提交反馈，就有机会获得定制背包，T恤，以及5到100元对象存储OSS专属代金券~
反馈地址：[https://developer.aliyun.com/adc/series/ysmb2](https://developer.aliyun.com/adc/series/ysmb2)

## 简介
（阿里云资源无费用无门槛，免费取用）
本场景将[提供一台配置了CentOS 7.7操作系统的ECS实例（云服务器）和一个对象存储OSS](https://developer.aliyun.com/adc/scenario/90b2bceaf9954d6f8780f26a1c913385)。通过本教程的操作，您可以基于CentOS 7.7操作系统的ECS实例和文件存储OSS，搭建一个图片分享网站。

## 背景知识

**云服务器ECS**
云服务器（Elastic Compute Service，简称ECS）是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS（Infrastructure as a Service）级别云计算服务，免去了您采购IT硬件的前期准备，让您像使用水、电、天然气等公共资源一样便捷、高效地使用服务器，实现计算资源的即开即用和弹性伸缩。

**文件存储OSS**
阿里云对象存储（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。用户可以通过调用API，在任何应用、任何时间、任何地点上传和下载数据，也可以通过用户Web控制台对数据进行简单的管理。OSS适合存放任意文件类型，适合各种网站、开发企业及开发者使用。

阿里云OSS图片处理服务（Image Service，简称 IMG） ，是阿里云OSS对外提供的海量、安全、低成本、高可靠的图片处理服务。用户将原始图片上传保存在OSS上，通过简单的 RESTful 接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。图片处理服务提供图片处理接口，图片上传请使用OSS上传接口。基于IMG，用户可以搭建出跟图片相关的服务。图片服务处理的图片来自于OSS，所以图片的上传实际是上传到OSS的同名Bucket中。

在真实的工作场景中，一般将图片、音频、视频等存储到OSS服务中，这样可以极大的提高用户的页面访问速度。

## 获取资源后连接ECS服务器

本步骤将指导您如何使用Workbench远程连接ECS服务器。

1、双击打开虚拟桌面的Chromium浏览器。

2、在RAM用户登录框中单击下一步，并复制粘贴页面左上角的子用户密码到用户密码输入框，点击登录。

3、复制下方地址，在Chromium浏览器打开新页签，粘贴并访问云服务器ECS控制台。

```
https://ecs.console.aliyun.com
```
4、在左侧导航栏中，选择实例与镜像>实例。
![370512f1595d4eb89ab30d05e5a325aa.png](https://img-blog.csdnimg.cn/img_convert/ebcf723024e6f8aa2565c5fb01f89fe1.png)

5、在实例页面顶部，选择资源所在地域。例如下图中，地域切换为华东2（上海）。

![p349125.png](https://img-blog.csdnimg.cn/img_convert/5c3b6e86d8c2a3f27ad805c2b940d9fb.png)

6、在实例页面，找到您的ECS实例，单击操作列下的远程连接。

说明 ：您可在云产品资源列表中查看目标实例的实例ID。
![685ed8d7175b469d86e9f1dd3623a75a.png](https://img-blog.csdnimg.cn/img_convert/7e71f7d2fb1548b1fdc219a82f8a7eff.png)

![f311a2bdee6448be89c9c416ca807ae2.png](https://img-blog.csdnimg.cn/img_convert/fabe3934392161c3c3ae9b30f5fd9006.png)

7、在远程连接与命令对话框的Workbench远程连接区域中，单击立即登录。

![p349130.png](https://img-blog.csdnimg.cn/img_convert/66715940861401441013a05980c47a8f.png)

8、在登录实例对话框中，输入ECS服务器的密码，单击确定。

说明：您可以在云产品资源列表中查看到您的ECS服务器密码。

![p349131.png](https://img-blog.csdnimg.cn/img_convert/b3273bbd29e651cb4cfa1faaba17f480.png)

返回如下页面，表示您已经成功远程连接到ECS服务器。

![f0aea0b97c1743fb892cd9440448a2a9.png](https://img-blog.csdnimg.cn/img_convert/64e88cb626e5c66a32c14f20fb817b70.png)

## 展示基于ECS的图片分享网站

本步骤为您展示基于ECS已搭建完成的图片分享网站，以及图片分享网站的源码。

1.在Chromium浏览器打开新页签，在地址栏输入http://<ECS公网地址()弹性IP)>，访问图片分享网站。

说明 ：您可以在云产品资源列表中查看到您的ECS云服务器的弹性IP。

返回如下页面，您可以查看到当前页面中显示1张 “花园” 的图片，该图片实际是由 4 张小图片组成的。
![f2bfb17d9af143319345df8ce00de0c3.png](https://img-blog.csdnimg.cn/img_convert/2a7d2e498df7571d89892845046c986f.png)
2. 切换至Workbench远程连接页签，执行如下命令，进入网站系统的根目录。

```
cd /alidata/www/default
```

3.执行如下命令，查看网站系统的根目录下的文件。

```
ls
```

返回结果如下，您可以在该目录下看到有01.png、02.png、03.png和04.png四张图片，图片分享网站所展示的“花园”图片就是由这四张图片组成。
![66d5e8b565fb47868bc90f3a38055c8b.png](https://img-blog.csdnimg.cn/img_convert/3df349c2a6ca26f13cbd4af7823ad8f7.png)

4.在Chromium网页浏览器打开新页签，在地址栏中输入http://<ECS服务器的弹性IP)>/01.png并访问。

返回如下页面，您可以看到01.png的图片内容。重复第四步，您可以看到02.png, 03.png和04.png的图片内容。

![c123e5bdf3354e099d3903e95f7ddcc2.png](https://img-blog.csdnimg.cn/img_convert/e68e357c6f2a65dfdc836b2389616a54.png)

5.执行如下命令，查看图片分享网站的源码。

cat index.html
返回如下结果，您可以看到图片分享网页中显示的图片，是从网站系统根目录/alidata/www/default中，读取图片01.png，02.png，03.png和04.png拼接的。

![1fd8390917b64864b717c2ec750d339f.png](https://img-blog.csdnimg.cn/img_convert/c4f9cb5027a90f2f4a23651c69d15df1.png)

## 搭建基于ECS和OSS图片分享网站
本步骤将指导您如何在ECS实例上调用OSS API上传图片到OSS中。

1、在Workbench远程连接页签，配置cfg.json文件中的OSS信息。

1）执行如下命令，编辑cfg.json文件。

```
vim cfg.json
```

2）按下i键进入编辑模式。

3）按i键进入编辑模式，分别找到以下参数，并将以下参数根据实际情况进行修改。

```
{
    "id": "LTAI*****B3LE877v",
    "secret": "vMkd5******DEAP4",
    "endpoint": "oss-cn-shanghai.aliyuncs.com",
    "bucket": "adc-oss-1****2",
    "obj_dir": "******"
}
```

参数说明：

id：云产品资源列表中的AK ID。
secret：云产品资源列表中的AK Secret。
endpoint：云产品资源列表中OSS的Endpoint外网域名。
bucket：云产品资源列表中OSS的Bucket名称。
object_dir：云产品资源列表中OSS的Object路径。
添加后的文件内容如下所示。

![631d33f21f224d71a18c09f7c25b4aba.png](https://img-blog.csdnimg.cn/img_convert/c3b7845bfe124011c4d4eee6c12b0a31.png)

4）按下Esc键后，输入:wq后按下Enter键保存并退出。

2、执行如下命令，将01.png上传到OSS的Object路径中。

说明：

该脚本使用OSS提供的API接口put_object_from_file()，将本地文件上传到云产品资源列表OSS的Object路径中。通过Python SDK的方式上传本地文件到OSS的具体方法，请参考实验SL003 使用OSS API上传和下载文件。

```
python oss_upload.py 01.png
```

返回结果如下，表示您已成功把01.png上传到OSS的Obeject中。

![f8cf376732b24efb8cc4154168481705.png](https://img-blog.csdnimg.cn/img_convert/54112f89c28aa5cd94614f6a97519ce4.png)

3、分别执行如下命令，将02.png、03.png和04.png三张图片分别上传到OSS的Object路径中。

```
python oss_upload.py 02.png
python oss_upload.py 03.png
python oss_upload.py 04.png
```

4、复制下方地址，在Chromium网页浏览器打开新页签，粘贴并访问OSS控制台。

```
https://oss.console.aliyun.com/
```

5、在对象存储OSS管理控制台左侧导航栏中，单击Bucket列表。
![a3b9e8df1e8b46338ff5fd93686b0bac.png](https://img-blog.csdnimg.cn/img_convert/25d519ea9ded88659277bfe49fec40b5.png)

6、在Bucket列表页面，单击Bucket名称。

说明 ：您可以在云产品资源列表中查看到您的OSS的Bucket名称。

![a96263c2f926488e8cda0f4c2b575fdd.png](https://img-blog.csdnimg.cn/img_convert/e3a776331e793133909346eaf2ea4d6b.png)

7、在文件管理页签，您可以看到当前Object列表中存在一个或多个文件夹。根据云产品资源列表中OSS的Object一级路径，单击相应的文件名。

说明 ：如果云产品资源列表中OSS的Object路径为OSSCTY/u-xxx/，则OSSCTY为一级Object路径。
![ae166ce5a1814ddda4bee1ef45d6348a.png](https://img-blog.csdnimg.cn/img_convert/33263c141b0dd27f6d025407b49e9dde.png)

8、在Object一级路径中，根据云产品资源列表中OSS的Object二级路径，单击相应的文件名。

说明 ：如果云产品资源列表中OSS的Object路径为OSSCTY/u-xxx/，则u-xxx为二级Object路径。

![087fd8b48bd9419c98215a42eb6f23f4.png](https://img-blog.csdnimg.cn/img_convert/e9b545de14c8ebfefca64b8d053635ca.png)

返回如下页面，您可以在OSS的Object二级路径中，看到从ECS实例上传到OSS的四张图片。
![34a8d1c996fe4dc882e7f47b2f5a41c4.png](https://img-blog.csdnimg.cn/img_convert/0342c2b07b973a304edc1b1818362e50.png)

## 读取OSS存储图片
本步骤将指导您如何修改图片分享网站的源码，实现图片分享网站从OSS中读取图片。

1、切换至Workbench远程连接页签，执行如下命令，删除当前目录中的所有.png文件。

```
rm -rf *.png
```

2、执行如下命令，查看当前目录文件。

ls
返回如下结果，您可以看到四张图片已经删除。
![59b6c22e8fde4ed6bda019a3d674d273.png](https://img-blog.csdnimg.cn/img_convert/6c3cca53d5525ad680641e3948291f6d.png)

3、在Chromium网页浏览器打开新页签，在地址栏中输入http://<ECS服务器的弹性IP)>并访问。

返回如下页面，您可以看到当前页面中所有图片均无法正常显示。这是因为图片分享网站读取的是ECS实例中的图片文件，而ECS实例中的图片文件已被删除，因此无法读取到图片信息。

注意 ：若访问页面仍旧可以显示图片，可能是由于浏览器缓存问题，建议清理下浏览器的缓存或者换一个浏览器访问。

![99bfe21429244812b4a5bc647be82413.png](https://img-blog.csdnimg.cn/img_convert/d1999773492391939dbb31e73b1a5239.png)

4、切换至文件存储OSS管理控制台页签。在文件管理页签中，单击01.png。

![2fb196c135c840cdaa411d3b450c5e18.png](https://img-blog.csdnimg.cn/img_convert/bd8faf10733ac8662bc30dbc35dc4605.png)

5、在详情面板中，单击URL中的复制文件URL。
![a9897bd89ff5485285675e0cbae8398f.png](https://img-blog.csdnimg.cn/img_convert/180e077db780b217e041f62b60481a40.png)

6、切换至Workbench远程连接页签，修改图片分享网站的源码。

1）执行如下命令，编辑index.html。

```
vim index.html
```

2）按i键进入编辑模式，找到下的<img>标签中的src参数，将scr参数修改为第十三步的URL。

3）重复上一步骤，分别修改、和下的<img>标签中的src参数。

注意 ：、和下的<img>标签中的src参数，需要修改为OSS中对应的文件的URL。

修改完成后文件内容如下所示。

![3d261a29224b42ed8e623ea90728244c.png](https://img-blog.csdnimg.cn/img_convert/6ce33274a3a2ec6695dfa43919d6b9d6.png)

4）按下Esc键后，输入:wq后按下Enter键保存并退出。

7、在Chromium网页浏览器中，在地址栏中输入http://<ECS服务器的弹性IP)>并访问。

返回如下页面，您可以看到“花园”图片，说明现在网站可以使用存储在OSS上的图片来显示页面。

![7e194cd074e048dea4684d658283e06c.png](https://img-blog.csdnimg.cn/img_convert/eaf6dd8e49cd242d0c26b58acfcf73aa.png)

ITPub博客

搭建基于OSS的图片分享网站-反馈有礼

最新文章