Implemente um SvelteKit aplicativo no Amplify Hosting

Use as instruções a seguir para implantar um SvelteKit aplicativo no Amplify Hosting. Você pode usar seu próprio aplicativo ou criar um aplicativo inicial. Para obter mais informações, consulte Criação de um projeto na SvelteKit documentação.

Para implantar um SvelteKit aplicativo no Amplify Hosting, você deve adicionar um adaptador ao seu projeto. SSR Não mantemos um adaptador de propriedade da Amplify para a SvelteKit estrutura. Neste exemplo, estamos usando o amplify-adapter criado por um membro da comunidade. O adaptador está disponível em github.com/gzimbron/amplify-adapter no site. GitHub AWS não mantém esse adaptador.

Para implantar um SvelteKit aplicativo no Amplify Hosting

1. No seu computador local, navegue até o SvelteKit aplicativo a ser implantado.

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 github.com/gzimbron/amplify-adapter. Se você estiver usando um adaptador de comunidade diferente, substitua amplify-adapter com o nome do seu adaptador.

   npm install amplify-adapter

3. Na pasta do projeto do seu SvelteKit aplicativo, abra o svelte.config.js arquivo. Edite o arquivo para usar amplify-adapter ou substituir 'amplify-adapter' com o nome do seu adaptador. O arquivo deve ser semelhante ao seguinte.

   import adapter from 'amplify-adapter';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
                 
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
           // Consult https://kit.svelte.dev/docs/integrations#preprocessors
           // for more information about preprocessors
           preprocess: vitePreprocess(),
   
           kit: {
                   // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
                   // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
                   // See https://kit.svelte.dev/docs/adapters for more information about adapters.
                   adapter: adapter()
           }
   };
   
   export default config;

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

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

   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, insirabuild.

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 - cd build/compute/default/ - npm i --production e.

    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'
                    - 'cd build/compute/default/'
                    - 'npm i --production'
                  
        artifacts:
            baseDirectory: build
            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.