Implantando um aplicativo SSR Next.js com o Amplify - 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á.

Implantando um aplicativo SSR Next.js com o Amplify

Por padrão, o Amplify implanta novos aplicativos SSR usando o serviço de computação da Amplify Hosting com suporte para Next.js 12 ou posterior. A computação do Amplify Hosting gerencia totalmente os recursos necessários para implantar um aplicativo SSR. Os aplicativos SSR em sua conta Amplify que você implantou antes de 17 de novembro de 2022 estão usando o provedor SSR Classic (somente Next.js 11).

É altamente recomendável que você migre aplicativos usando SSR clássico (somente Next.js 11) para o provedor SSR de computação Amplify Hosting. O Amplify não realiza migrações automáticas para você. Você deve migrar manualmente seu aplicativo e, em seguida, iniciar uma nova compilação para concluir a atualização. Para obter instruções, consulte Migrando um aplicativo SSR Next.js 11 para a computação do Amplify Hosting.

Use as instruções a seguir para implantar um novo aplicativo SSR.

Para implantar um aplicativo SSR no Amplify usando o provedor de SSR de computação Amplify Hosting
  1. Faça login noAWS Management Console e abra o console do Amplify.

  2. Na página Todos os aplicativos, escolha Novo aplicativo e, em seguida, Hospedar aplicativo web.

  3. Selecione seu provedor GitHub GitLab, Bitbucket ouAWS CodeCommit repositório e escolha Continuar.

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

    1. Na lista Repositórios atualizados recentemente, selecione o nome do repositório a ser conectado.

    2. Na lista Branch, selecione o nome da ramificação do repositório a ser conectada.

    3. Escolha Next (Próximo).

  5. O aplicativo requer uma função de serviço do IAM que o Amplify assume ao chamar outros serviços em seu nome. Você pode permitir que a computação do Amplify Hosting crie automaticamente uma função de serviço para você ou especificar uma função que você criou.

    • Como permitir que o Amplify crie automaticamente uma função e a anexar ao seu aplicativo

      1. Na seção Função do IAM, escolha Criar e usar uma nova função de serviço.

    • Para anexar uma função de serviço que você criou anteriormente

      1. Na seção Função do IAM, escolha Usar uma função de serviço existente.

      2. Escolha a função a ser usada na lista.

  6. Escolha Next (Próximo).

  7. Na página Revisão, escolha Salvar e implantar.

Configurações do arquivo package.json

Quando você implanta um aplicativo Next.js, o Amplify inspeciona o script de construção do aplicativo nopackage.json arquivo para detectar se o aplicativo é SSR ou SSG.

Veja a seguir um exemplo do script de criação de um aplicativo SSR do Next.js. O script de criação"next build" indica que o aplicativo suporta páginas SSG e SSR.

"scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

Veja a seguir um exemplo do script de criação de um aplicativo SSG do Next.js. O script de criação"next build && next export" indica que o aplicativo suporta somente páginas SSG.

"scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" },

Amplify settings de build settings

Depois de inspecionar opackage.json arquivo do seu aplicativo para determinar se você está implantando um aplicativo SSG ou SSR, o Amplify verifica as configurações de compilação do aplicativo. Você pode salvar as configurações de compilação no console do Amplify ou em umamplify.yml arquivo na raiz do seu repositório. Para obter mais informações, consulte Definindo as configurações de compilação.

Se o Amplify detectar que você está implantando um aplicativo SSR Next.js e nenhumamplify.yml arquivo estiver presente, ele gerará uma especificação de construção para o aplicativo e definirábaseDirectory como.next. Se você estiver implantando um aplicativo em que umamplify.yml arquivo está presente, as configurações de compilação no arquivo substituem qualquer configuração de compilação no console. Portanto, você deve definir manualmente obaseDirectory para.next no arquivo.

A seguir está um exemplo das configurações de compilação de um aplicativo em quebaseDirectory está definido como.next. Isso indica que os artefatos de construção são para um aplicativo Next.js que suporta páginas SSG e SSR.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/*

Se o Amplify detectar que você está implantando um aplicativo SSG, ele gerará uma especificação de construção para o aplicativo e obaseDirectory definirá. Se você estiver implantando um aplicativo em que umamplify.yml arquivo está presente, você deve definir manualmente obaseDirectory paraout no arquivo.

A seguir está um exemplo das configurações de compilação de um aplicativo em quebaseDirectory está definido comoout. Isso indica que os artefatos de construção são para um aplicativo Next.js que suporta somente páginas SSG.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/*