关于oss:阿里云618有奖体验搭建基于OSS的图片分享网站

37次阅读

共计 3841 个字符,预计需要花费 10 分钟才能阅读完成。

体验简介

本场景将提供一台根底环境为 CentOS 的 ECS(云服务器)实例和曾经创立好的 PolarDB 数据库实例。咱们将会在这台服务器上安装 WordPress,帮忙您疾速搭建本人的云上博客。


618 有奖体验 点击返回,赢取猫超卡!

背景常识

● 云服务器 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 服务中,这样能够极大的进步用户的页面访问速度。

本步骤将领导您如何应用 Workbench 近程连贯 ECS 服务器。

重要: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 服务器。

展现基于 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 拼接的。

搭建基于 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 的四张图片。

读取 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 键进入编辑模式,找到 <!– 图片 1 –> 下的 <img> 标签中的 src 参数,将 scr 参数批改为第十三步的 URL。

3)反复上一步骤,别离批改 <!– 图片 2 –>、<!– 图片 3 –> 和 <!– 图片 4 –> 下的 <img> 标签中的 src 参数。

留神:<!– 图片 2 –>、<!– 图片 3 –> 和 <!– 图片 4 –> 下的 <img> 标签中的 src 参数,须要批改为 OSS 中对应的文件的 URL。

批改实现后文件内容如下所示。

4)按下 Esc 键后,输出:wq 后按下 Enter 键保留并退出。

7、在 Chromium 网页浏览器中,在地址栏中输出 http://<ECS 服务器的弹性 IP)> 并拜访。

返回如下页面,您能够看到“花园”图片,阐明当初网站能够应用存储在 OSS 上的图片来显示页面。

正文完
 0