フロントエンドのコードサンプルのダウンロード
[公式ソリューション] または [マイソリューション] ページで、次の図に示す場所からコードサンプルをダウンロードします。
リージョンを選択し、[OK] をクリックして ZIP パッケージをダウンロードします。
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作成したプロジェクトフォルダを開き、次の 2 つの依存関係をインストールします。
cd my-app
npm install antd --save
npm install crypto-js --saveApp.js と openapiv3.js を my-app プロジェクトディレクトリの src フォルダにコピーします。
my-app ディレクトリで npm start を実行してサンプルを起動します。
npm startプロジェクトが起動すると、デフォルトのポート 3000 でサンプルにアクセスできます。
サンプル機能の紹介
このサンプルページでは、ソリューションの作成 → リソースの検証 → 料金の照会 → リソースのデプロイ → リソースのリリースというフローをデモします。
このコードサンプルは、フロントエンド統合の基本的なフローのみをデモするものです。完全な技術ソリューションではありません。このサンプルは開発またはリファレンス目的でのみ使用してください。本番環境では使用しないでください。
基本情報の設定
AccessKey ID と AccessKey Secret を入力します。
テンプレート ID は、サンプルをダウンロードしたテンプレートの ID がデフォルトで設定されています。ページの対応する場所から ID をコピーすることもできます。
リージョンは、サンプルのダウンロード時に選択したものがデフォルトで設定されています。リージョンを切り替える場合は、テンプレートに選択したリージョンの構成が含まれていることを確認してください。
ソリューションの作成
ソリューション名とテンプレート変数の値を入力します。
リソースの検証
[リソースの検証] をクリックすると、ソリューションのステータスが [検証成功] に変わります。その後、リソース料金を照会できます。
リソース料金の照会
[料金の照会] ボタンをクリックします。料金照会が成功すると、リソースのデプロイに進むことができます。
リソースのデプロイ
[リソースのデプロイ] をクリックして、デプロイステータスを表示します。
デプロイが完了すると、リソースが作成されます。
リソースのリリース
ソリューションをリリースすることで、デプロイされたリソースをリリースできます。または、ソリューションを削除して非表示にすることもできます。ソリューションを削除しても、デプロイされたリソースはリリースされないことにご注意ください。
リソースがリリースされた後、ソリューションを削除できます。
