Implantar uma aplicação SvelteKit no Amplify Hosting - AWS Amplify Hospedagem

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

Implantar uma aplicação SvelteKit no Amplify Hosting

Use as instruções a seguir para implantar uma aplicação SvelteKit no Amplify Hosting. É possível usar sua própria aplicação ou criar uma aplicação inicial. Para obter mais informações, consulte Criação de um projeto na Documentação do SvelteKit.

Para implantar uma aplicação do SvelteKit com SSR na Amplify Hosting, é necessário adicionar um adaptador ao seu projeto. Não mantemos um adaptador de propriedade da Amplify para o framework do SvelteKit. Neste exemplo, estamos usando o amplify-adapter criado por um membro da comunidade. Esse adaptador está disponível em github.com/gzimbron/amplify-adapter no site do GitHub. A AWS não mantém esse adaptador.

Para implantar uma aplicação SvelteKit no Amplify Hosting

  1. No seu computador local, navegue até a aplicação SvelteKit 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/gzimbron/amplify-adapter. Se você estiver usando um adaptador comunitário diferente, substitua amplify-adapter pelo nome do seu adaptador.

    npm install amplify-adapter

  3. Na pasta do projeto da sua aplicação SvelteKit, abra o arquivo svelte.config.js. Edite o arquivo para usar o amplify-adapter ou substitua 'amplify-adapter' pelo 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 a aplicação para seu repositório Git.

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

    Faça login no Console de gerenciamento da AWS 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 build.

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

    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'
                - '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 logs de aplicações para o Amazon CloudWatch Logs, é necessário 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.