Télécharger l'exemple de code frontend
Sur la page official solutions ou my solutions, téléchargez l'exemple de code.
Cliquez sur le bouton d'icône de code (</>) dans la barre d'outils en bas de la carte de solution pour télécharger l'exemple de code.
Sélectionnez une région et cliquez sur OK pour télécharger le package ZIP.
La boîte de dialogue Download template API code affiche l'template ID et le template name actuels.
Le fichier ZIP décompressé contient trois fichiers :
App.js : exemple de code de page.
openapiv3.js : code utilitaire.
README.md : instructions d'utilisation.
Démarrer l'exemple
Cet exemple est construit avec create-react-app. Pour les instructions d'installation, consultez https://create-react-app.dev/docs/getting-started/.
Après l'installation, créez un projet nommé my-app.
npx create-react-app my-appAccédez au dossier du projet et installez les dépendances suivantes.
cd my-app
npm install antd --save
npm install crypto-js --saveCopiez App.js et openapiv3.js dans le dossier src du répertoire du projet my-app.
[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]#Dans le répertoire my-app, exécutez npm start pour démarrer l'exemple.
npm startUne fois le projet démarré, accédez à l'exemple sur le port par défaut 3000.
La page de démarrage affiche un formulaire pour la configuration CADT de base. Saisissez votre AccessKey ID, AccessKey Secret et le template ID (par exemple, L8BB1L2IKEBD4IRT). Dans la liste déroulante region, sélectionnez une région cible, telle que China (Beijing). Cliquez ensuite sur Next pour procéder à la création de la solution, à la validation des ressources, à la consultation des prix et au déploiement des ressources.
Présentation des fonctionnalités de l'exemple
Cet exemple illustre le flux suivant : Create Solution -> Validate Resources -> Inquire Prices -> Deploy Resources -> Release Resources.
Cet exemple de code montre uniquement le flux de base pour l'intégration frontend. Il ne s'agit pas d'une solution technique complète. Utilisez cet exemple uniquement à des fins de développement ou de référence. Ne l'utilisez pas dans un environnement de production.
Configurer les informations de base
Saisissez l'AccessKey ID et l'AccessKey Secret.
L'ID de modèle correspond par défaut au modèle à partir duquel vous avez téléchargé l'exemple. Vous pouvez également copier l'ID depuis la page.
La région correspond par défaut à celle que vous avez sélectionnée lors du téléchargement. Si vous changez de région, assurez-vous que le modèle inclut les configurations pour la région sélectionnée.
Sur la page my solutions de la console CADT, cliquez sur l'icône de presse-papiers dans la barre d'outils de la carte de solution cible pour copier l'ID de modèle.
Créer une solution
Saisissez un nom de solution et les valeurs des variables de modèle.
Par exemple, dans le champ solution name, saisissez test-deploy-ecs. Dans la section des variables de modèle, définissez ${instance_type} sur ecs.c6.2xlarge et ${pay_type} sur PostPaid. Cliquez ensuite sur Next.
Valider les ressources
Après avoir cliqué sur Validate Resources, l'état de la solution passe à Validation Successful. Vous pouvez ensuite consulter les prix des ressources.
Le tableau des résultats de validation des ressources indique que la region, le security group, le vSwitch et le VPC sont tous validés avec succès. Les remarques pour la ressource ECS affichent le message : NotFound.Property: [key_pair_name] in Node [ecs].
Consulter les prix des ressources
Cliquez sur le bouton Inquire Prices. Une fois la consultation des prix réussie, vous pouvez procéder au déploiement des ressources.
Une fois la consultation des prix terminée, l'état de la solution passe à Valuating_Success. Dans la liste des ressources, le VPC, le vSwitch et le security group sont des ressources gratuites (prix affiché comme -1). Le prix de l'instance ECS (spécification ecs.c6.2xlarge, paiement à l'utilisation) est de 2,144 CNY. Après confirmation, cliquez sur Next pour procéder au déploiement des ressources.
Déployer les ressources
Cliquez sur Deploy Resources pour afficher l'état du déploiement.
L'état de la solution passe à Deploying. Dans la liste des ressources, l'état des ressources VPC, vSwitch et security group est Running.
Une fois le déploiement terminé, les ressources sont créées.
Libérer les ressources
Vous pouvez libérer les ressources déployées en libérant la solution. Vous pouvez également supprimer la solution pour la masquer. Notez que la suppression d'une solution ne libère pas ses ressources déployées.
Après avoir cliqué sur Release Solution, l'Solution Status passe à Releasing.... Attendez que la libération des ressources soit terminée.
Une fois les ressources libérées, vous pouvez supprimer la solution.
Après la suppression, l'état de la solution passe à Deleted. Dans la liste des ressources, l'état de toutes les ressources associées (VPC, vSwitch, ECS et security group) passe à Deleted.