Solução de problemas de implantações SSR

Se você tiver problemas inesperados ao implantar um aplicativo SSR com a computação do Amplify Hosting, consulte os tópicos de solução de problemas a seguir. Se você não encontrar uma solução para seu problema aqui, consulte o guia de solução de problemas de computação na web do SSR no repositório Amplify Hosting Issues. GitHub

Você está usando um adaptador de framework

Se você estiver tendo problemas para implantar uma aplicação de SSR que use um adaptador de framework, consulte Compatibilidade do Amplify com frameworks de SSR.

As rotas da API Edge fazem com que sua compilação do Next.js falhe

Atualmente, o Amplify não oferece suporte às rotas da API Edge do Next.js. Você deve usar APIs e middleware não periféricos ao hospedar seu aplicativo com o Amplify.

A regeneração estática incremental sob demanda não está funcionando para seu aplicativo

A partir da versão 12.2.0, o Next.js oferece suporte à Regeneração Estática Incremental (ISR) para limpar manualmente o cache do Next.js de uma página específica. No entanto, o Amplify atualmente não oferece suporte à ISR sob demanda. Se seu aplicativo estiver usando a revalidação sob demanda do Next.js, esse atributo não funcionará quando você implantar seu aplicativo no Amplify.

A saída de compilação do seu aplicativo excede o tamanho máximo permitido

Atualmente, o tamanho máximo de saída de compilação compatível com o Amplify para aplicativos SSR é 220 MB. Se você receber uma mensagem de erro informando que o tamanho da saída de compilação do seu aplicativo excede o tamanho máximo permitido, tome medidas para reduzi-lo.

Para reduzir o tamanho da saída de compilação de um aplicativo, você pode inspecionar os artefatos de criação do aplicativo e identificar quaisquer dependências grandes a serem atualizadas ou removidas. Primeiro, baixe os artefatos de construção para o seu computador local. Em seguida, verifique o tamanho dos diretórios. Por exemplo, o node_modules diretório pode conter binários como @swc e @esbuild que são referenciados pelos arquivos de tempo de execução do servidor Next.js. Como esses binários não são necessários no tempo de execução, você pode excluí-los após a compilação.

Use as instruções a seguir para baixar a saída de compilação de um aplicativo e inspecionar o tamanho dos diretórios usando a ( AWS Command Line Interface CLI).

Para baixar e inspecionar a saída de compilação de um aplicativo Next.js

1. Abra uma janela de terminal e execute o comando a seguir. Altere o ID do aplicativo, o nome da filial e o ID do trabalho para suas próprias informações. Para a ID do trabalho, use o número da compilação com falha que você está investigando.

   aws amplify get-job --app-id abcd1234 --branch-name main --job-id 2

2. Na saída do terminal, localize o URL dos artefatos pré-assinados na seçãojob,steps,stepName: "BUILD". O URL é destacado em vermelho no exemplo de saída a seguir.

   "job": {
       "summary": {
           "jobArn": "arn:aws:amplify:us-west-2:111122223333:apps/abcd1234/main/jobs/0000000002",
           "jobId": "2",
           "commitId": "HEAD",
           "commitTime": "2024-02-08T21:54:42.398000+00:00",
           "startTime": "2024-02-08T21:54:42.674000+00:00",
           "status": "SUCCEED",
           "endTime": "2024-02-08T22:03:58.071000+00:00"
       },
       "steps": [
           {
               "stepName": "BUILD",
               "startTime": "2024-02-08T21:54:42.693000+00:00",
               "status": "SUCCEED",
               "endTime": "2024-02-08T22:03:30.897000+00:00",
               "logUrl": "https://aws-amplify-prod-us-west-2-artifacts.s3.us-west-2.amazonaws.com/abcd1234/main/0000000002/BUILD/log.txt?X-Amz-Security-Token=IQoJb3JpZ2luX2V...Example

3. Copie e cole o URL em uma janela do navegador. Um artifacts.zip arquivo é baixado para o seu computador local. Essa é a saída da sua compilação.

4. Execute o comando de uso do du disco para inspecionar o tamanho dos diretórios. O comando de exemplo a seguir retorna o tamanho dos compute static diretórios e.

   du -csh compute static

   Veja a seguir um exemplo da saída com informações de tamanho para os static diretórios compute e.

    29M    compute
   3.8M    static
    33M    total

5. Abra o compute diretório e localize a node_modules pasta. Revise suas dependências em busca de arquivos que você possa atualizar ou remover para diminuir o tamanho da pasta.

6. Se seu aplicativo incluir binários que não são necessários no tempo de execução, exclua-os após a compilação adicionando os seguintes comandos à seção de compilação do amplify.yml arquivo do seu aplicativo.

   - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
   - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

   Veja a seguir um exemplo da seção de comandos de compilação de um amplify.yml arquivo com esses comandos adicionados após a execução de uma compilação de produção.

   frontend:
     phases:
       build:
         commands:
            -npm run build
            
            // After running a production build, delete the files
            - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
            - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

Sua compilação falha com um erro de falta de memória

O Next.js permite que você armazene artefatos de compilação em cache para melhorar o desempenho em compilações subsequentes. Além disso, o AWS CodeBuild contêiner do Amplify compacta e carrega esse cache no Amazon S3, em seu nome, para melhorar o desempenho da compilação subsequente. Isso pode fazer com que sua compilação falhe com um erro de falta de memória.

Execute as ações a seguir para evitar que seu aplicativo exceda o limite de memória durante a fase de compilação. Primeiro, remova .next/cache/**/* da seção cache.paths das suas configurações da compilação. Em seguida, remova a variável de ambiente NODE_OPTIONS do seu arquivo de configurações da compilação. Em vez disso, defina a variável de ambiente NODE_OPTIONS no console do Amplify para definir o limite máximo de memória do nó. Para mais informações sobre como configurar as variáveis de ambiente usando o console do Amplify, consulte Definição de variáveis de ambiente.

Depois de fazer essas alterações, tente sua versão novamente. Se for bem-sucedido, adicione .next/cache/**/* novamente à seção cache.paths do seu arquivo de configurações da compilação.

Para obter mais informações sobre a configuração do cache do Next.js para melhorar o desempenho da compilação, consulte AWS CodeBuild no site do Next.js.

O tamanho da resposta HTTP é muito grande

Atualmente, o tamanho máximo de saída de compilação que o Amplify suporta para aplicativos Next.js 12 e 13 usando a plataforma Web Compute é de 5,72 MB. As respostas acima desse limite retornam erros 504 sem conteúdo para os clientes.