## “雲上漫步”第二期-反饋有禮
參與體驗產品，提交反饋，就有機會獲得定製揹包，T恤，以及5到100元物件儲存OSS專屬代金券~
反饋地址：[https://developer.aliyun.com/adc/series/ysmb2](https://developer.aliyun.com/adc/series/ysmb2)

## 簡介
（阿里雲資源無費用無門檻，免費取用）
本場景將[提供一臺配置了CentOS 7.7作業系統的ECS例項（雲伺服器）和一個物件儲存OSS](https://developer.aliyun.com/adc/scenario/90b2bceaf9954d6f8780f26a1c913385)。透過本教程的操作，您可以基於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、在左側導航欄中，選擇例項與映象>例項。
![370512f1595d4eb89ab30d05e5a325aa.png](https://img-blog.csdnimg.cn/img_convert/ebcf723024e6f8aa2565c5fb01f89fe1.png)

5、在例項頁面頂部，選擇資源所在地域。例如下圖中，地域切換為華東2（上海）。

![p349125.png](https://img-blog.csdnimg.cn/img_convert/5c3b6e86d8c2a3f27ad805c2b940d9fb.png)

6、在例項頁面，找到您的ECS例項，單擊操作列下的遠端連線。

說明 ：您可在雲產品資源列表中檢視目標例項的例項ID。
![685ed8d7175b469d86e9f1dd3623a75a.png](https://img-blog.csdnimg.cn/img_convert/7e71f7d2fb1548b1fdc219a82f8a7eff.png)

![f311a2bdee6448be89c9c416ca807ae2.png](https://img-blog.csdnimg.cn/img_convert/fabe3934392161c3c3ae9b30f5fd9006.png)

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

![p349130.png](https://img-blog.csdnimg.cn/img_convert/66715940861401441013a05980c47a8f.png)

8、在登入例項對話方塊中，輸入ECS伺服器的密碼，單擊確定。

說明：您可以在雲產品資源列表中檢視到您的ECS伺服器密碼。

![p349131.png](https://img-blog.csdnimg.cn/img_convert/b3273bbd29e651cb4cfa1faaba17f480.png)

返回如下頁面，表示您已經成功遠端連線到ECS伺服器。

![f0aea0b97c1743fb892cd9440448a2a9.png](https://img-blog.csdnimg.cn/img_convert/64e88cb626e5c66a32c14f20fb817b70.png)

## 展示基於ECS的圖片分享網站

本步驟為您展示基於ECS已搭建完成的圖片分享網站，以及圖片分享網站的原始碼。

1.在Chromium瀏覽器開啟新頁籤，在位址列輸入http://<ecs>，訪問圖片分享網站。

說明 ：您可以在雲產品資源列表中檢視到您的ECS雲伺服器的彈性IP。

返回如下頁面，您可以檢視到當前頁面中顯示1張 “花園” 的圖片，該圖片實際是由 4 張小圖片組成的。
![f2bfb17d9af143319345df8ce00de0c3.png](https://img-blog.csdnimg.cn/img_convert/2a7d2e498df7571d89892845046c986f.png)
2. 切換至Workbench遠端連線頁籤，執行如下命令，進入網站系統的根目錄。

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

3.執行如下命令，檢視網站系統的根目錄下的檔案。

```
ls
```

返回結果如下，您可以在該目錄下看到有01.png、02.png、03.png和04.png四張圖片，圖片分享網站所展示的“花園”圖片就是由這四張圖片組成。
![66d5e8b565fb47868bc90f3a38055c8b.png](https://img-blog.csdnimg.cn/img_convert/3df349c2a6ca26f13cbd4af7823ad8f7.png)

4.在Chromium網頁瀏覽器開啟新頁籤，在位址列中輸入http://<ecs>/01.png並訪問。

返回如下頁面，您可以看到01.png的圖片內容。重複第四步，您可以看到02.png, 03.png和04.png的圖片內容。

![c123e5bdf3354e099d3903e95f7ddcc2.png](https://img-blog.csdnimg.cn/img_convert/e68e357c6f2a65dfdc836b2389616a54.png)

5.執行如下命令，檢視圖片分享網站的原始碼。

cat index.html
返回如下結果，您可以看到圖片分享網頁中顯示的圖片，是從網站系統根目錄/alidata/www/default中，讀取圖片01.png，02.png，03.png和04.png拼接的。

![1fd8390917b64864b717c2ec750d339f.png](https://img-blog.csdnimg.cn/img_convert/c4f9cb5027a90f2f4a23651c69d15df1.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路徑。
新增後的檔案內容如下所示。

![631d33f21f224d71a18c09f7c25b4aba.png](https://img-blog.csdnimg.cn/img_convert/c3b7845bfe124011c4d4eee6c12b0a31.png)

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中。

![f8cf376732b24efb8cc4154168481705.png](https://img-blog.csdnimg.cn/img_convert/54112f89c28aa5cd94614f6a97519ce4.png)

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列表。
![a3b9e8df1e8b46338ff5fd93686b0bac.png](https://img-blog.csdnimg.cn/img_convert/25d519ea9ded88659277bfe49fec40b5.png)

6、在Bucket列表頁面，單擊Bucket名稱。

說明 ：您可以在雲產品資源列表中檢視到您的OSS的Bucket名稱。

![a96263c2f926488e8cda0f4c2b575fdd.png](https://img-blog.csdnimg.cn/img_convert/e3a776331e793133909346eaf2ea4d6b.png)

7、在檔案管理頁籤，您可以看到當前Object列表中存在一個或多個資料夾。根據雲產品資源列表中OSS的Object一級路徑，單擊相應的檔名。

說明 ：如果雲產品資源列表中OSS的Object路徑為OSSCTY/u-xxx/，則OSSCTY為一級Object路徑。
![ae166ce5a1814ddda4bee1ef45d6348a.png](https://img-blog.csdnimg.cn/img_convert/33263c141b0dd27f6d025407b49e9dde.png)

8、在Object一級路徑中，根據雲產品資源列表中OSS的Object二級路徑，單擊相應的檔名。

說明 ：如果雲產品資源列表中OSS的Object路徑為OSSCTY/u-xxx/，則u-xxx為二級Object路徑。

![087fd8b48bd9419c98215a42eb6f23f4.png](https://img-blog.csdnimg.cn/img_convert/e9b545de14c8ebfefca64b8d053635ca.png)

返回如下頁面，您可以在OSS的Object二級路徑中，看到從ECS例項上傳到OSS的四張圖片。
![34a8d1c996fe4dc882e7f47b2f5a41c4.png](https://img-blog.csdnimg.cn/img_convert/0342c2b07b973a304edc1b1818362e50.png)

## 讀取OSS儲存圖片
本步驟將指導您如何修改圖片分享網站的原始碼，實現圖片分享網站從OSS中讀取圖片。

1、切換至Workbench遠端連線頁籤，執行如下命令，刪除當前目錄中的所有.png檔案。

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

2、執行如下命令，檢視當前目錄檔案。

ls
返回如下結果，您可以看到四張圖片已經刪除。
![59b6c22e8fde4ed6bda019a3d674d273.png](https://img-blog.csdnimg.cn/img_convert/6c3cca53d5525ad680641e3948291f6d.png)

3、在Chromium網頁瀏覽器開啟新頁籤，在位址列中輸入http://<ecs>並訪問。

返回如下頁面，您可以看到當前頁面中所有圖片均無法正常顯示。這是因為圖片分享網站讀取的是ECS例項中的圖片檔案，而ECS例項中的圖片檔案已被刪除，因此無法讀取到圖片資訊。

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

![99bfe21429244812b4a5bc647be82413.png](https://img-blog.csdnimg.cn/img_convert/d1999773492391939dbb31e73b1a5239.png)

4、切換至檔案儲存OSS管理控制檯頁籤。在檔案管理頁籤中，單擊01.png。

![2fb196c135c840cdaa411d3b450c5e18.png](https://img-blog.csdnimg.cn/img_convert/bd8faf10733ac8662bc30dbc35dc4605.png)

5、在詳情皮膚中，單擊URL中的複製檔案URL。
![a9897bd89ff5485285675e0cbae8398f.png](https://img-blog.csdnimg.cn/img_convert/180e077db780b217e041f62b60481a40.png)

6、切換至Workbench遠端連線頁籤，修改圖片分享網站的原始碼。

1）執行如下命令，編輯index.html。

```
vim index.html
```

2）按i鍵進入編輯模式，找到下的<img alt="搭建基於OSS的圖片分享網站-反饋有禮" width="640" height="360">標籤中的src引數，將scr引數修改為第十三步的URL。

3）重複上一步驟，分別修改、和下的<img alt="搭建基於OSS的圖片分享網站-反饋有禮" width="640" height="360">標籤中的src引數。

注意 ：、和下的<img alt="搭建基於OSS的圖片分享網站-反饋有禮" width="640" height="360">標籤中的src引數，需要修改為OSS中對應的檔案的URL。

修改完成後檔案內容如下所示。

![3d261a29224b42ed8e623ea90728244c.png](https://img-blog.csdnimg.cn/img_convert/6ce33274a3a2ec6695dfa43919d6b9d6.png)

4）按下Esc鍵後，輸入:wq後按下Enter鍵儲存並退出。

7、在Chromium網頁瀏覽器中，在位址列中輸入http://<ecs>並訪問。

返回如下頁面，您可以看到“花園”圖片，說明現在網站可以使用儲存在OSS上的圖片來顯示頁面。

![7e194cd074e048dea4684d658283e06c.png](https://img-blog.csdnimg.cn/img_convert/eaf6dd8e49cd242d0c26b58acfcf73aa.png)</ecs></ecs></ecs></ecs>

搭建基於OSS的圖片分享網站-反饋有禮

相關文章