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

“云上散步”第二期 - 反馈有礼

参加体验产品，提交反馈，就有机会取得定制背包，T 恤，以及 5 到 100 元对象存储 OSS 专属代金券~
反馈地址：https://developer.aliyun.com/adc/series/ysmb2

简介

（阿里云资源无费用无门槛，收费取用）
本场景将提供一台配置了 CentOS 7.7 操作系统的 ECS 实例（云服务器）和一个对象存储 OSS。通过本教程的操作，您能够基于 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、在左侧导航栏中，抉择实例与镜像 > 实例。

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

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

阐明：您可在云产品资源列表中查看指标实例的实例 ID。

7、在近程连贯与命令对话框的 Workbench 近程连贯区域中，单击立刻登录。

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

阐明：您能够在云产品资源列表中查看到您的 ECS 服务器明码。

返回如下页面，示意您曾经胜利近程连贯到 ECS 服务器。

展现基于 ECS 的图片分享网站

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

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

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

返回如下页面，您能够查看到以后页面中显示 1 张“花园”的图片，该图片理论是由 4 张小图片组成的。

2. 切换至 Workbench 近程连贯页签，执行如下命令，进入网站零碎的根目录。

cd /alidata/www/default

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

ls

返回后果如下，您能够在该目录下看到有 01.png、02.png、03.png 和 04.png 四张图片，图片分享网站所展现的“花园”图片就是由这四张图片组成。

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

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

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

cat index.html
返回如下后果，您能够看到图片分享网页中显示的图片，是从网站零碎根目录 /alidata/www/default 中，读取图片 01.png，02.png，03.png 和 04.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 门路。
增加后的文件内容如下所示。

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 中。

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 列表。

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

阐明：您能够在云产品资源列表中查看到您的 OSS 的 Bucket 名称。

7、在文件治理页签，您能够看到以后 Object 列表中存在一个或多个文件夹。依据云产品资源列表中 OSS 的 Object 一级门路，单击相应的文件名。

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

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

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

返回如下页面，您能够在 OSS 的 Object 二级门路中，看到从 ECS 实例上传到 OSS 的四张图片。

读取 OSS 存储图片

本步骤将领导您如何批改图片分享网站的源码，实现图片分享网站从 OSS 中读取图片。

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

rm -rf *.png

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

ls
返回如下后果，您能够看到四张图片曾经删除。

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

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

留神：若拜访页面仍旧能够显示图片，可能是因为浏览器缓存问题，倡议清理下浏览器的缓存或者换一个浏览器拜访。

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

5、在详情面板中，单击 URL 中的复制文件 URL。

6、切换至 Workbench 近程连贯页签，批改图片分享网站的源码。

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

vim index.html

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

3）反复上一步骤，别离批改 <!– 图片 2 –>、<!– 图片 3 –> 和 <!– 图片 4 –> 下的 <img> 标签中的 src 参数。

留神：<!– 图片 2 –>、<!– 图片 3 –> 和 <!– 图片 4 –> 下的 <img> 标签中的 src 参数，须要批改为 OSS 中对应的文件的 URL。

批改实现后文件内容如下所示。

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

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

返回如下页面，您能够看到“花园”图片，阐明当初网站能够应用存储在 OSS 上的图片来显示页面。