## 簡介

場景介紹基於雲開發平臺、Midway FaaS 和 雲資料庫RDS MySQL 版快速開發一個 Todo List。

## 背景知識
**體驗實驗室**
開發者透過場景化實驗掌握雲端計算的what和how。免費雲資源，真實雲環境，豐富實踐場景

地址：https://developer.aliyun.com/adc/labs/

**什麼是雲開發平臺？**

雲開發平臺是阿里雲所提供的一站式、全雲端的開發平臺，開啟瀏覽器就可以開發、除錯、上線。點選進入雲開發平臺。

**什麼是Midway FaaS？**

一個用於構建 Node.js 雲函式的 Serverless 框架，幫助開發者專注於產品開發，降低維護成本。

歡迎 Star! https://github.com/midwayjs/midway-faas

**RDS資料庫**

阿里雲關係型資料庫RDS（Relational Database Service）是一種穩定可靠、可彈性伸縮的線上資料庫服務，提供容災、備份、恢復、遷移等方面的全套解決方案，徹底解決資料庫運維的煩惱。

## 建立應用

1.登入雲開發平臺。開啟網址https://workbench.aliyun.com/，使用阿里雲賬號登入，按照提示建立團隊，點選同意協議。沒有阿里雲賬號的使用者，在登入頁面註冊後進行登入即可。為了保證最好的使用體驗，請使用Chrome瀏覽器。

2.建立應用。開啟快速開始 https://workbench.aliyun.com/page/quickstart，點選建立新應用
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094318664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

3.雲資源訪問授權。如果您之前沒有使用過雲開發平臺，會出現雲資源授權管理的選項，往下拉出現直至同意授權的字樣，點選「同意授權」後出現授權成功，點選進入「下一步」
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094326102.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
同意授權並顯示授權成功後點選下一步。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094338378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
4.建立應用模板。分別選擇開發語言NodeJS，透過模版建立。點選官方模版，選擇Midway Serverless MySQL資料庫示例應用模板，如圖所示。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2021042609434784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
5.填寫應用基本資訊。按圖示填寫應用的名稱和應用介紹、計算服務。沒有產品可選點選旁邊的自動建立產品線就會出現一個上海區域的產品了。資訊填寫完成後點選下一步。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2021042609435432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
6.雲服務管理。檢視應用依賴的雲服務的開通情況，未開通的服務右鍵點選立即開通，在新標籤開啟所有服務開通頁，根據提示一一開通。開通後應用卡片環境管理後面的小圖示全部變成綠色的已開通對勾形狀，才算完成應用的建立。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094401714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

## 部署應用
上一節已經建立好了應用，本節介紹對應用進行開發部署流程。
1.進入開發。應用建立好以後會跳轉到應用詳情頁，點選應用詳情頁上的 [開發部署] 進入CloudIDE開發介面。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094419175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
2.安裝依賴。點選 [終端]，然後在終端輸入框中輸入以下命令 npm i 安裝依賴。依賴包含的包比較多，全部下載需要一點時間，耐心等待即可，載入完畢後，可以看見以下圖片中的提示。

```
npm i 
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094434195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094438540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
3.進行部署。點選CloudIDE中的 [部署tab欄]，然後點選 [部署] 開始部署。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094445275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
4.確認部署資訊。在彈出框中彈出的是該應用預設配置的資料庫資訊，不需要進行配置。如果長期使用配置自己的資料庫，可以按照後續 “資料庫設定”一節進行操作。點選[繼續部署] 進入部署階段。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094453799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
5.日常環境 部署成功。日常環境 部署成功後如下圖所示，可以使用附件中標註的臨時域名進行訪問測試。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094502390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
6.臨時域名訪問。複製生成的臨時域名進行訪問，可以進入Todo list web應用介面。如果個人應用需要發到線上，繫結個人線上域名繼續在「線上環境」部署即可
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094509882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
Todolist web應用介面顯示的待辦事項都是儲存在預設配置好的資料庫的資料庫表中，將在後續 “資料庫設定”一節中進行說明。

## 下線應用
1. 函式計算彈性例項相關的雲資源有一定的免費額度，額度消耗完成後會按量付費。如果不需要保留應用，請及時操作下線，以免產生不必要的費用，在該應用管理頁面點選下線即可。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094524289.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

## 資料庫設定
前面的章節使用的是應用內提供的的免費預設資料庫，資料庫配置有兩種方式，一種是在開發平臺設定，另外一種是在CloudIDE中進行配置，下面將分別介紹 。

1.在雲開發平臺中設定。

a) 在應用詳情中，點選 [開發部署] ，然後再次點選[應用配置]開啟配置頁面。

在應用開發中，通常要使用一些敏感的資訊去進行資料相關的操作，比如資料庫連線資訊、鑑權相關資訊等等。如果將這些資訊直接 hardcode 寫在程式碼裡，會帶來潛在的因為程式碼洩漏而造成敏感資訊跟著被洩漏的風險。為了降低這種風險，雲開發平臺推薦使用「環境變數」的方式來代替 hardcode 的做法。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094538412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
b）修改環境變數。因為本專案設定了預設的環境變數，所以可以看見已經建立好了的資料庫連線資訊，您可以在該介面將資料庫連線資訊修改為您自己的RDS資料庫，或者可以根據您自己的需求來建立其他的環境變數。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094546184.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
預設環境變數說明：

MIDWAY_RDS_HOST 	RDS 資料庫連線地址
MIDWAY_RDS_PORT RDS 資料庫連線埠
MIDWAY_RDS_DBNAME RDS 資料庫名稱
MIDWAY_RDS_USERNAME RDS 資料庫賬戶名稱
MIDWAY_RDS_PASSWORD RDS 資料庫賬戶密碼

2.或者，你也可以直接在程式碼中更改資料庫連線配置。

首先檢視資料庫配置檔案。參考以下附件的路徑檢視資料庫配置檔案 config.default.ts 。該應用預設程式內配置了預設資料庫資訊，如果需要開發您自己的應用需要在該配置檔案中配置您自己的資料庫資訊。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210426094649360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
3.Todolist應用的待辦事項全部都是從資料庫中“todo” 表中讀取的，預設的資料庫已經建立好了該表。如果您已經將資料庫連線資訊更改為了您自己的資料庫，那麼您需要在數您自己的據庫中執行以下建立表的語句，對應的建立表的語句為：

```
CREATE TABLE `todo` (

`id` bigint(20) NOT NULL AUTO_INCREMENT,

`todo` varchar(255) NOT NULL,

`status` int(11) NOT NULL,

`gmt_create` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8
```

利用RDS MySQL資料庫雲開發ToDo List

相關文章