Implante um aplicativo Next.js no Amplify Hosting

Este tutorial explica como criar e implantar um aplicativo Next.js a partir de um repositório Git.

Antes de começar este tutorial, preencha os pré-requisitos a seguir.

Inscreva-se para um Conta da AWS

Se você ainda não é AWS cliente, precisa criar um Conta da AWS seguindo as instruções on-line. A inscrição permite que você acesse o Amplify e outros AWS serviços que você pode usar com seu aplicativo.

Cria uma aplicação

Crie um aplicativo Next.js básico para usar neste tutorial, usando as create-next-appinstruções na documentação do Next.js.

Crie um repositório Git

O Amplify suporta GitHub Bitbucket e. GitLab AWS CodeCommit Envie seu create-next-app aplicativo para o seu repositório Git.

Etapa 1: Conectar um repositório Git

Nesta etapa, você conecta seu aplicativo Next.js em um repositório Git ao Amplify Hosting.

Para conectar um aplicativo em um repositório Git

1. Abra o console do Amplify.

2. Se você estiver implantando seu primeiro aplicativo na região atual, por padrão, você começará na página de AWS Amplifyserviço.

   Escolha Criar novo aplicativo na parte superior da página.

3. Na página Comece a criar com o Amplify, escolha seu provedor de repositório Git e escolha Avançar.

   Para GitHub repositórios, o Amplify usa GitHub o recurso Apps para autorizar o acesso ao Amplify. Para obter mais informações sobre como instalar e autorizar o GitHub aplicativo, consulteConfigurar o acesso do Amplify aos repositórios do GitHub.

   nota

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

4. Na página Adicionar ramificação do repositório, faça o seguinte:

   1. Selecione o nome do repositório a ser conectado.

   2. Selecione o nome da ramificação do repositório para se conectar.

   3. Escolha Próximo.

Etapa 2: confirme as configurações de compilação

O Amplify detecta automaticamente a sequência de comandos de compilação a serem executados na ramificação que você está implantando. Nesta etapa, você revisa e confirma suas configurações de compilação.

Para confirmar as configurações de criação de um aplicativo

1. Na página de configurações do aplicativo, localize a seção Configurações de compilação.

   Verifique se o comando Frontend build e o diretório de saída Build estão corretos. Para este aplicativo de exemplo Next.js, o diretório de saída do Build está definido como.next.

2. O procedimento para adicionar uma função de serviço varia dependendo se você deseja criar uma nova função ou usar uma existente.

   • Para criar uma nova função:

     1. Escolha Criar e usar um novo perfil de serviço.

   • Para usar uma função existente:

     1. Escolha Usar uma função existente.

     2. Na lista de funções de serviço, selecione a função a ser usada.

3. Escolha Próximo.

Etapa 3: Implantar um aplicativo

Nesta etapa, você implanta seu aplicativo na rede AWS global de entrega de conteúdo (CDN).

Para salvar e implantar um aplicativo

1. Na página de revisão, confirme se os detalhes do repositório e as configurações do aplicativo estão corretos.

2. Escolha Salvar e implantar. Sua criação de front-end normalmente leva de 1 a 2 minutos, mas pode variar de acordo com o tamanho do aplicativo.

3. Quando a implantação estiver concluída, você poderá visualizar seu aplicativo usando o link para o domínio amplifyapp.com padrã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ções entre sites ()CSRF. Para obter mais informações, consulte a página Set-Cookie na Mozilla Developer Network.

Etapa 4: (opcional) limpar os recursos

Se você não precisar mais do aplicativo que implantou para o tutorial, poderá excluí-lo. Esta etapa ajuda a garantir que você não será cobrado pelos recursos que não está utilizando.

Para excluir um aplicativo

1. No menu Configurações do aplicativo no painel de navegação, escolha Configurações gerais.

2. Na página Configurações gerais, escolha Excluir aplicativo.

3. Na janela de confirmação, insiradelete. Em seguida, escolha Excluir aplicativo.

Adicione recursos ao seu aplicativo

Agora que você tem um aplicativo implantado no Amplify, você pode explorar alguns dos seguintes recursos que estão disponíveis para seu aplicativo hospedado.

Variáveis de ambiente

Os aplicativos geralmente precisam de informações de configuração em tempo de execução. Essas configurações podem ser detalhes, API chaves ou parâmetros da conexão do banco de dados. As variáveis de ambiente fornecem uma maneira de expor essas configurações no momento da construção. Para obter mais informações, consulte Variáveis de ambiente.

Domínios personalizados

Neste tutorial, o Amplify hospeda seu aplicativo para você no amplifyapp.com domínio padrão com um nome URL como. https://branch-name.d1m7bkiki6tdw1.amplifyapp.com Quando você conecta seu aplicativo a um domínio personalizado, os usuários veem que seu aplicativo está hospedado em um domínio personalizadoURL, comohttps://www.example.com. Para obter mais informações, consulte Configurar domínios personalizados.

Visualizações de solicitação pull

As visualizações prévias de pull request da Web oferecem às equipes uma maneira de visualizar as alterações das pull requests (PRs) antes de mesclar o código em uma ramificação de produção ou integração. Para obter mais informações, consulte Pré-visualizações da Web para pull requests.

Gerenciar vários ambientes

Para saber como o Amplify funciona com ramificações de recursos e GitFlow fluxos de trabalho para oferecer suporte a várias implantações, consulte Implantações de ramificações de recursos e fluxos de trabalho de equipe.