Baixe o exemplo de código frontend
Na página de official solutions ou my solutions, baixe o exemplo de código.
Clique no botão de ícone de código (</>) na barra de ferramentas, na parte inferior do cartão da solução, para baixar o exemplo.
Selecione uma região e clique em OK para baixar o pacote ZIP.
A caixa de diálogo Download template API code exibe o template ID e o template name atuais.
O arquivo ZIP descompactado contém três arquivos:
App.js: Sample page code.
openapiv3.js: código utilitário.
README.md: instruções de uso.
Inicie o exemplo
Este exemplo foi criado com create-react-app. Para obter instruções de instalação, consulte Getting Started.
Após a instalação, crie um projeto chamado my-app.
npx create-react-app my-appAcesse a pasta do projeto e instale as seguintes dependências.
cd my-app
npm install antd --save
npm install crypto-js --saveCopie os arquivos App.js e openapiv3.js para a pasta src no diretório do projeto 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]#No diretório my-app, execute npm start para iniciar o exemplo.
npm startQuando o projeto for iniciado, acesse o exemplo na porta padrão 3000.
A página inicial exibe um formulário para configuração básica do CADT. Insira seu AccessKey ID, AccessKey Secret e o template ID (por exemplo, L8BB1L2IKEBD4IRT). Na lista suspensa region, selecione uma região de destino, como China (Beijing). Em seguida, clique em Next para prosseguir com a criação da solução, validação de recursos, consulta de preços e implantação de recursos.
Introdução aos recursos do exemplo
Este exemplo demonstra o seguinte fluxo: Create Solution -> Validate Resources -> Inquire Prices -> Deploy Resources -> Release Resources.
Este exemplo de código demonstra apenas o fluxo básico para integração frontend. Não se trata de uma solução técnica completa. Utilize-o apenas para desenvolvimento ou referência. Não o utilize em ambiente de produção.
Configure as informações básicas
Insira o AccessKey ID e o AccessKey Secret.
O template ID assume como padrão o modelo usado no download do exemplo. Também é possível copiar o ID diretamente da página.
A região tem como padrão aquela selecionada durante o download. Caso alterne de região, certifique-se de que o modelo inclua configurações para a nova região.
Na página my solutions do console do CADT, clique no ícone de área de transferência na barra de ferramentas do cartão da solução desejada para copiar o template ID.
Crie uma solução
Insira um nome para a solução e os valores das variáveis do modelo.
Por exemplo, no campo solution name, insira test-deploy-ecs. Na seção de variáveis do modelo, defina ${instance_type} como ecs.c6.2xlarge e ${pay_type} como PostPaid. Depois, clique em Next.
Valide os recursos
Ao clicar em Validate Resources, o status da solução muda para Validation Successful. Nesse momento, consulte os preços dos recursos.
A tabela de resultados da validação de recursos mostra que a region, o security group, o vSwitch e a VPC foram validados com sucesso. As observações do recurso ECS exibem a mensagem: NotFound.Property: [key_pair_name] in Node [ecs].
Consulte os preços dos recursos
Clique no botão Inquire Prices. Após o êxito da consulta de preços, prossiga para a implantação dos recursos.
Quando a consulta de preços for concluída, o status da solução mudará para Valuating_Success. Na lista de recursos, a VPC, o vSwitch e o grupo de segurança são recursos gratuitos (preço exibido como -1). O preço da instância ECS (especificação ecs.c6.2xlarge, pagamento conforme o uso) é de CNY 2.144. Após confirmar, clique em Next para avançar para a implantação dos recursos.
Implante os recursos
Clique em Deploy Resources para visualizar o status da implantação.
O status da solução muda para Deploying. Na lista de recursos, o status dos recursos VPC, vSwitch e security group passa a ser Running.
Após a conclusão da implantação, os recursos são criados.
Libere os recursos
Libere os recursos implantados liberando a solução. Alternativamente, exclua a solução para ocultá-la. Observe que excluir uma solução não libera os recursos implantados por ela.
Ao clicar em Release Solution, o Solution Status muda para Releasing.... Aguarde a conclusão da liberação dos recursos.
Depois que os recursos forem liberados, exclua a solução.
Após a exclusão, o status da solução muda para Deleted. Na lista de recursos, o status de todos os recursos associados (VPC, vSwitch, ECS e security group) muda para Deleted.