阿里云进阶计划 Day5

使用OSS存储图片分享网站

1. 本小节中，搭建的图片分享网站将图片等静态资源，存储在OSS中，并直接从OSS中读取。

2. 返回ECS实例终端页面，执行下面命令进入alidata/www/default目录。
   # cd /alidata/www/default
   然后执行如下命令，删除当前目录中的所有“.png”文件，也就是，图片分享网站中读取的4张图片。
   *# rm -rf .png
   执行查看文件命令，查看当前目录中无图片文件，证明图片已删除。
   # ls

3. 打开（在浏览器的地址栏中，输入 实验资源 分配的ECS 外网地址 并访问）或刷新图片分享网站主页面，查看到当前页面中所有图片均无法正常显示。这是因为图片分享网站读取的是本地图片文件，而本地存储的图片文件已被删除，因此无法读取到图片信息。

注意：若访问页面仍旧可以显示图片，可能是由于浏览器缓存问题，建议清理下浏览器的缓存或者换一个浏览器查看ECS服务器主页。

4.接下来，将重新配置index.html中的图片访问信息，按照以下步骤将图片链接修改为上传到OSS的图片的URL访问地址：

1. 返回OSS管理控制台，进入云中沙箱 实验资源 分配的 Object路径 中，获取图片的URL访问地址。点击 01.png ,找到并点击右侧弹出框的 复制文件 URL。
   

2. 执行如下命令返回ECS服务器的/alidata/www/default目录下，并进入服务器访问首页 index.html 的编辑界面。
   # cd /alidata/www/default
   # vim index.html

3. 在 下，找到第一张图片的链接参数 src=“01.png”，删除01.png，并粘贴上面步骤中复制的上传到OSS 01.png 图片的访问 地址。 同理，修改 02.png，03.png，04.png的链接地址为OSS的存储地址。
   

4. 完成所有图片的修改后，点击 esc键 退出编辑状态，执行以下命令保存并退出编辑页面。
   ：wq

5. 在浏览器中，刷新 ECS实例的 外网地址 的访问页面，页面将再次显示 花园 的图片，说明现在网站可以使用存储在OSS上的图片来显示页面。
   

阿里云高校学生计划，向全国高校学生免费提供ECS云服务器，完成学生认证即可领取，现在领取还可享受免费续费。
详情请移步 https://developer.aliyun.com/adc/student/