Pular para o conteúdo principal

Criar e fazer o deploy de uma Aplicação

Nesta seção, você encontra como utilizar Plugins de Aplicação e Infraestrutura para criar uma Aplicação e fazer o seu deploy.


Este é apenas um exemplo de como criar uma Aplicação, para mais detalhes e criar a sua Aplicação, confira a página de Aplicação.

Introdução

  • Nível Iniciante

Este exemplo auxilia você a criar uma Aplicação e fazer o deploy da sua infraestrutura com o STK CLI da StackSpot.

A Stack HTML do exemplo de Criar Plugin de App e a Stack S3 CloudFront do exemplo de Plugin de Infra são necessárias para criar a Aplicação e a infraestrutura para fazer o seu deploy.

  • A Stack HTML abrange Plugins de Aplicação que geram uma página HTML com tabelas incorporadas;
  • O S3 CloudFront Stack inclui Plugins de Infraestrutura projetados para construir a infraestrutura necessária para implantação e acessibilidade do conteúdo HTML.

Agora, siga as instruções para fazer isso.

Antes de começar

Para usar este guia, primeiro, você precisa:

  1. Gerar dois Plugins de Aplicação para criar a página HTML com tabelas incorporadas. Siga o exemplo de criar Plugin de App;

  2. Criar a Stack e o Starter utilizando os Plugins de Aplicação do mesmo exemplo;

  3. Criar dois Plugins de Infra para gerar a infraestrutura para fazer o deploy da página HTML. Use o exemplo de Criar Plugins de Infra;

  4. Criar uma Stack que contenha os Plugins de Infra do mesmo exemplo de Criar Plugins de Infra;

  5. Você deve adicionar as Stacks a um Workspace para criar, registrar e fazer o deploy da Aplicação com a StackSpot.

Pré-requisitos

  • Criar uma conta StackSpot;
  • Instalar o STK CLI;
  • Fazer login na sua conta dentro do STK CLI. Execute o comando:
stk login

Passo 1. Criar um diretório vazio

Crie um diretório vazio para o projeto. Execute o comando no seu terminal:

mkdir demo-html

Acesse o diretório na sua IDE de preferência, por exemplo, Visual Studio Code.

Passo 2. Criar a Aplicação

  1. Acesse o Workspace onde você adicionou as Stacks mencionadas no início desse guia.

Você vai usar este mesmo Workspace para criar e registrar a Aplicação. No seu terminal, execute o comando:

stk use workspace

Depois, selecione o Workspace.

Cuidado!

Você só consegue registrar e fazer o deploy de uma Aplicação utilizando um Workspace.

Para criar a Aplicação, comece o processo utilizando os Plugins de App do Starter da Stack de HTML. Execute o comando:

stk create app name-of-the-app studio-name/stack-name@stack-version/starter-name

O comando deve parecer com o exemplo:

stk create app demo-html studio-name/demo-html@0.0.2/demo-html-starter
Informação Adicional

Se o seu Workspace tiver somente uma Stack e um Starter, eles serão selecionados automaticamente.

Depois, responta às perguntas da seguinte forma no STK CLI:


? Nomeie sua Aplicação demo-html-v1
? Você deseja iniciar um repositório git? No
? Descrição da Aplicação: Aplicação Web Base
? Selecione o estúdio: > Selecione o estúdio onde você publicou as stacks 
? Selecione a stack: html-stack
? Selecione a versão da stack: 1.0.0
? Selecione o starter: html-starter
? HTML page title  (Training - StackSpot) Demo - App

> Aplicando o plugin tw-guide/html-stack@1.0.0/dummy-json-plugin.

? Name of the table that will be generated  (product-list)
? Table columns separated by ';'  (ID;TITLE;DESCRIPTION)
? Table attributes separated by ';' (respectively of the inserted columns)  (id;title;description)

Você criou a Aplicação ‘demo-html’ com sucesso!

Passo 3. Acessar o diretório do seu projeto e registre a Aplicação

Registre a sua Aplicação no Workspace para deixá-la disponível na StackSpot. Siga as instruções:

  1. Execute o comando para acessar o diretório:
cd demo-html
  1. Acesse o Workspace. Execute o mesmo comando dos passos anteriores:
stk use workspace

Selecione o Workspace.

  1. Registre a sua Aplicação:
stk register app

Responda às perguntas da seguinte forma:

? URL repositório: adicione a url do seu repositório
? Base branch: main

The application registered successfully.

Informação Adicional

Verifique se a sua Aplicação foi adicionada ao Workspace:

  1. Acesse o Portal da StackSpot EDP;
  2. Entre no seu Workspace;
  3. Clique em ‘Aplicações’;
  4. Confirme que ela está lá.

Passo 4. Adicionar Plugins de Infra a sua Aplicação

Para fazer o deploy da sua Aplicação, garanta que ela tenha os Plugins de Infraestruturas necessários. Este guia pressupõe que você usará os Plugins criados no Guia de criação de Plugins de Infraestrutura.

  1. Execute o comando:
stk list plugin
  1. Copie o caminho da Stack de s3-cloudfront para aplicar os Plugins.
  • Aplique primeiro o S3 Plugin para gerar a Connection Interface que o Plugin de CloudFront irá utilizar. Execute:
stk apply plugin infra-demo/s3-cloudfront-stack@0.0.1/bucket-s3-plugin

A sintaxe do comando é:

stk apply plugin studio-name/stack-name@stack-version/infra-plugin-name
  • Responda as perguntas no seu terminal:

Quando a pergunta ? Nomeie a utilização do plugin aparecer, apenas aperte enter.


? Nomeie o connector para bucket-s3-plugin-conn (aws-s3-conn): demo-app-s3-conn
? Type name of your bucket demo-app-s3-example
  • Agora, aplique o Plugin de CloudFront:
stk apply plugin studio-name/s3-cloudfront-stack@0.0.1/cloudfront-plugin
  • Responda as perguntas no seu terminal:

Quando a pergunta ? Nomeie a utilização do plugin aparecer, apenas aperte enter.


Neste cenário, o Plugin CloudFront reconhece que um Plugin anterior gerou a Connection Interface requerida. Selecione:


? Escolha um connector para 'aws-s3-conn (bucket-s3-cloudfront-conn)': demo-app-s3-conn (local)
? Type name of your resource  (Client)
? Choose http method of new endpoint GET

Quando você tem múltiplas opções para esta questão, isso implica que você pode utilizar as Connection Interfaces disponíveis no Workspace para criar a infraestrutura relacionada a esse conector específico.

informação

Quando você aplica um Plugin em um projeto de Infraestrutura, o stk.yaml file irá registrar os Plugins.

Passo 5. Fazer o deploy da Infraestrutura da sua Aplicação

Cuidado!

Você só consegue fazer o deploy caso você tenha:

Para fazer o deploy da infraestrutura da sua Aplicação, execute o comando à seguir:

stk deploy app -v app-version -e environment-name -w

-v indica a versão da Aplicação; -e indica em qual ambiente você quer fazer o deploy; -w indica que você quer acompanhar o deploy.

  • A StackSpot registra o deploy na página da sua Aplicação no Portal da StackSpot EDP.

Etapa 6. Verificar o projeto da sua Aplicação

Esta etapa está na sua conta Cloud. O exemplo aqui está na AWS.

  • StackSpot gera o recurso. Vá para sua conta AWS. Verifique se você criou um bucket e os recursos.
  • Ainda não existem objetos (arquivos, pastas) em seu projeto.
  • Acesse o CloudFront. O objetivo principal é abrir páginas da web. Você verá os recursos cadastrados lá.

Ainda não há conteúdo. StackSpot provisiona apenas a infraestrutura para você. Você precisa sincronizar os arquivos do projeto demo-html em seu bucket recém-criado ou pipeline. Confira um exemplo usando o comando AWS:

aws s3 sync . s3://demo-app-s3 --delete --acl public-read
  • Obtenha a URL no seu bucket da AWS para ver a seguinte página:

Na imagem está uma tabela com o título Criar e realizar deploy da Aplicação.

Verifique as informações de implantação da infraestrutura do seu aplicativo no Portal StackSpot.

Pronto, você criou uma Aplicação e fez o deploy da sua infraestrutura com a StackSpot.