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

Use as instruções a seguir para implantar uma aplicação Astro.js no Amplify Hosting. É possível usar uma aplicação existente ou criar uma aplicação inicial usando um dos exemplos oficiais fornecidos pelo Astro. Para criar uma aplicação inicial, consulte Uso de um tema ou modelo inicial na Documentação do Astro.

Para implantar um site do Astro com SSR na Amplify Hosting, você deve adicionar um adaptador à sua aplicação. Não mantemos um adaptador de propriedade da Amplify para o framework do Astro. Este tutorial usa o adaptador astro-aws-amplify, que foi criado por um membro da comunidade. Esse adaptador está disponível em github.com/alexnguyennz/astro-aws-amplify no site do GitHub. A AWS não mantém esse adaptador.

Para implantar uma aplicação Astro no Amplify Hosting

1. No seu computador local, navegue até a aplicação Astro a ser implantada.

2. Para instalar o adaptador, abra uma janela de terminal e execute o comando a seguir. Este exemplo usa o adaptador comunitário disponível em github.com/alexnguyennz/astro-aws-amplify. É possível substituir astro-aws-amplify pelo nome do adaptador que você está usando.

   npm install astro-aws-amplify

3. Na pasta do projeto da sua aplicação Astro, abra o arquivo astro.config.mjs. Atualize o arquivo para adicionar o adaptador. O arquivo deve ser semelhante ao seguinte.

   import { defineConfig } from 'astro/config';
   import mdx from '@astrojs/mdx';
   import awsAmplify from 'astro-aws-amplify';
    
   import sitemap from '@astrojs/sitemap';
    
   // https://astro.build/config
   export default defineConfig({
     site: 'https://example.com',
     integrations: [mdx(), sitemap()],
     adapter: awsAmplify(),
     output: 'server',
   });

4. Confirme a alteração e envie o projeto para seu repositório Git.

   Agora você está pronto para implantar sua aplicação do Astro no Amplify.

5. Faça login no AWS Management Console e abra o console do Amplify.

6. Na página Todas as aplicações, escolha Criar nova aplicação.

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

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

9. Na página de Configurações da aplicação, localize a seção Configurações de compilação. Em Diretório de saída da compilação, insira .amplify-hosting.

10. Você também deve atualizar os comandos de criação de frontend da aplicação na especificação de compilação. Para abrir a especificação de compilação, escolha Editar arquivo YML.

11. No arquivo amplify.yml, localize a seção de comandos de compilação de frontend. Digite mv node_modules ./.amplify-hosting/compute/default

    Seu arquivo de configurações de compilação do projeto devem se parecer com o seguinte.

    version: 1
    frontend:
        phases:
            preBuild:
                commands:
                    - 'npm ci --cache .npm --prefer-offline'
            build:
                commands:
                    - 'npm run build'
                    - 'mv node_modules ./.amplify-hosting/compute/default'
        artifacts:
            baseDirectory: .amplify-hosting
            files:
                - '**/*'
        cache:
            paths:
                - '.npm/**/*'
                

12. Escolha Salvar.

13. Se você quiser que o Amplify seja capaz de entregar logs de aplicações para o Amazon CloudWatch Logs, você deve habilitar isso explicitamente no console. Abra a seção Configurações avançadas e escolha Habilitar logs da aplicação SSR na seção Implantação da renderização no lado do servidor (SSR).

14. Escolha Próximo.

15. Na página Revisar, escolha Salvar e implantar.