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

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

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

参与体验产品，提交反馈，就有机会获得定制背包，T恤，以及5到100元对象存储OSS专属代金券~反馈地址：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浏览器。

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

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

切换至Workbench远程连接页签，执行如下命令，进入网站系统的根目录。

cd /alidata/index.html返回如下结果，您可以看到图片分享网页中显示的图片，是从网站系统根目录/alidata/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控制台。

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

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

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

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

读取OSS存储图片

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

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

rm -rf *.png

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

3、在Chromium网页浏览器打开新页签，在地址栏中输入：若访问页面仍旧可以显示图片，可能是由于浏览器缓存问题，建议清理下浏览器的缓存或者换一个浏览器访问。

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

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

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

vim index.html

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

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

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

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

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

7、在Chromium网页浏览器中，在地址栏中输入http://并访问。

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。