Implantar uma aplicação Next.js no Amplify Hosting

Este tutorial explica como compilar e implantar uma aplicação Next.js a partir de um repositório Git.

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

Cadastrar-se em uma Conta da AWS

Se você ainda não é cliente da AWS, precisará criar uma Conta da AWS seguindo as instruções online. Se cadastrar habilitará o acesso ao Amplify e a outros serviços da AWS que poderão ser usados com a sua aplicação.

Cria uma aplicação

Crie uma aplicação Next.js básica para usar neste tutorial, usando as instruções create-next-app na documentação do Next.js.

Crie um repositório Git

O Amplify oferece suporte ao GitHub, Bitbucket, GitLab e AWS CodeCommit. Envie sua aplicação create-next-app para seu repositório Git.

Etapa 1: conectar um repositório Git

Nesta etapa, você conecta sua aplicação Next.js em um repositório Git ao Amplify Hosting.

Para conectar uma aplicação a um repositório Git

1. Abra o console do Amplify.

2. Se você estiver implantando sua primeira aplicação na região atual, por padrão, você começará na página de serviço do AWS Amplify.

   Escolha Criar nova aplicação na parte superior da página.

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

   Para repositórios do GitHub, o Amplify usa o atributo Aplicações do GitHub para autorizar o acesso ao Amplify. Para obter mais informações sobre como instalar e autorizar o aplicativo do GitHub, consulte Configurar o acesso do Amplify aos repositórios do GitHub.

   nota

   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.

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 a ser conectada.

   3. Escolha Próximo.

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

O Amplify detecta automaticamente a sequência de comandos de compilação a ser executada 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 compilação de uma aplicação

1. Na página de Configurações da aplicação, localize a seção Configurações de compilação.

   Verifique se o Comando de compilação do frontend e o Diretório de saída da compilação estão corretos. Para esta aplicação de exemplo Next.js, o Diretório de saída da compilação está definido como .next.

2. O procedimento para adicionar um perfil de serviço varia dependendo se você deseja criar um novo perfil ou usar um existente.

   • Para criar um novo perfil:

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

   • Para usar um perfil existente:

     1. Escolha Usar um perfil existente.

     2. Na lista de perfis de serviço, selecione o perfil a ser usado.

3. Escolha Próximo.

Etapa 3: Implantar um aplicativo

Nesta etapa, você implanta sua aplicação na rede de entrega de conteúdo (CDN) global da AWS.

Para salvar e implantar uma aplicação

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

2. Escolha Salvar e implantar. Sua compilação do frontend geralmente leva de 1 a 2 minutos, mas pode variar de acordo com o tamanho da aplicação.

3. Depois de concluir a implantação, sua aplicação poderá ser visualizada por meio do link para o domínio padrão amplifyapp.com.

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.

Etapa 4: (opcional) limpar recursos

Se você não precisa mais da aplicação que implantou no tutorial, é possível excluí-la. Esta etapa ajuda a garantir que você não será cobrado pelos recursos que não está utilizando.

Para excluir uma aplicação

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

2. Na página Configurações gerais, escolha Excluir aplicação.

3. Na janela de confirmação, insira delete. Em seguida, selecione Excluir aplicação.

Adicionar recursos à sua aplicação

Agora que você tem uma aplicação implantada no Amplify, será possível explorar alguns dos recursos a seguir que estão disponíveis para sua aplicação hospedada.

Variáveis de ambiente

As aplicações geralmente precisam de 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. As variáveis de ambiente fornecem uma forma de expor essas configurações no momento da compilação. Para obter mais informações, consulte Environment variables.

Domínios personalizados

Neste tutorial, o Amplify hospeda sua aplicação para você no domínio padrão amplifyapp.com com uma 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 URL personalizado, como https://www.example.com. Para obter mais informações, consulte Configuração de domínios personalizado.

Visualizações de solicitação pull

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

Gerenciar vários ambientes

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