Conceitos básicos do código existente - AWS AmplifyHospedagem

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Conceitos básicos do código existente

Nesta demonstração, você aprenderá a criar, implantar e hospedar continuamente um aplicativo web moderno. Os aplicativos web modernos incluem estruturas de aplicativos de página única (SPA) (por exemplo, React, Angular ou Vue) e geradores de sites estáticos (SSGs) (por exemplo, Hugo, Jekyll ou Gatsby). O Amplify Hosting também suporta aplicativos da web que usam renderização do lado do servidor (SSR) e são criados usando o Next.js.

Para começar, faça login no console do Amplify. Se você estiver começando pela página AWS Amplifyinicial, escolha Começar na parte superior da página.


         A páginaAWS Amplify inicial com o botão Começar circulado em vermelho.

Em seguida, escolha Começar em Entregar.


         A seção Entregar na parte inferior da páginaAWS Amplify inicial com Começar está circulada em vermelho.

Se você estiver começando pela página Todos os aplicativos, escolha Novo aplicativo e, em seguida, Hospedar aplicativo web no canto superior direito.


         Captura de tela da página Todos os aplicativos no console do Amplify.

Etapa 1: Connect um repositório

Connect seuAWS CodeCommit repositório GitHub GitLab, Bitbucket ou. Você também tem a opção de carregar manualmente seus artefatos de construção sem conectar um repositório Git. Para obter mais informações, consulte Implantações manuais.


            Captura de tela da página Comece a usar o Amplify Hosting no console do Amplify.

Depois de autorizar o console do Amplify com o Bitbucket GitLab,AWS CodeCommit, ou, o Amplify busca um token de acesso do provedor do repositório, mas não armazena o token nosAWS servidores. O Amplify acessa seu repositório usando chaves de implantação instaladas somente em um repositório específico.

Para GitHub repositórios, o Amplify agora usa o recurso GitHub Aplicativos para autorizar o acesso ao Amplify. Com o GitHub aplicativo Amplify, as permissões são mais ajustadas, permitindo que você conceda ao Amplify acesso somente aos repositórios que você especificar. Para obter mais informações sobre como instalar e autorizar o GitHub aplicativo, consulteConfigurando o acesso do Amplify aos GitHub repositórios.

Depois de conectar o provedor de serviço do repositório, escolha um repositório e, então, escolha uma ramificação correspondente para criar e implantar.

Etapa 2a: Confirme as configurações de compilação para o front-end

Para a ramificação selecionada, o Amplify inspeciona seu repositório para detectar automaticamente a sequência de comandos de construção a serem executados.

Importante: verifique se os comandos de criação e o diretório de saída da criação (ou seja, artefatos > baseDirectory) estão corretos. Se você precisar modificar essas informações, selecione Edit (Editar) para abrir o editor de YML. Você pode salvar suas configurações de compilação em nossos servidores ou baixar o YML e adicioná-lo à raiz do seu repositório (para monorepos, armazene o YML no diretório raiz do aplicativo).

Para obter mais informações, consulte Criar a sintaxe YAML da especificação.

Etapa 2b: Confirme as configurações de compilação para o back-end

Se você conectou um repositório provisionado pelo Amplify CLI v1.0+ (execute amplify -v para encontrar a versão da CLI), o Amplify Hosting implantará ou atualizará automaticamente os recursos de back-end (qualquer recurso provisionado pela CLI do Amplify) em um único fluxo de trabalho com a compilação do front-end. Você pode optar por apontar um ambiente de back-end existente para sua ramificação, ou criar um novo ambiente. Para ver um step-by-step tutorial, consulte Introdução às implantações do fullstack.

Para implantar a funcionalidade de back-end usando a CLI do Amplify durante sua criação, crie ou reutilize uma função de serviçoAWS Identity and Access Management (IAM). Os perfis do IAM são uma forma segura de conceder permissões ao Amplify para agir nos recursos da sua conta. Para obter instruções detalhadas, consulte Adicionar uma função de serviço.

Nota: A CLI do Amplify não será executada sem uma função de serviço do IAM ativada.

Etapa 2c: Adicionar variáveis de ambiente (opcional)

Quase todo aplicativo precisa obter informações de configuração no tempo de execução. Essas configurações podem ser detalhes da conexão do banco de dados, chaves de API ou parâmetros diferentes. As variáveis de ambiente fornecem um meio de expor essas configurações no momento da construção.

Etapa 3: salvar e implantar

Revise todas as configurações para garantir que tudo esteja configurado corretamente. Escolha Salvar e implantar para implantar seu aplicativo web na redeAWS global de entrega de conteúdo (CDN). Sua criação de front-end normalmente leva de 1 a 2 minutos, mas pode variar de acordo com o tamanho do aplicativo.

Acesse a tela de registros de construção escolhendo um indicador de progresso na seção da ramificação. Uma criação tem os seguintes estágios:

  1. Provision (Provisionar) – O ambiente de criação está configurado usando uma imagem do Docker em um host com 4 vCPU e 7 GB de memória. Cada criação obtém sua própria instância de host, garantindo que todos os recursos sejam isolados com segurança. Os conteúdos do arquivo do Docker são exibidos para garantir que a imagem padrão é compatível com seus requisitos.

  2. Build (Criar) – A fase de criação consiste em três estágios: configurar (clona o repositório no contêiner), implantar o back-end (executa a CLI do Amplify para implantar recursos do back-end) e criar o front-end (cria os artefatos do front-end).

  3. Implantação - Quando a construção estiver concluída, todos os artefatos serão implantados em um ambiente de hospedagem gerenciado pela Amplify Hosting. Toda implantação é atômica – as implantações atômicas eliminam as janelas de manutenção, garantindo que o aplicativo web seja atualizado somente depois que toda a implantação for concluída.

Próximas etapas