搭建基於OSS的圖片分享網站-反饋有禮
“雲上漫步”第二期-反饋有禮
參與體驗產品，提交反饋，就有機會獲得定製揹包，T恤，以及5到100元物件儲存OSS專屬代金券~
反饋地址：https://developer.aliyun.com/adc/series/ysmb2
簡介
（阿里雲資源無費用無門檻，免費取用）
本場景將提供一臺配置了CentOS 7.7作業系統的ECS例項（雲伺服器）和一個物件儲存OSS。通過本教程的操作，您可以基於CentOS 7.7作業系統的ECS例項和檔案儲存OSS，搭建一個圖片分享網站。
背景知識
雲伺服器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服務中，這樣可以極大的提高使用者的頁面訪問速度。
獲取資源後連線ECS伺服器
本步驟將指導您如何使用Workbench遠端連線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公網地址()彈性IP)>，訪問圖片分享網站。
說明 ：您可以在雲產品資源列表中檢視到您的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鍵進入編輯模式，找到下的標籤中的src引數，將scr引數修改為第十三步的URL。
3）重複上一步驟，分別修改、和下的標籤中的src引數。
注意 ：、和下的標籤中的src引數，需要修改為OSS中對應的檔案的URL。
修改完成後檔案內容如下所示。
4）按下Esc鍵後，輸入:wq後按下Enter鍵儲存並退出。
7、在Chromium網頁瀏覽器中，在位址列中輸入http://<ECS伺服器的彈性IP)>並訪問。
返回如下頁面，您可以看到“花園”圖片，說明現在網站可以使用儲存在OSS上的圖片來顯示頁面。