Implante um aplicativo Astro.js no Amplify Hosting

Use as instruções a seguir para implantar um aplicativo Astro.js no Amplify Hosting. Você pode usar um aplicativo existente ou criar um aplicativo inicial usando um dos exemplos oficiais fornecidos pelo Astro. Para criar um aplicativo inicial, consulte Usar um tema ou modelo inicial na documentação do Astro.

Para implantar um site Astro com SSR o Amplify Hosting, você deve adicionar um adaptador ao seu aplicativo. Não mantemos um adaptador de propriedade da Amplify para a estrutura Astro. Este tutorial usa o astro-aws-amplify adaptador que foi criado por um membro da comunidade. Esse adaptador está disponível em astro-aws-amplifygithub.com/alexnguyennz/ no site. GitHub AWS não mantém esse adaptador.

Para implantar um aplicativo Astro no Amplify Hosting

1. Em seu computador local, navegue até o aplicativo Astro para implantar.

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

   npm install astro-aws-amplify

3. Na pasta do projeto do seu aplicativo Astro, abra o astro.config.mjs arquivo. 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 o seu repositório Git.

   Agora você está pronto para implantar seu aplicativo Astro no Amplify.

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

6. Na página Todos os aplicativos, escolha Criar novo aplicativo.

7. Na página Comece a criar 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 para se conectar.

   3. Escolha Próximo.

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

10. Você também deve atualizar os comandos de compilação de front-end do aplicativo na especificação de compilação. Para abrir a especificação de compilação, escolha Editar YML arquivo.

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

    Seu arquivo de configurações de compilação deve ter a seguinte aparência.

    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 registros de aplicativos para o Amazon CloudWatch Logs, você deve habilitar isso explicitamente no console. Abra a seção Configurações avançadas e escolha Habilitar registros de SSR aplicativos na seção Implantação do Server-Side Rendering () SSR.

14. Escolha Próximo.

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