フロントエンドコードサンプルのダウンロード
[公式ソリューション] または [マイソリューション] ページで、コードサンプルをダウンロードします。
ソリューションカードの下部にあるツールバーのコードアイコンボタン (</>) をクリックして、コードサンプルをダウンロードします。
リージョンを選択し、[OK] をクリックして ZIP パッケージをダウンロードします。
[Download template API code] ダイアログボックスに、現在の [template 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 --saveApp.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]、および [template ID] (例： L8BB1L2IKEBD4IRT) を入力します。[region] ドロップダウンリストで、対象のリージョン (例： [China (Beijing)]) を選択します。次に、[Next] をクリックして、ソリューションの作成、リソースの検証、料金照会、およびリソースのデプロイに進みます。
サンプル機能の紹介
このサンプルは、次のフローを示しています：ソリューションの作成 -> リソースの検証 -> 料金照会 -> リソースのデプロイ -> リソースのリリース。
このコードサンプルは、フロントエンド統合の基本的なフローのみを示しています。完全な技術ソリューションではありません。このサンプルは開発または参考目的でのみ使用してください。本番環境では使用しないでください。
基本情報の設定
AccessKey ID と AccessKey Secret を入力します。
テンプレート ID には、サンプルをダウンロードしたテンプレートの ID がデフォルトで設定されています。ページから ID をコピーすることもできます。
リージョンは、ダウンロード時に選択したものがデフォルトで設定されています。リージョンを切り替える場合は、テンプレートに選択したリージョンの設定が含まれていることを確認してください。
[CADT] コンソールの [マイソリューション] ページで、対象のソリューションカードのツールバーにあるクリップボードアイコンをクリックして、[テンプレート ID をコピー] します。
ソリューションの作成
ソリューション名とテンプレート変数の値を入力します。
たとえば、[solution name] フィールドに test-deploy-ecs と入力します。テンプレート変数セクションで、${instance_type} を ecs.c6.2xlarge に、${pay_type} を PostPaid に設定します。次に、[Next] をクリックします。
リソースの検証
[Validate Resources] をクリックすると、ソリューションのステータスが [Validation Successful] に変わります。その後、リソース料金を照会できます。
リソース検証結果テーブルには、[region]、[セキュリティグループ]、[vSwitch]、および [VPC] がすべて正常に検証されたことが示されます。[ECS] リソースの備考には、次のメッセージが表示されます： NotFound.Property: [key_pair_name] in Node [ecs]。
リソース料金の照会
[Inquire Prices] ボタンをクリックします。料金照会が成功すると、リソースのデプロイに進むことができます。
料金照会が完了すると、ソリューションのステータスが [Valuating_Success] に変わります。リソースリストでは、VPC、vSwitch、およびセキュリティグループは無料リソースです (料金は -1 と表示されます)。ECS インスタンス (スペック ecs.c6.2xlarge、従量課金) の料金は 2.144 CNY です。確認後、[Next] をクリックしてリソースのデプロイに進みます。
リソースのデプロイ
[Deploy Resources] をクリックして、デプロイステータスを表示します。
ソリューションのステータスが [Deploying] に変わります。リソースリストでは、[VPC]、[vSwitch]、および [セキュリティグループ] リソースのステータスが [実行中] になります。
デプロイが完了すると、リソースが作成されます。
リソースのリリース
デプロイされたリソースは、ソリューションをリリースすることでリリースできます。または、ソリューションを削除して非表示にすることもできます。ソリューションを削除しても、デプロイされたリソースはリリースされませんのでご注意ください。
[ソリューションのリリース] をクリックすると、[Solution Status] が [リリース中...] に変わります。リソースのリリースが完了するまで待ちます。
リソースがリリースされたら、ソリューションを削除できます。
削除後、ソリューションのステータスが [削除済み] に変わります。リソースリストでは、関連するすべてのリソース (VPC、vSwitch、ECS、およびセキュリティグループ) のステータスが [削除済み] に変わります。