Introdução ao código existente - AWS Amplify Hospedagem

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á.

Introdução ao código existente

Nesta demonstração, você aprenderá a criar, implantar e hospedar continuamente um aplicativo web moderno. Os aplicativos da 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 oferece suporte a aplicativos web que usam renderização do lado do servidor (SSR) e são criados usando o Next.js.

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


         A página inicial do AWS Amplify 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ágina inicial do AWS Amplify com a opção Começar circulada em vermelho.

Se você estiver começando na 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: Conectar um repositório

Conecte seus repositórios do GitHub, Bitbucket, GitLab ou AWS CodeCommit. Você também tem a opção de fazer upload manualmente dos artefatos de compilaçã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 que você autorizar o console do Amplify com Bitbucket, GitLab ou AWS CodeCommit, o Amplify obterá um token de acesso no provedor do repositório, mas não armazenará o token nos servidores da AWS. O Amplify acessa seu repositório usando chaves de implantação instaladas somente em um repositório específico.

Para repositórios do GitHub, o Amplify agora usa o atributo Aplicativos do GitHub para autorizar o acesso ao Amplify. Com o aplicativo Amplify GitHub, as permissões são mais refinadas, 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 aplicativo GitHub, consulte Configurar o acesso do Amplify aos repositórios do GitHub.

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.


            Captura de tela da seção de ramificação do repositório no console do Amplify com uma ramificação selecionada.

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

Para a ramificação selecionada, o Amplify inspeciona o repositório para detectar automaticamente a sequência de comandos de compilação a ser executada.


            Captura de tela das configurações de compilação para a ramificação.

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


            Captura de tela dos comandos de compilação na janela de edição.

Para obter mais informações, consulte Sintaxe das especificações da compilação YAML.

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

Se você tiver conectado um repositório provisionado pela CLI do Amplify v1.0+ (execute amplify -v para encontrar a versão da CLI do Amplify), o Amplify Hosting irá 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 de 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 tutorial detalhado, consulte Conceitos básicos de implantações de pilha completa.


            Captura de tela da seção página Definir configurações de compilação no console do Amplify.

Para implantar a funcionalidade do back-end usando a CLI do Amplify durante a compilação, crie ou reutilize um perfil de serviço AWS Identity and Access Management do IAM. Os perfis do IAM são uma maneira segura de conceder permissões ao Amplify para atuar nos recursos da sua conta. Para obter instruções detalhadas, consulte Adicionar um perfil de serviço.

Observação: a CLI do Amplify não será executada sem um perfil de serviço do IAM habilitado.


            Captura de tela da seção Definir configurações de compilação quando você especifica o perfil de serviço.

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

Quase todo aplicativo precisa obter informações de configuração no runtime. 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 para expor essas configurações no momento da compilação.

Etapa 3: salvar e implantar

Revise todas as configurações para garantir que tudo esteja configurado corretamente. Selecione Salvar e implantar para implantar o aplicativo web AWS em uma rede de entrega de conteúdo (CDN) global. Sua compilação do front-end geralmente leva de 1 a 2 minutos, mas pode variar de acordo com o tamanho do aplicativo.

Acesse a tela de logs de compilação selecionando um indicador de andamento no bloco da ramificação. Uma compilação tem os seguintes estágios:

  1. Provisionar – O ambiente de compilação está configurado usando uma imagem do Docker em um host com 4 vCPU e 7 GB de memória. Cada compilaçã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. Compilar – A fase de compilaçã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. Implantar – Quando a compilação for concluída, todos os artefatos serão implantados em um ambiente de hospedagem gerenciado pelo Amplify. Você pode ver seu aplicativo no domínio amplifyapp.com. 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.

    
                  Captura de tela do andamento da compilação para a ramificação.
nota

Para aumentar a segurança de seus aplicativos do Amplify, o domínio amplifyapp.com é registrado na Lista Pública de Sufixos (PSL). Para maior segurança, recomendamos que você use cookies com um prefixo __Host- se precisar definir cookies confidenciais no nome de domínio padrão para seus aplicativos do Amplify. Essa prática ajudará a defender seu domínio contra tentativas de falsificação de solicitação entre sites (CSRF). Para obter mais informações, consulte a página Set-Cookie na Mozilla Developer Network.

Próximas etapas