搭建基于OSS的图片分享网站
环境:CentOS 7.7操作系统的ECS实例(云服务器)和一个对象存储OSS。通过本教程的操作,您可以基于CentOS 7.7操作系统的ECS实例和文件存储OSS,搭建一个图片分享网站。
实验后您将收获到:
- 管理对象存储服务OSS
- 使用对象存储服务OSS存储页面中的图片
- 调用OSS API上传图片
1.创建资源,准备OSS和ECS
2.连接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服务器。
3. 展示基于ECS的图片分享网站
本步骤为您展示基于ECS已搭建完成的图片分享网站,以及图片分享网站的源码。
\1. 在Chromium浏览器打开新页签,在地址栏输入http://<ECS公网地址>,访问图片分享网站。
说明 :您可以在云产品资源列表中查看到您的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拼接的。
4. 搭建基于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的四张图片。
5. 读取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键进入编辑模式,找到 下的标签中的src参数,将scr参数修改为第十三步的URL。
3)重复上一步骤,分别修改 、 和 下的标签中的src参数。
注意 : 、 和 下的标签中的src参数,需要修改为OSS中对应的文件的URL。
修改完成后文件内容如下所示。
4)按下Esc键后,输入:wq后按下Enter键保存并退出。
7、在Chromium网页浏览器中,在地址栏中输入http://<ECS服务器的弹性IP)>并访问。
返回如下页面,您可以看到“花园”图片,说明现在网站可以使用存储在OSS上的图片来显示页面。
签中的src参数,需要修改为OSS中对应的文件的URL。
修改完成后文件内容如下所示。
[外链图片转存中…(img-WB8fladB-1661952444850)]
4)按下Esc键后,输入:wq后按下Enter键保存并退出。
7、在Chromium网页浏览器中,在地址栏中输入http://<ECS服务器的弹性IP)>并访问。
返回如下页面,您可以看到“花园”图片,说明现在网站可以使用存储在OSS上的图片来显示页面。
[外链图片转存中…(img-K0Isa1o4-1661952444851)]