Pular para o conteúdo principal

Criar e fazer o deploy de uma Aplicação

Nesta seção, você aprenderá como usar Plugins de Aplicação e Infraestrutura para criar uma Aplicação e fazer o deploy da sua infraestrutura na StackSpot.

Este é um exemplo prático. Para mais detalhes sobre criação de aplicações, acesse a página de Aplicação.

Introdução

Nível: Iniciante

Este guia mostra como criar uma Aplicação e fazer o deploy da infraestrutura usando o STK CLI da StackSpot.

Você precisará:

Essas stacks são necessárias para criar a Aplicação e a infraestrutura de deploy.

  • A Stack HTML contém Plugins de Aplicação que geram uma página HTML com tabelas.
  • A Stack S3 CloudFront inclui Plugins de Infraestrutura para montar a infraestrutura necessária para disponibilizar o conteúdo HTML.

Siga o passo a passo abaixo para realizar o processo completo.

Antes de começar

Para seguir este guia, você precisará:

  1. Criar dois Plugins de Aplicação para gerar a página HTML com tabelas. Siga o exemplo de Plugin de App.
  2. Criar a Stack e o Starter usando os Plugins de Aplicação do mesmo exemplo.
  3. Criar dois Plugins de Infra para montar a infraestrutura e fazer o deploy da página HTML. Veja o exemplo de Plugins de Infra.
  4. Criar uma Stack que contenha os Plugins de Infra criados no exemplo acima.
  5. Adicionar todas as Stacks a um Workspace para poder criar, registrar e fazer o deploy da aplicação pela StackSpot.

Pré-requisitos

stk login

Passo 1. Criar um diretório vazio para o projeto

Abra seu terminal e execute:

mkdir demo-html

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

Passo 2. Criar a Aplicação

  1. Acesse o Workspace onde você adicionou as Stacks criadas nos passos anteriores.

No terminal, execute:

stk use workspace

Selecione o Workspace desejado.

Atenção!

Só é possível registrar e fazer deploy de uma Aplicação dentro de um Workspace.

Para criar a aplicação, utilize o Starter da Stack HTML. Use o comando:

stk create app nome-da-aplicacao studio-name/stack-name@stack-version/starter-name

Por exemplo:

stk create app demo-html studio-name/demo-html@0.0.2/demo-html-starter
Dica!

Se houver apenas uma Stack e um Starter no Workspace, eles serão selecionados automaticamente.

Responda às perguntas do STK CLI conforme o exemplo abaixo:

? 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 ';' (id;title;description)

Pronto! A Aplicação demo-html foi criada com sucesso.

Passo 3. Registrar a Aplicação no Workspace

Para registrar sua aplicação e deixá-la disponível na StackSpot:

  1. Acesse o diretório do projeto:

    cd demo-html

  2. Confirme que está no Workspace correto:

    stk use workspace

  3. Registre a aplicação:

    stk register app

    Responda:

    ? URL repositório: informe a URL do repositório
    ? Base branch: main
Dica!

Para confirmar que a aplicação está no Workspace:

  1. Acesse o Portal da StackSpot EDP
  2. Entre no seu Workspace.
  3. Clique em Aplicações.
  4. Verifique se sua aplicação está listada.

Passo 4. Adicionar Plugins de Infraestrutura à Aplicação

Para fazer o deploy, garanta que sua aplicação tenha os Plugins de Infraestrutura necessários. Este guia assume que você usará os Plugins criados no Guia de criação de Plugins de Infraestrutura.

  1. Liste os plugins disponíveis:

    stk list plugin

  2. Copie o caminho do Stack de s3-cloudfront para aplicar os Plugins.

  3. Aplique primeiro o S3 Plugin para gerar a Connection Interface que o Plugin de CloudFront irá utilizar:

    stk apply plugin infra-demo/s3-cloudfront-stack@0.0.1/bucket-s3-plugin

    Exemplo de sintaxe:

    stk apply plugin studio-name/stack-name@stack-version/infra-plugin-name

    Responda às perguntas:

    ? Nomeie o connector para bucket-s3-plugin-conn (aws-s3-conn): demo-app-s3-conn
    ? Type name of your bucket: demo-app-s3-example

  4. Agora, aplique o Plugin de CloudFront:

    stk apply plugin studio-name/s3-cloudfront-stack@0.0.1/cloudfront-plugin

    Responda:

    ? 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
nota

Se houver várias opções de Connection Interface, você pode escolher qual delas será usada para criar a infraestrutura relacionada ao conector.

nota

Ao aplicar um Plugin, o arquivo stk.yaml será atualizado com os Plugins utilizados no projeto.

Passo 5. Fazer deploy da infraestrutura da Aplicação

Atenção!

Só é possível fazer deploy se você tiver:

Para fazer o deploy da infraestrutura, execute:

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

Onde:

  • -v indica a versão da Aplicação.
  • -e indica o ambiente para o deploy.
  • -w acompanha o status do deploy em tempo real.

O status do deploy será registrado na página da sua Aplicação no Portal StackSpot EDP.

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

Atenção!

Esta etapa ocorre na sua conta Cloud (por exemplo, AWS).

  • A StackSpot cria os recursos na sua conta AWS (bucket, CloudFront, etc.).
  • Inicialmente, o bucket estará vazio.
  • No CloudFront, você verá os recursos provisionados, mas ainda não terá arquivos publicados.

Para publicar arquivos no bucket criado, use o comando AWS CLI:

aws s3 sync . s3://demo-app-s3-example --delete --acl public-read
  • Acesse a URL do bucket na AWS para visualizar sua página HTML:

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

Acompanhe as informações de implantação da sua infraestrutura pelo Portal StackSpot.

Conclusão

Parabéns! Você criou uma Aplicação e fez o deploy da sua infraestrutura usando a StackSpot.