下載前端程式碼範例
在"官方解決方案"或"我的解決方案"頁面中, 按如下方式下載程式碼範例
單擊解決方案卡片底部工具列中的代碼表徵圖按鈕（</>）即可下載程式碼範例。
選擇"地區", 點擊確定後下載zip包
彈出下載模板api對接代碼對話方塊，其中顯示當前模板ID和模板名稱。
zip檔案解壓後包含3個檔案
App.js 頁面範例程式碼
openapiv3.js 工具代碼
README.md 包含建議的使用說明
啟動樣本
本樣本以create-react-app為例, 安裝方式可查看 https://create-react-app.dev/docs/getting-started/
安裝後建立專案my-app
npx create-react-app my-app開啟建立的專案檔夾, 安裝如下兩個依賴
cd my-app
npm install antd --save
npm install crypto-js --save複製App.js和openapiv3.js至產生專案的my-app目錄下的src目錄
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]# ls -a
.. App.css App.js App.test.js index.css index.js logo.svg openapiv3.js reportWebVitals.js setupTests.js
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#在my-app目錄下 執行 npm start, 啟動樣本
npm start啟動後可通過預設的3000連接埠訪問
啟動後頁面顯示 CADT 配置基礎資訊表單，依次填寫 AccessKey ID、AccessKey Secret、模板 ID（例如 L8BB1L2IKEBD4IRT），在 地區 下拉框中選擇目的地區域（例如 北京），然後單擊 下一步 進入後續的產生方案、資源校正、資源詢價和資源部署步驟。
樣本功能介紹
當前樣本頁麵包含了 產生方案->資源校正->資源詢價->資源部署->資源釋放 流程
此程式碼範例僅為示範前端接入的基礎流程, 並非提供的完整技術解決方案, 使用者可根據下載的樣本開發或參考, 請勿用於生產環境.
配置基礎資訊
填寫ak,sk
模板id預設為下載樣本的模板id, 也可在頁面中對應位置複製
地區預設為下載樣本時選中的地區, 如果切換請確保模板包含所選地區的配置
在雲速搭 CADT控制台的我的解決方案頁面，單擊目標解決方案卡片工具列中的剪貼簿表徵圖即可複製 TemplateId。
產生方案
填寫方案名稱和模板變數資料
例如，在方案名稱中輸入測試部署ecs，在模板變數地區將${instance_type}設定為ecs.c6.2xlarge，將${pay_type}設定為PostPaid，然後單擊下一步。
資源校正
點擊資源校正後, 方案處於校正成功狀態, 可進行資源詢價
資源校正結果表格顯示：region、security_group、vswitch、vpc 均校正通過；ecs 資源備忘提示 NotFound.Property: [key_pair_name] in Node [ecs]。
資源詢價
點擊資源詢價按鈕, 詢價成功後可進入資源部署
詢價完成後，方案狀態顯示為 Valuating_Success。資源清單中，vpc、vswitch、security_group 為免費資源（價格顯示 -1），ECS 執行個體（規格 ecs.c6.2xlarge，付費類型 PayAsYouGo）價格為 2.144 元。確認後單擊下一步進入資源部署。
資源部署
點擊資源部署, 可查看部署狀態
方案狀態顯示為Deploying，資源清單中vpc、vswitch、security_group三個資源的狀態均為Running。
部署完成後, 資源建立成功
資源釋放
通過釋放方案, 釋放已部署的資源. 或刪除方案, 將方案隱藏, 注意, 刪除方案並不會釋放已部署的資源
單擊釋放方案後，方案狀態顯示為釋放中...，等待資源釋放完成。
釋放完成後, 刪除方案
刪除方案後，方案狀態顯示為已刪除，資源清單中所有關聯資源（vpc、vswitch、ecs、security_group）的狀態均變為Deleted。