## 體驗簡介

本場景將提供[一臺基礎環境為CentOS的ECS（雲伺服器）例項和已經建立好的PolarDB資料庫例項](https://developer.aliyun.com/adc/series/activity/618)。我們將會在這臺伺服器上安裝WordPress，幫助您快速搭建自己的雲上部落格。

![6月活動banner-天池技術-750-450.png](https://img-blog.csdnimg.cn/img_convert/69e9c1886c3627aed28bd5e345c1073f.png)
618 有獎體驗 [點選前往，贏取貓超卡！](https://developer.aliyun.com/adc/series/activity/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免費資源請至[阿里云云起實驗室](https://developer.aliyun.com/adc/series/activity/618)免費領取
1、雙擊開啟虛擬桌面的**Chromium瀏覽器**。

2、在RAM使用者登入框中單擊**下一步**，並複製貼上頁面左上角的**子使用者密碼**到**使用者密碼輸入框**，點選**登入**。

3、複製下方地址，在**Chromium瀏覽器**開啟新頁籤，貼上並訪問雲伺服器ECS控制檯。

```
https://ecs.console.aliyun.com
```

4、在左側導航欄中，選擇**例項與映象>例項**。

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

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

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

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

**說明 ：**您可在雲產品資源列表中檢視目標例項的例項ID。

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

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

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

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

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

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

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

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

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

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

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

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

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

返回如下頁面，您可以檢視到當前頁面中顯示1張 “花園” 的圖片，該圖片實際是由 4 張小圖片組成的。

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

\2. 切換至Workbench遠端連線頁籤，執行如下命令，進入網站系統的根目錄。

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

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

```
ls
```

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

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

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

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

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

```
cat index.html
```

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

![img](https://img-blog.csdnimg.cn/img_convert/c773869de88dae941970d75a2ffc178b.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路徑**。

新增後的檔案內容如下所示。

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

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

2、執行如下命令，將01.png上傳到OSS的Object路徑中。

**說明：**

該指令碼使用OSS提供的API介面put_object_from_file()，將本地檔案上傳到**雲產品資源**列表OSS的Object路徑中。透過Python SDK的方式上傳本地檔案到OSS的具體方法，請參考實驗[SL003 使用OSS API上傳和下載檔案](https://edu.cloudcare.cn/courses/afd734bef0c04ce6a192b8fe68acdb86/detail)。

```
python oss_upload.py 01.png
```

返回結果如下，表示您已成功把01.png上傳到OSS的Obeject中。

![img](https://img-blog.csdnimg.cn/img_convert/981b48752e895ea16664be6b0ebf5229.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列表**。

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

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

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

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

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

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

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

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

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

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

返回如下頁面，您可以在OSS的Object二級路徑中，看到從ECS例項上傳到OSS的四張圖片。

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

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

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

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

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

```
ls
```

返回如下結果，您可以看到四張圖片已經刪除。

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

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

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

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

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

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

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

5、在**詳情**皮膚中，單擊URL中的**複製檔案URL**。

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

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

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

```
vim index.html
```

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

3）重複上一步驟，分別修改、和下的<img alt="阿里雲618有獎體驗：搭建基於OSS的圖片分享網站" width="640" height="360">標籤中的src引數。

**注意 ：**、和下的<img alt="阿里雲618有獎體驗：搭建基於OSS的圖片分享網站" width="640" height="360">標籤中的src引數，需要修改為OSS中對應的檔案的URL。

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

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

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

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

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

![img](https://img-blog.csdnimg.cn/img_convert/85efedf6ebcedfd76b600112bdab5ad6.png)</ecs></ecs></ecs></ecs>

阿里雲618有獎體驗：搭建基於OSS的圖片分享網站

相關文章