搭建基于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=gbk"/> <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。
实验链接：/adc/scenario/90b2bceaf9954d6f8780f26a1c913385
