Partilhar via


Adicionar componentes do App Spaces

Nota

O App Spaces está em pré-visualização.

O App Spaces é um serviço inteligente para desenvolvedores que reduz a complexidade da criação e gerenciamento de aplicativos Web. Este guia mostra como adicionar componentes a um aplicativo existente do App Spaces. Os componentes podem ser um aplicativo back-end (Aplicativo de Contêiner do Azure), um aplicativo front-end (Aplicativo Web Estático) ou um banco de dados (MariaDB, PostgreSQL, Qdrant).

O App Spaces usa um conceito de componentes. A tabela a seguir descreve os tipos de componentes, tipos de aplicativo e os serviços do Azure usados pelos Espaços de Aplicativo.

Tipo de componente Tipo de aplicação Serviço do Azure
Componente da aplicação Back-end Azure Container Apps
Componente de aplicativo estático Front-end Aplicações Web estáticas
Componente de banco de dados N/A Azure Container Apps

Adicionar componentes

Para adicionar um componente ao seu Espaço de Aplicativo, na página Espaço de Aplicativo, selecione + Adicionar componente.

Siga estas etapas para adicionar um componente de aplicativo personalizado.

Adicionar separador

  • Na guia Adicionar, selecione repositório GitHub e selecione o botão Avançar na parte inferior da página.

Guia Configurar

  1. Na seção Conectar ao GitHub para importar seu repositório, insira os seguintes valores.

    Definição Ação
    Conta do GitHub Selecione sua conta no GitHub.
    Organization Selecione a sua organização.
    Repositório Selecione seu repositório de código do GitHub. Se você não conseguir encontrar seu repositório, habilite outras permissões no GitHub.
    Filial Selecione sua ramificação do GitHub.
    Localização da aplicação Insira o local do seu código no repositório GitHub. Use / para o diretório raiz.
    Porta de escuta Especifique a porta na qual seu servidor Web está escutando. As solicitações externas que estão sendo feitas para a porta 80 ou 443 são roteadas para essa porta internamente para o conteúdo do seu aplicativo para o servidor.
    Comando de inicialização (opcional) Em Configurações avançadas, insira um comando de inicialização ou deixe em branco para nenhum.
  2. Na seção Configurar detalhes do aplicativo, insira os seguintes valores.

    Definição Ação
    Nome de componente Insira um nome para o componente.
  3. Selecione o botão Adicionar na parte inferior da página.

Para um aplicativo back-end, o App Spaces cria os seguintes recursos para você durante a implantação:

  • Ambiente do Aplicativo de Contêiner do Azure
  • Aplicativo de Contêiner do Azure
  • Rede virtual + sub-rede (sub-recurso da rede virtual)
  • Implantação contínua com ações do GitHub
  • Função de contribuidor RBAC (controle de acesso baseado em função) atribuída à identidade atribuída pelo usuário sobre o escopo do grupo de recursos (para fins do OpenID Connect)
  • Um espaço de trabalho do Log Analytics

Siga estas etapas para adicionar um aplicativo de modelo de exemplo.

Adicionar separador

  1. Na guia Adicionar, selecione Modelo e selecione o botão Avançar na parte inferior da página.

  2. Em Modelos, selecione uma aplicação e, em seguida, selecione o botão Seguinte na parte inferior da página.

Guia Configurar

  1. Insira os seguintes valores na seção Conectar ao GitHub .

    Definição Ação
    Conta do GitHub Selecione sua conta no GitHub.
    Organization Selecione a sua organização.
    Novo repositório Insira um nome para o novo repositório.
  2. Na seção Configurar detalhes do aplicativo, insira os seguintes valores.

    Definição Ação
    Nome de componente Insira um nome para o componente.
  3. Selecione o botão Adicionar na parte inferior da página.

Siga estas etapas para adicionar um componente de banco de dados.

Adicionar separador

  • No separador Adicionar, selecione Base de Dados e, em seguida, selecione o botão Seguinte na parte inferior da página.

Guia Configurar

  1. Na guia Configurar, insira os seguintes valores.

    Definição Ação
    Tipo de base de dados Selecione um tipo de banco de dados.
    Nome de componente Insira um nome para o componente.
  2. Selecione o botão Adicionar na parte inferior da página.