搭建基于OSS的图片分享网站
1. 创建资源
开始实验之前,您需要先创建实验相关资源。
在实验室页面右侧,单击创建资源。
(可选)在实验室页面左侧导航栏中,单击云产品资源列表,可查看本次实验资源相关信息(例如IP地址、用户信息等)。
说明 :资源创建过程需要1~3分钟。
2. 连接ECS服务器
本步骤将指导您如何使用Workbench远程连接ECS服务器。
双击打开虚拟桌面的Chromium浏览器。
在RAM用户登录框中单击下一步,并复制粘贴页面左上角的子用户密码到用户密码输入框,单击登录。
复制下方地址,在Chromium浏览器打开新页签,粘贴并访问云服务器ECS控制台。
https://ecs.console.aliyun.com
在左侧导航栏中,选择实例与镜像>实例。
在实例页面顶部,选择资源所在地域。例如下图中,地域切换为华东2(上海)。
在实例页面,找到您的ECS实例,单击操作列下的远程连接。
说明:您可在云产品资源列表中查看目标实例的实例ID。
在远程连接与命令对话框的Workbench远程连接区域中,单击立即登录。
在登录实例对话框中,输入ECS服务器的密码,单击确定。
说明:您可以在云产品资源列表中查看到您的ECS服务器密码。
返回如下页面,表示您已经成功远程连接到ECS服务器。
3. 展示基于ECS的图片分享网站
本步骤为您展示基于ECS已搭建完成的图片分享网站,以及图片分享网站的源码。
在Chromium浏览器打开新页签,在地址栏输入http://<ECS公网地址>,访问图片分享网站。
说明:您可以在云产品资源列表中查看到您的ECS云服务器的公网地址。
返回如下页面,您可以查看到当前页面中显示1张花园的图片,该图片实际是由4张小图片组成的。
切换至Workbench远程连接页签,执行如下命令,进入网站系统的根目录。
cd /alidata/www/default
执行如下命令,查看网站系统的根目录下的文件。
ls
返回结果如下,您可以在该目录下看到有01.png、02.png、03.png和04.png四张图片,图片分享网站所展示的“花园”图片就是由这四张图片组成。
在Chromium网页浏览器打开新页签,在地址栏中输入http://<ECS公网地址>/01.png并访问。
返回如下页面,您可以看到01.png的图片内容。重复第四步,您可以看到02.png, 03.png和04.png的图片内容。
执行如下命令,查看图片分享网站的源码。
cat index.html
返回如下结果,您可以看到图片分享网页中显示的图片,是从网站系统根目录/alidata/www/default中,读取图片01.png,02.png,03.png和04.png拼接的。
4. 搭建基于ECS和OSS图片分享网站
本步骤将指导您如何在ECS实例上调用OSS API上传图片到OSS中。
在Workbench远程连接页签,配置cfg.json文件中的OSS信息。
1.1 执行如下命令,编辑cfg.json文件。
vim cfg.json
1.2 按下i键进入编辑模式。
1.3 分别找到以下参数,并将以下参数根据实际情况进行修改。
{ "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外网域名。您可在对象存储OSS控制台的对应Bucket中的概览页面查看到。
bucket:云产品资源列表中OSS的Bucket名称。您可在云产品资源列表中查看到。
object_dir:云产品资源列表中OSS的Object路径。在本实验中可以不填写。
添加后的文件内容如下所示。
1.4 按下Esc键后,输入:wq后按下Enter键保存并退出。
执行如下命令,将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中。
分别执行如下命令,将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
复制下方地址,在Chromium网页浏览器打开新页签,粘贴并访问OSS控制台。
https://oss.console.aliyun.com/
在对象存储OSS管理控制台左侧导航栏中,单击Bucket列表。
在Bucket列表页面,单击Bucket名称。
说明:您可以在云产品资源列表中查看到您的OSS的Bucket名称。
返回如下页面,您可以在OSS的文件列表中,看到从ECS实例上传到OSS的四张图片。
5. 读取OSS存储图片
本步骤将指导您如何修改图片分享网站的源码,实现图片分享网站从OSS中读取图片。
切换至Workbench远程连接页签,执行如下命令,删除当前目录中的所有.png文件。
rm -rf *.png
执行如下命令,查看当前目录文件。
ls
返回如下结果,您可以看到四张图片已经删除。
Chromium网页浏览器打开新页签,在地址栏中输入http://<ECS公网地址>并访问。
返回如下页面,您可以看到当前页面中所有图片均无法正常显示。这是因为图片分享网站读取的是ECS实例中的图片文件,而ECS实例中的图片文件已被删除,因此无法读取到图片信息。
注意:若访问页面仍旧可以显示图片,可能是由于浏览器缓存问题,建议清理下浏览器的缓存或者换一个浏览器访问。
切换至对象存储OSS管理控制台页签。在文件管理页签中,单击01.png。
在详情面板中,单击URL中的复制文件URL。
切换至Workbench远程连接页签,修改图片分享网站的源码。
6.1 执行如下命令,编辑index.html。
vim index.html
6.2 按i键进入编辑模式,找到<!-- 图片1 -->下的<img>标签中的src参数,将scr参数修改为从对象存储OSS控制台获取的01.png图片的URL。
6.3 重复上一步骤,分别修改<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数。
注意:<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数,需要修改为从对象存储OSS控制台获取的对应图片的URL。
修改完成后文件内容如下所示。
6.4 按下Esc键后,输入:wq后按下Enter键保存并退出。
在Chromium网页浏览器中,在地址栏中输入http://<ECS公网地址>并访问。
返回如下页面,您可以看到花园图片,说明现在网站可以使用存储在OSS上的图片来显示页面。
6. 使用OSS图片服务
本步骤将指导您如何使用x-oss-process参数对图片进行处理。
图片缩放。
1.1 切换至Workbench远程连接页签,修改图片分享网站的源码。
1.2 执行如下命令,编辑index.html。
vim index.html
1.3 按i键进编辑模式,找到<!-- 图片1 -->下的<img>标签中的src参数,在src参数中的url后面添加如下参数,将原图片的高度和宽度缩放为200px。
?x-oss-process=image/resize,w_200
1.4 重复上一步骤,分别修改<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数,将原图片的高度和宽度缩放为200px。
修改完成后文件内容如下所示。
1.5 按ECS退出编辑模式,输入:wq后按下Enter键保存并退出。
1.6 在Chromium网页浏览器中,在地址栏中输入http://<ECS公网地址>并访问。
返回如下页面,您可以看到缩放后的花园图片,说明存储在OSS上的原图片,通过图片处理的缩放功能进行缩放后,可以被现在的网站使用并显示。
格式转换。
2.1 切换至Workbench远程连接页签,修改图片分享网站的源码。
2.2 执行如下命令,编辑index.html。
vim index.html
2.3 按i键进编辑模式,找到<!-- 图片1 -->下的<img>标签中的src参数,在src参数中的url后面添加如下参数,将原图片的高度和宽度缩放为200px,图片转换为avif格式。
?x-oss-process=image/resize,w_200/format,avif
2.4 重复上一步骤,分别修改<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数,将原图片的高度和宽度缩放为200px,图片转换为avif格式。
修改完成后文件内容如下所示。
2.5 按ECS退出编辑模式,输入:wq后按下Enter键保存并退出。
2.6 在Chromium网页浏览器中,在地址栏中输入http://<ECS公网地址>并访问。
返回如下页面,您可以看到缩小并转换为avif格式的花园图片,说明存储在OSS上的原图片,通过图片处理的格式转换功能进行格式转换后,可以被现在的网站使用并显示。
7. 实验说明
在您开始实验前,请您务必看完如下说明再进行实验,以保证实验流畅性。
资源类型
您可以选择领取免费试用额度来开启实验。
免费领用的资源或个人创建的资源都归属于您账号下,请您注意免费资源的到期时间,以及个人资源的费用使用情况。
您也可以使用公共资源体验来开启实验。
公共资源体验使用的资源归属于平台,会为您预创建环境,实验体验完成后资源会被释放。
如何开始实验
您可以单击右侧的领取免费试用额度,在下方卡片中领用免费资源。具体产品领用步骤,请查看下方。无论您是否领用了免费试用额度,您都可单击我已开通,进入实验,从而开始实验。您未领取的资源,将使用你个人的资源进行创建,请注意费用。
您也可以单击右侧的公共资源体验,单击确认开启实验即可开始。
您单击的资源不同,实验的具体步骤也会有所不同,如您需要更详细的步骤,推荐您进入领取免费试用额度的实验环节。
2.1 ECS领用步骤:
单击卡片中的立即试用。
在ECS领取界面,操作系统选择CenOS 7.9 64位,地域选择北京,到期释放设置您可按照实际需求选择,勾选协议。
单击立即试用即可领用。
2.2 OSS领用步骤:
单击卡片中的立即试用。
默认配置,勾选服务协议。
单击立即试用即可领用。
8. 配置ECS服务器
本步骤将指导您配置ECS服务器。
若您领用了ECS免费资源,请按照2.1步骤进行实验。
若您未领用ECS免费资源,请按照2.2步骤进行实验。
2.1 领用资源,配置ECS服务器
进入云服务器ECS控制台,单击实例,选择上方的地域为北京。
在实例ID/名称下,找到创建的ECS,并单击进入。
在实例详情页面,单击重置实例密码。
选择离线重置密码,输入新密码,并确认密码,单击保存密码。
选择重启,单击立即重启。
稍等一会,会看到实例显示运行中。此时密码已更改完成。
选择安全组,在所属安全组中,单击配置规则。
在如下页面中,选择入方向,单击手动添加。
按照如下两图所示配置两个规则,并单击保存。
2.2 未领用资源,直接创建ECS资源
单击ECS购买链接,进入购买页面。
在如下界面中,选择配置:
付费类型:您可按照需求选择包年包月或按量付费,此处选择按量付费。
地域:本实验选择北京。
网络及可用区:选择专有网络。选择默认专有网络,默认交换机。
注意:如您之前创建过专有网络和交换机,可选择已有专有网络和交换机,您实际选择的地域和交换机中的可用区会影响您实例资源的选择,本示例中选择北京,因此可选择下方的2vCPU,8GiB,u1,您可参照本示例进行实验。若您选择其它地域其它可用区,可能没有此资源,您可选用其它资源,本实验OSS使用公网,因此无需保证ECS和OSS创建的地域一致,本实验示例都为北京。
在实例中,筛选2vCPU,8GiB,u1,如下所示选择规格:
在镜像中,选择公共镜像,选择CentOS,选择CentOS 7.9 64位。
在系统盘中,配置默认即可:
公网IP:选择分配公网IPv4地址;
带宽计费模式:选择按使用流量;
带宽峰值:选择1;
安全组:选择新建安全组;
安全组类型:普通安全组;
开通IPv4端口:选择SSH(22),HTTP(80),RDP(3389)。
登录凭证选择自定义密码,请输入登录密码,以及确认密码。
点击确认下单,即可创建ECS。
9. 创建图片分享网站界面
本步骤将指导您创建HTML,创建完成后,通过浏览器访问相应地址,可看到图片分享网站。
返回ECS控制台,在实例界面中,找到创建的实例,点击远程连接。
如下所示,在通过Workbench远程连接中,单击立即登录。
在如下所示中,输入之前ECS设置的密码,点击确定。
进入命令行,复制如下命令并粘贴。
wget https://nginx.org/download/nginx-1.20.2.tar.gz yum -y install zlib zlib-devel gcc-c++ pcre-devel openssl openssl-devel tar -zxvf nginx-1.20.2.tar.gz cd nginx-1.20.2 ./configure --prefix=/usr/local/nginx/ --with-http_ssl_module --with-http_stub_status_module make make install
出现下图,单击确定。
如图所示,出现make install,此时点击回车按钮:
如图所示,表明成功。
输入如下命令 cd /usr/local/nginx/sbin ,并单击回车。
输入如下命令 ./nginx ,并单击回车。
复制如图所示红框中的地址,打开浏览器并粘贴地址。
出现如图所示,表明nginx安装成功,此时可以访问网站。
在命令行中,执行以下命令在根目录下创建新目录:
mkdir usr/local/nginx/html/edu
执行以下命令,编辑index.html文件
vim usr/local/nginx/html/edu/index.html
按下 i 键进入编辑模式。
将如下代码复制到命令行中:
<html> <head> <title>index</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> body { margin: 0px; background-color: #DCDCDC; } </style> </head> <body> <div> <!-- 图片1 --> <img src="01.png"/> <!-- 图片2 --> <img src="02.png"/> </div> <div> <!-- 图片3 --> <img src="03.png"/> <!-- 图片4 --> <img src="04.png"/> </div> </body> </html>
按下 Esc 键后,输入 :wq 后按下Enter键保存并退出。
在浏览器打开新页签,在地址栏输入ECS的公网IP地址,后面加/edu,访问图片分享网站。创建的网站如下图所示,目前没有展示图片。
10. 上传数据至OSS
OSS对象存储可上传数据进行存储。本步骤指导您如何在OSS中上传数据。
在浏览器中打开新页签,逐步复制下方4个地址到地址栏中,将文件下载到桌面上。
https://labfileapp.oss-cn-hangzhou.aliyuncs.com/oss/01.png
https://labfileapp.oss-cn-hangzhou.aliyuncs.com/oss/02.png
https://labfileapp.oss-cn-hangzhou.aliyuncs.com/oss/03.png
https://labfileapp.oss-cn-hangzhou.aliyuncs.com/oss/04.png
复制下方地址,在浏览器打开新页签,粘贴并访问对象存储OSS控制台。
https://oss.console.aliyun.com/
在左侧导航栏中,单击Bucket列表。
在Bucket列表页面,单击创建Bucket。
在创建Bucket页面,根据页面引导进行创建Bucket,您可自定义Bucket名称,名称全局唯一,地域选择北京,其他配置保持默认即可,单击确定。
创建完成后,在Bucket列表页面,找到创建的Bucket,单击Bucket名称。
在文件列表页面 ,单击上传文件。
在上传文件页面,单击扫描文件。
在对话框中,选择刚刚下载的文件 ,单击打开。
在上传文件页面,当上传文件的状态为已扫描待上传后,单击上传文件。
返回如下页面,表示文件上传成功。此时您需确保四个文件都已上传完成。
11. 在服务器后台html页面中插入OSS图片
在步骤三的html中插入OSS图片,完成后,登录网站可浏览图片,达到图片的分享效果。
切换回ECS服务器命令行。
执行如下命令,编辑index.html文件。
vim usr/local/nginx/html/edu/index.html
按下i键进入编辑模式。
找到<!-- 图片1 -->下的<img>标签中的src参数,将scr参数按照如下格式修改:
将如下examplebucket替换成您创建的Bucket名称,此处域名地域是北京,如您不是此地域需要更换成其它地域,更改完成后复制粘贴在src参数内:
http://examplebucket.oss-cn-beijing.aliyuncs.com/01.png
重复上一步骤,分别修改<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数。注意最后的文件名称,得修改为对应的文件名。
修改完成后,按下Esc键后,输入:wq后按下Enter键保存并退出。
在浏览器中,在地址栏中输入ECS的公网IP地址,后面加/edu,并访问。
返回如下页面,您可以看到花园图片,说明现在网站可以使用存储在OSS上的图片来显示页面。
12. 图片处理服务
本步骤将指导您如何使用x-oss-process参数对图片进行处理。
图片缩放
1.1 返回至命令行,修改图片分享网站的源码。
1.2 执行如下命令,编辑index.html。
vim usr/local/nginx/html/edu/index.html
1.3 按i键进编辑模式,找到<!-- 图片1 -->下的<img>标签中的src参数,在src参数中的url后面添加如下参数,将原图片的高度和宽度缩放为200px。
?x-oss-process=image/resize,w_200
1.4 重复上一步骤,分别修改<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数,将原图片的高度和宽度缩放为200px。
修改完成后文件内容如下所示。
1.5 按ECS退出编辑模式,输入:wq后按下Enter键保存并退出。
1.6 在浏览器中,在地址栏中输入ECS的公网IP地址,后面加/edu,并访问。 返回如下页面,您可以看到缩放后的花园图片,说明存储在OSS上的原图片,通过图片处理的缩放功能进行缩放后,可以被现在的网站使用并显示。
格式转换
2.1 返回至命令行,修改图片分享网站的源码。
2.2 执行如下命令,编辑index.html。
vim usr/local/nginx/html/edu/index.html
2.3 按i键进编辑模式,找到<!-- 图片1 -->下的<img>标签中的src参数,在src参数中的url后面添加如下参数,将原图片的高度和宽度缩放为200px,图片转换为avif格式。
?x-oss-process=image/resize,w_200/format,avif
2.4 重复上一步骤,分别修改<!-- 图片2 -->、<!-- 图片3 -->和<!-- 图片4 -->下的<img>标签中的src参数,将原图片的高度和宽度缩放为200px,图片转换为avif格式。 修改完成后文件内容如下所示。
2.5 按ECS退出编辑模式,输入:wq后按下Enter键保存并退出。 2.6 在浏览器中,在地址栏中输入ECS的IP公网地址,后面加/edu,并访问。 返回如下页面,您可以看到缩小并转换为avif格式的花园图片,说明存储在OSS上的原图片,通过图片处理的格式转换功能进行格式转换后,可以被现在的网站使用并显示。
13. 清理及后续
清理
完成教程后,请及时清理测试数据和试用资源。
ECS提供的试用实例有按量付费实例和包年包月实例。请在阿里云免费试用确认您试用的实例类型,并参考以下规则清理:
按量付费实例释放
如果无需继续使用实例,可以登录ECS控制台,找到目标实例,在操作列单击,搜索并单击释放设置,根据界面提示释放实例。
如果需要继续使用实例,请至少在试用到期1小时前为阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
包年包月实例释放
包年包月实例到期会自动释放,释放实例的同时释放数据。
如果需要继续使用实例,请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
OSS提供3个月的免费资源包,包含每月20 GB的标准(LRS)存储、每月2 GB的下行流量、每月20万次的请求数。完成教程后,请参考以下场景处理OSS资源:
如果无需继续使用OSS Bucket,您可以登录对象存储OSS控制台,在文件列表页面,找到视频课程文件,然后在文件右侧操作列,选择 >彻底删除,根据界面提示删除文件。然后在左侧导航栏,选择删除Bucket,在删除Bucket页面,单击删除Bucket,然后根据界面提示删除Bucket。
如果需继续使用OSS Bucket,请务必至少在资源包试用到期1小时前为您的阿里云账号充值或购买新的资源包。欠费后如果在延期免停权益额度内,您的服务将不会受到停服影响。欠费后如果超出了延期免停权益额度,OSS服务将自动停止。如果您在OSS停服后15天内未补足欠款,将视为您主动放弃OSS存储服务,阿里云将终止本产品服务条款并停止为您继续提供服务,您保存在阿里云的全部数据将会被清理删除,清理后数据不可恢复。
后续
在试用有效期期间,您还可根据希望测试的其它业务场景继续使用OSS Bucket。
实验链接:https://developer.aliyun.com/adc/scenario/90b2bceaf9954d6f8780f26a1c913385