**阿里雲物件儲存**
	阿里雲物件儲存（Object Storage Service，簡稱OSS），是阿里雲對外提供的海量、安全、低成本、高可靠的雲端儲存服務。使用者可以透過呼叫API，在任何應用、任何時間、任何地點上傳和下載資料，也可以透過使用者Web控制檯對資料進行簡單的管理。OSS適合存放任意檔案型別，適合各種網站、開發企業及開發者使用。
**阿里雲OSS圖片處理服務**
	阿里雲OSS圖片處理服務（Image Service，簡稱 IMG） ，是阿里雲OSS對外提供的海量、安全、低成本、高可靠的圖片處理服務。使用者將原始圖片上傳儲存在OSS上，透過簡單的 RESTful 介面，在任何時間、任何地點、任何網際網路裝置上對圖片進行處理。圖片處理服務提供圖片處理介面，圖片上傳請使用OSS上傳介面。基於IMG，使用者可以搭建出跟圖片相關的服務。圖片服務處理的圖片來自於OSS，所以圖片的上傳實際是上傳到OSS的同名Bucket中。

在真實的工作場景中，一般將圖片、音訊、影片等儲存到OSS服務中，這樣可以極大的提高使用者的頁面訪問速度。11 月 9 日至 11 月 23 日期間，完成部署即可獲得“TOMY 多美卡合金車模一輛”。

![O1CN019If3vm1vDFjunR9QE_!!2921416138-0-cib.jpg](https://img-blog.csdnimg.cn/img_convert/e1fb2e26863d176e2d84e1b1a800d77a.jpg)

地址：[https://developer.aliyun.com/adc/series/activity/1111](https://developer.aliyun.com/adc/series/activity/1111)

## 體驗準備

**體驗需使用自己的賬戶開通以上服務**
[ECS資源地址](https://developer.aliyun.com/adc/scenario/90b2bceaf9954d6f8780f26a1c913385)
開始實驗後，系統會自動去建立一臺Linux ECS。其中，建立的ECS中已經部署了web應用和OSS python SDK。在本實驗中，已建立的ECS作為web伺服器，瀏覽器中直接訪問其IP地址會顯示包含四個小圖片的頁面，並且四個圖片都儲存在ECS本地。透過呼叫OSS API將四個圖片上傳到OSS中，同時刪除儲存在ECS本地的四個圖片，此時訪問ECS IP將會看到頁面中沒有圖片可以顯示。為了在頁面中顯示原有的四個圖片，實驗中需要修改web應用伺服器根目錄下預設訪問頁面中的圖片地址，將圖片地址修改為四個圖片分別在OSS中的訪問地址。

## 連線ECS伺服器

1、雙擊開啟虛擬桌面的Chromium瀏覽器，在RAM使用者登入框中單擊下一步，複製雲產品資源列表中子使用者密碼，按CTRL+V把密碼貼上到密碼輸區，登入子賬戶（後續在遠端桌面裡的貼上操作均使用CTRL + V快捷鍵）。
2、複製雲伺服器ECS控制檯地址，在Chromium瀏覽器開啟新頁籤，貼上並訪問雲伺服器ECS控制檯。
3、在控制檯左側導航欄中，單擊例項。
![p349123.png](https://img-blog.csdnimg.cn/img_convert/3fa7380747f46768a613cf3a3ed366f1.png)
4、在例項頁面頂部選單欄，切換到資源所在地域。

說明 ：

參考如下圖片切換地域到華東2（上海）。
![p349125.png](https://img-blog.csdnimg.cn/img_convert/0c2b38a6c7b1accedf7e90e896948324.png)
5、在例項頁面，在目標例項的操作列下單擊遠端連線。

說明 ：

您可在雲產品資源列表中檢視目標例項的例項ID。
![p349128.png](https://img-blog.csdnimg.cn/img_convert/3d18d4463e5597c43c3d21bc01884ae2.png)

6、在遠端連線與命令對話方塊的Workbench遠端連線區域中，單擊立即登入。

![p349130.png](https://img-blog.csdnimg.cn/img_convert/1d7d62e1194b44adacec6049d27a7d69.png)
7、在登入例項對話方塊中，輸入雲資源產品列表中ECS伺服器的登入密碼，單擊確定。

![p349131.png](https://img-blog.csdnimg.cn/img_convert/fb67809a6b08a8275ad234790ab92f61.png)
返回如下頁面，表示您已經成功遠端連線到ECS伺服器。
![e12696abe6c6446e8cc9d9f80ba61c52.png](https://img-blog.csdnimg.cn/img_convert/fb42a5ea9d4ba9d62de209d7f5943a53.png)

## 基於單ECS的圖片網站
本小節將展示一個在 ECS 上已搭建的圖片分享網站，以及圖片分享網站的原始碼。

1.在Chromium瀏覽器開啟新頁籤，在位址列輸入http://<ecs>:8080並訪問。您可以檢視到當前頁面中顯示1張 “花園” 的圖片，該圖片實際是由 4 張小圖片組成的。
![9eba88af045e4fa28fff26d4ac22a6c3.png](https://img-blog.csdnimg.cn/img_convert/8ee1928bb16813ed1b4b19a72d612ccd.png)

2.切換至終端頁面。執行以下命令，進入網站系統的根目錄。

```
cd /alidata/www/default
```

然後，使用如下檢視命令，檢視儲存在根目錄下的四張圖片 01.png，02.png，03.png 和 04.png，也就是圖片分享網站所展示的 4 張小圖片。

```
ls
```

![TB1JTsAtxD1gK0jSZFyXXciOVXa-670-76.png](https://img-blog.csdnimg.cn/img_convert/b34df6bcce86c9dbb004ae5e3587219f.png)

在Chromium瀏覽器開啟新頁籤，在位址列中輸入 <ecs>/01.png，可以檢視到 01.png 的圖片內容。同理，可以檢視 "02.png", "03.png" 以及 "04.png" 的圖片內容。
![TB18rY0ueH2gK0jSZJnXXaT1FXa-507-292.png](https://img-blog.csdnimg.cn/img_convert/dcdabd4f748c5559a56515854a9887b3.png)
3.使用如下命令，檢視網站首頁的原始碼，可以看到圖片分享網頁中顯示的圖片，是從網站根目錄 /alidata/www/default 中，讀取圖片 01.png，02.png，03.png 和 04.png 拼接的。

```
cat index.html
```

![TB1O_gutpY7gK0jSZKzXXaikpXa-699-562.png](https://img-blog.csdnimg.cn/img_convert/b0c28b5a9aa23876a77fb1a936edf957.png)

## 使用ECS+OSS實現圖片網站
1.本小節將儲存在本地的圖片上傳到 OSS Bucket 中，從而，圖片分享網站將從 OSS Bucket 中讀取圖片，本地無需儲存圖片。

2.在ECS例項的 /alidata/www/default 目錄中，執行如下命令，進入 cfg.json 的編輯頁面，並修改 OSS 的配置資訊。

```
vim cfg.json
```

![TB1aUgwtrr1gK0jSZFDXXb9yVXa-579-37.png](https://img-blog.csdnimg.cn/img_convert/01f667ef21ad26ad57967458761727f8.png)

在鍵盤上輸入 “I”，切換到編輯模式，在編輯頁面中，修改如下引數資訊。

id： 雲產品資源 分配的 AK ID 值；
secret： 雲產品資源 分配的 AK Secret 值;
endpoint：請根據下面的 OSS地域與Endpoint對應關係表，輸入 雲產品資源 所分配 地域 相對應的 外網Endpoint 。例如：分配的 地域 為 華東1（杭州），則輸入 oss-cn-hangzhou.aliyuncs.com;
bucket： 雲產品資源 分配的 OSS資源 Bucket 名稱;
object_dir： 雲產品資源 分配的 OSS資源 Object路徑。
完成後，首先按 esc鍵 退出編輯狀態，然後輸入下面命令儲存並退出編輯頁面。

```
 :wq
```

OSS 地域 與 外網 Endpoint 對應關係表：

地域

外網Endpoint

華東 1 (杭州)

oss-cn-hangzhou.aliyuncs.com

華東 2 (上海)

oss-cn-shanghai.aliyuncs.com

華北 1 (青島)

oss-cn-qingdao.aliyuncs.com

華北 2 (北京)

oss-cn-beijing.aliyuncs.com

華南 1 (深圳)

oss-cn-shenzhen.aliyuncs.com

![TB1xfLVukL0gK0jSZFAXXcA9pXa-1272-140.png](https://img-blog.csdnimg.cn/img_convert/2c9d84d1d7d02652a4466a3018adfce1.png)

3.執行如下命令，將 01.png 上傳到 OSS，該指令碼使用 OSS 提供的 API 介面 put_object_from_file() 將本地檔案上傳到 雲產品資源 分配的 Object 路徑 中。

python oss_upload.py 01.png
然後，執行相同命令，只把 01.png 改為 02.png 等，將 02.png、03.png 和 04.png三個圖片分別上傳到 OSS。接下來，使用者將訪問 OSS 管理控制檯，並檢視上傳到 OSS 的檔案。

說明：透過 Python SDK 的方式上傳本地檔案到 OSS 的具體方法，請參考實驗 SL003 使用OSS API上傳和下載檔案。

![TB1pWMBtAT2gK0jSZFkXXcIQFXa-531-190.png](https://img-blog.csdnimg.cn/img_convert/25dc37ff912be594dc825756dd3730df.png)

4.複製OSS控制檯地址，在Chromium瀏覽器開啟新頁籤，貼上並訪問OSS控制檯。

https://oss.console.aliyun.com/
5. 進入 OSS 管理控制檯後，在 Bucket 列表中，點選 雲產品資源 提供的 Bucket名稱，例如 adc-oss-969hd2，進入 adc-oss-969hd2 Bucket 管理頁面。

![TB1Soq.v8r0gK0jSZFnXXbRRXXa-1536-833.png](https://img-blog.csdnimg.cn/img_convert/436161572631ddb9b87ff75a6515f743.png)

6.點選 【檔案管理】 ，可以檢視到當前 Object 列表中存在一個或多個資料夾。點選 雲產品資源 分配的一級 Object 路徑。例如：使用者分配的 Object 路徑 為 OSSCTY/u-xxx/，則 OSSCTY 為一級 Object 路徑。點選 OSSCTY，進入 Object “OSSCTY” 路徑中。

![TB1IPS9v1H2gK0jSZJnXXaT1FXa-1382-571.png](https://img-blog.csdnimg.cn/img_convert/f069ae03eded09e43158bbadbbe34a8a.png)

在 “OSSCTY” 的 Object 路徑中，點選分配的二級 Object 路徑。例如：使用者分配的 Object 路徑 為 OSSCTY/u-xxx/，則 u-xxx 為二級Object 路徑。點選 u-xxx 進入Object OSSCTY/u-xxx 路徑中。

此時，在 Object 管理的列表的第一行中，使用者可以檢視到當前 Object 路徑資訊。在 Object 管理的 Object 列表中，展示已上傳並儲存到 “SOSSCTY/u-xxx /” 路徑下的 4 張圖片：01.png，02.png，03.png，04.png。

![TB1PzS9v1H2gK0jSZJnXXaT1FXa-1212-703.png](https://img-blog.csdnimg.cn/img_convert/9dfd3df2d336a916c60365a901609842.png)

7.切換回終端頁面，執行下面命令進入 alidata/www/default 目錄。

cd /alidata/www/default
然後執行如下命令，刪除當前目錄中的所有 “ .png ” 檔案，也就是，圖片分享網站中讀取的 4 張圖片 01.png, 02.png, 03.png 和 04.png。

```
rm -rf *.png
```

執行檢視檔案命令，檢視當前目錄中無圖片檔案，證明圖片已刪除。

```
ls
```

![TB1N5kBtrj1gK0jSZFuXXcrHpXa-578-93.png](https://img-blog.csdnimg.cn/img_convert/1ea6d257565c26754d7a5e10c6be9e51.png)

8.開啟（在瀏覽器的位址列中，輸入 雲產品資源 分配的 ECS 外網地址 並訪問）或重新整理圖片分享網站主頁面，檢視到當前頁面中所有圖片均無法正常顯示。這是因為圖片分享網站讀取的是本地圖片檔案，而本地儲存的圖片檔案已被刪除，因此無法讀取到圖片資訊。

注意：

若訪問頁面仍舊可以顯示圖片，可能是由於瀏覽器快取問題，建議清理下瀏覽器的快取或者換一個瀏覽器檢視ECS伺服器主頁。

![TB1VyzSuXT7gK0jSZFpXXaTkpXa-814-603.png](https://img-blog.csdnimg.cn/img_convert/832a94c41fc15859861e41c2e86abc60.png)

9.接下來，將重新配置 index.html 中的圖片訪問資訊，按照以下步驟將圖片連結修改為上傳到 OSS 的圖片的 URL 訪問地址：

1) 切換回 OSS 管理控制檯頁面，進入 雲產品資源 分配的 Object 路徑 中，獲取圖片的URL訪問地址。點選 01.png ,找到並點選右側彈出框的 【複製檔案 URL】。

![TB1vtK9vW61gK0jSZFlXXXDKFXa-1573-740.png](https://img-blog.csdnimg.cn/img_convert/4a2c168225488d94abc942dfd56e3576.png)

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 的儲存地址。

![TB1V_2Uumf2gK0jSZFPXXXsopXa-965-537.png](https://img-blog.csdnimg.cn/img_convert/53e786bf05bab9daa4a6b59fc1fc401d.png)

4) 完成所有圖片的修改後，點選 esc鍵 退出編輯狀態，執行以下命令儲存並退出編輯頁面。

```
:wq
```

10.在瀏覽器中，重新整理 ECS例項的 外網地址 的訪問頁面，頁面將再次顯示 花園 的圖片，說明現在網站可以使用儲存在 OSS 上的圖片來顯示頁面。

![TB1NsjUuoT1gK0jSZFrXXcNCXXa-537-605.png](https://img-blog.csdnimg.cn/img_convert/eea31fd6b638c5553723ed0e650fffb5.png)</ecs></ecs>

OSS雲端儲存管理實踐（體驗有禮）

相關文章