在本實驗中，已建立的ECS作為web伺服器，瀏覽器中直接訪問其IP地址會顯示包含四個小圖片的頁面，並且四個圖片都儲存在ECS本地。

場景體驗目標

開始實驗後，系統會自動去建立一臺Linux ECS。其中，建立的ECS中已經部署了web應用和OSS python SDK。在本實驗中，已建立的ECS作為web伺服器，瀏覽器中直接訪問其IP地址會顯示包含四個小圖片的頁面，並且四個圖片都儲存在ECS本地。通過呼叫OSS API將四個圖片上傳到OSS中，同時刪除儲存在ECS本地的四個圖片，此時訪問ECS IP將會看到頁面中沒有圖片可以顯示。為了在頁面中顯示原有的四個圖片，實驗中需要修改web應用伺服器根目錄下預設訪問頁面中的圖片地址，將圖片地址修改為四個圖片分別在OSS中的訪問地址。

體驗此場景後，你可以掌握的能力有：

1. 通過阿里雲管理控制檯管理物件儲存服務OSS

2. 在實際的web開發中使用物件儲存服務OSS儲存頁面中的圖片

3. 呼叫OSS API上傳圖片

背景知識

阿里雲物件儲存（Object Storage Service，簡稱OSS），是阿里雲對外提供的海量、安全、低成本、高可靠的雲端儲存服務。使用者可以通過呼叫API，在任何應用、任何時間、任何地點上傳和下載資料，也可以通過使用者Web控制檯對資料進行簡單的管理。OSS適合存放任意檔案型別，適合各種網站、開發企業及開發者使用。

阿里雲OSS圖片處理服務（Image Service，簡稱 IMG） ，是阿里雲OSS對外提供的海量、安全、低成本、高可靠的圖片處理服務。使用者將原始圖片上傳儲存在OSS上，通過簡單的 RESTful 介面，在任何時間、任何地點、任何網際網路裝置上對圖片進行處理。圖片處理服務提供圖片處理介面，圖片上傳請使用OSS上傳介面。基於IMG，使用者可以搭建出跟圖片相關的服務。圖片服務處理的圖片來自於OSS，所以圖片的上傳實際是上傳到OSS的同名Bucket中。

在真實的工作場景中，一般將圖片、音訊、視訊等儲存到OSS服務中，這樣可以極大的提高使用者的頁面訪問速度。

實驗詳情

基於單ECS的圖片網站

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

2.首先，在瀏覽器中新建一個頁面。然後，在瀏覽器的位址列中，輸入本次實驗分配的 ECS 例項彈性IP。檢視到當前頁面中顯示 1 張“花園”的圖片，該圖片實際是由 4 張小圖片組成的。

3.遠端登入到 ECS 伺服器，檢視圖片並分享網站的原始碼。登入資訊請使用本實驗雲產品資源提供的 ECS 伺服器的彈性IP，使用者名稱和密碼。

說明：本實驗 ECS 伺服器為Linux 作業系統，因此遠端登入 ECS 例項的詳細步驟，請參考雲

4.登入到 ECS 伺服器後，執行如下命令，進入網站系統的根目錄。

cd /alidata/www/default

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

ls

在瀏覽器中，新建一個頁面，並在位址列中輸入<ECS例項外網地址>/01.png，可以檢視到 01.png 的圖片內容。同理，可以檢視 "02.png", "03.png" 以及 "04.png" 的圖片內容。

5.使用如下命令，檢視網站首頁的原始碼，可以看到圖片分享網頁中顯示的圖片，是從網站根目錄/alidata/www/default中，讀取圖片01.png，02.png，03.png和04.png拼接的。

cat index.html

使用ECS+OSS實驗圖片網站

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

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

vim cfg.json

在鍵盤上輸入“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 對應關係表：

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上傳和下載檔案。

4.首先，點選頁面左側雲產品資源， 然後點選一鍵複製登入url，用瀏覽器隱身視窗登入控制檯；

在阿里雲 RAM 登入介面，依次輸入雲產品資源提供的子使用者名稱稱、子帳號密碼，然後點選登入，進入阿里雲管理控制檯。

5.登入成功後，在左側列表點選 產品與服務 ，然後在主頁面找到並點選物件儲存 OSS，從而進入 OSS 管理控制檯。

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

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

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

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

8.返回 ECS 例項終端頁面，執行下面命令進入alidata/www/default目錄。

cd /alidata/www/default

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

rm -rf *.png

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

ls

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

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

10.接下來，將重新配置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) 在<!-- 圖片1 -->下，找到第一張圖片的連結引數src="01.png"，刪除 01.png，並貼上上面步驟中複製的上傳到 OSS01.png圖片的訪問

地址。 同理，修改02.png，03.png，04.png的連結地址為 OSS 的儲存地址。

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

:wq

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