新能力 | 雲開發CLI工具快速入門

雲開發 CLI 是一個開源的基於 Node 編寫的命令行工具,用於幫助用戶快速、方便的部署基於雲開發的項目、管理雲開發資源。

雲開發 CLI 支持環境配置、雲函數管理、文件管理、靜態網站管理、雲接入管理等多種能力,共計 50+ 的命令。雲開發 CLI 可以幫助你快速的創建、更新、測試雲函數,“一鍵” 部署靜態網站等,能有效加速你的開發效率。

雲開發支持下面的各種能力:

  1. 項目模板:爲了降低用戶使用 CloudBase CLI 進行項目開發的門檻,CloudBase CLI 提供了初始化命令幫助用戶初始化雲開發項目。CloudBase CLI 會獲取最新的模板列表,用戶可以選擇下載模板項目到本地,快速開始雲開發項目的開發。
  2. 配置文件:CloudBase CLI 使用配置文件簡化操作命名操作,當使用命令參數缺省時,CloudBase CLI 會從配置文件中解析相關參數並使用,方便開發者以更簡單的方式使用 CloudBase CLI。
  3. 環境操作:支持展示環境信息、修改 Web 安全域名、登錄方式配置等。
  4. 雲函數:支持部署、更新雲函數,修改雲函數配置,配置雲接入,刪除雲函數,本地調用雲函數,查看調用日誌等。
  5. 文件存儲:支持上傳、下載、刪除文件/文件夾等操作。
  6. 靜態網站:支持一個命令部署網站,也支持上傳、下載、刪除文件/文件夾等操作。

下面將以部署一個 React SPA Web 應用爲例,綜合應用雲開發的自定義登錄、雲函數、數據庫等功能,展示雲開發 CLI 的工程能力。

Demo 體驗鏈接:雲開發 Web 端實例

操作步驟

1、準備

2、初始化項目

3、獲取配置

4、運行項目

5、部署

準備

  1. 騰訊雲控制檯開通雲開發,創建按量計費的環境。我們需要用到雲開發靜態託管服務,目前只有按量計費的環境才支持靜態託管。
    image
  2. 參考雲開發文檔,開通靜態託管
  3. 安裝雲開發 CLI
npm install -g @cloudbase/cli
  1. 登錄
tcb login

初始化項目

CLI 提供了初始化命令幫助用戶初始化雲開發項目,運行 tcb init 命令,選擇下載 Node - React Web 示例模板

image

項目結構
下面是 React Web 示例的目錄結構, functions 目錄存放了項目中需要使用的雲函數,cloudbaserc.js爲雲開發項目的配置文件,包含了環境 Id、雲函數配置等。

image

獲取配置

你需要到雲開發控制檯 https://console.cloud.tencent.com/tcb 獲取以下配置內容

環境 Id - envId
環境 Id 是每個雲開發環境的唯一標誌,可以在概覽頁面獲取

image

生成自定義登錄祕鑰
在這個例子中,我們要使用自定義登錄功能,實現 Web 端登錄,所以需要先下載自定義登錄祕鑰

image

獲取文件存儲的基本路徑
我們可以使用 tcb storage:upload 命令把 public 文件夾中的 icon.png 上傳到雲存儲中,並通過 tcb storage:url獲取文件的訪問鏈接,如下圖所示

image

運行項目

這已經是一個完整的 Web 項目,在開始使用 CLI 工具部署此項目前,你需要把項目中 envId 等配置替換成你在上面獲取的配置。

配置
首先需要把 src/config/index.ts 中的 storageBaseUrl 換成 icon.png 鏈接的基礎地址,如:https://xxxx.tcb.qcloud.la,鏈接不包含 icon.png,然後,把 functions/custom-login/config 中的 key 和 keyId 設置爲你獲取到到自定義登錄祕鑰中的 private_keyprivate_key_id

部署雲函數與創建數據庫集合
這裏我們藉助雲函數的能力來實現自定義登錄,在項目根目錄運行下面的命令來部署雲函數

tcb functions:deploy custom-login

image

下面,爲了方便的調用雲函數,我們可以使用雲函數的 HTTP 觸發功能,在函數配置中,設置 HTTP 觸發路徑,點擊保存,即可通過 HTTP 鏈接觸發雲函數

image

同理,運行下面的命令,部署 base64 函數

tcb functions:deploy base64

在控制檯,添加 demo_web 集合

image

安裝依賴與運行

最後,安裝依賴

yarn

運行

yarn run dev

訪問 localhost:3000,你可以看到下面的頁面

image

在使用雲開發的服務前,需要先進行登錄,在輸入框中輸入一個用戶名,點擊登錄按鈕,你可以看到登錄成功的提示。接下來你就可以點擊雲函數或數據庫菜單,體驗基於雲開發能力打造的示例。

部署

在本地開發完成後,我們可以使用雲開發的靜態託管服務部署我們的網站。靜態託管服務爲開發者提供靜態網頁託管的能力,需要在使用時單獨開通,進入靜態託管選項,點擊開始使用,即可進入開通流程,稍等幾分鐘即可開通完成。

image

在等待的時間裏,我們先構建網站 Demo,運行 yarn run build 打包雲開發 Web Demo,我們可以看到到了一個 build 目錄,即爲輸出結果。

在靜態網站開通完成後,我們可以直接使用 CLI 部署網站,運行

# 部署 build 目錄中所有的文件
tcb hosting:deploy build

image

命令執行完成後,進入靜態託管選項,可以看到 build 目錄中的文件已經上傳完成
!
image

進入設置選項,我們可以點擊默認域名鏈接,訪問部署完成的頁面。需要注意的是,默認域名僅供測試使用,限制訪問速度 10KB/S,所以展示速度會比較慢,需要耐心等待。這裏建議綁定自己的備案域名,加快訪問速度。

小結

雲開發 CLI 支持豐富的資源管理能力,簡化了雲函數部署、靜態網站部署、文件管理等操作流程,圍繞項目工程化,能有效加速你的項目迭代開發。

最後,歡迎大家使用雲開發

學習資料:

雲開發社區官網:www.cloudbase.net

快速安裝雲開發 CLI:https://docs.cloudbase.net/quick-start/install-cli.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章