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á. # Noções básicas da implantação de uma aplicação no Amplify Hosting Para ajudar você a entender como o Amplify Hosting funciona, os tutoriais a seguir orientam você na criação e implantação de aplicações criadas usando frameworks SSR comuns com suporte no Amplify. **Topics** + [Implantar uma aplicação Next.js](getting-started-next.md) + [Implantar uma aplicação Nuxt.js](get-started-nuxt.md) + [Implantar uma aplicação Astro.js](get-started-astro.md) + [Implantar um SvelteKit aplicativo](get-started-sveltekit.md) # Implantar uma aplicação Next.js no Amplify Hosting Este tutorial explica como compilar e implantar uma aplicação Next.js a partir de um repositório Git. Antes de começar este tutorial, conclua os pré-requisitos a seguir. **Inscreva-se para um Conta da AWS** Se você ainda não é AWS cliente, precisa [criar um Conta da AWS](https://portal.aws.amazon.com/billing/signup#/start/email) seguindo as instruções on-line. A inscrição permite que você acesse o Amplify e outros AWS serviços que você pode usar com seu aplicativo. **Criar uma aplicação do ** Crie um aplicativo Next.js básico para usar neste tutorial, usando as [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)instruções na *documentação do Next.js*. **Crie um repositório Git** O Amplify suporta GitHub Bitbucket e. GitLab AWS CodeCommit Envie sua aplicação `create-next-app` para seu repositório Git. ## Etapa 1: conectar um repositório Git Nesta etapa, você conecta sua aplicação Next.js em um repositório Git ao Amplify Hosting. **Para conectar uma aplicação a um repositório Git** 1. Abra o [console do Amplify](https://console.aws.amazon.com/amplify/). 1. Se você estiver implantando sua primeira aplicação na região atual, por padrão, você começará na página de serviço do **AWS Amplify**. Na parte superior da página, escolha **Implantar uma aplicação**. 1. Na página **Comece a desenvolver com o Amplify**, escolha seu provedor de repositório Git e escolha **Avançar**. Para GitHub repositórios, o Amplify usa GitHub o recurso Apps para autorizar o acesso ao Amplify. Para obter mais informações sobre como instalar e autorizar o GitHub aplicativo, consulte[Configurando o acesso do Amplify aos repositórios GitHub](setting-up-GitHub-access.md). **nota** Depois de autorizar o console do Amplify com o Bitbucket GitLab, ou AWS CodeCommit, o Amplify busca um token de acesso do provedor do repositório, mas *não armazena o token nos servidores*. AWS O Amplify acessa seu repositório usando chaves de implantação instaladas somente em um repositório específico. 1. Na página **Adicionar ramificação do repositório**, faça o seguinte: 1. Selecione o nome do repositório a ser conectado. 1. Selecione o nome da ramificação do repositório a ser conectada. 1. Escolha **Próximo**. ## Etapa 2: confirmar as configurações de compilação O Amplify detecta automaticamente a sequência de comandos de compilação a ser executada na ramificação que você está implantando. Nesta etapa, você revisa e confirma suas configurações de compilação. **Para confirmar as configurações de compilação de uma aplicação** 1. Na página de **Configurações da aplicação**, localize a seção **Configurações de compilação**. Verifique se o **Comando de compilação do frontend** e o **Diretório de saída da compilação** estão corretos. Para esta aplicação de exemplo Next.js, o **Diretório de saída da compilação** está definido como `.next`. 1. O procedimento para adicionar um perfil de serviço varia dependendo se você deseja criar um novo perfil ou usar um existente. + Para criar um novo perfil: 1. Escolha **Criar e usar um novo perfil de serviço**. + Para usar um perfil existente: 1. Escolha **Usar um perfil existente**. 1. Na lista de perfis de serviço, selecione o perfil a ser usado. 1. Escolha **Próximo**. ## Etapa 3: Implantar um aplicativo Nesta etapa, você implanta seu aplicativo na rede AWS global de entrega de conteúdo (CDN). **Para salvar e implantar uma aplicação** 1. Na página **Revisão**, confirme se os detalhes do repositório e as configurações da aplicação estão corretos. 1. Escolha **Salvar e implantar**. Sua compilação do frontend geralmente leva de 1 a 2 minutos, mas pode variar de acordo com o tamanho da aplicação. 1. Depois de concluir a implantação, sua aplicação poderá ser visualizada por meio do link para o domínio padrão `amplifyapp.com`. **nota** Para aumentar a segurança de seus aplicativos do Amplify, o domínio *amplifyapp.com* é registrado na [Lista Pública de Sufixos (PSL)](https://publicsuffix.org/). Para maior segurança, recomendamos que você use cookies com um prefixo `__Host-` se precisar definir cookies confidenciais no nome de domínio padrão para seus aplicativos do Amplify. Essa prática ajudará a defender seu domínio contra tentativas de falsificação de solicitação entre sites (CSRF). Para obter mais informações, consulte a página [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) na Mozilla Developer Network. ## Etapa 4: (opcional) limpar recursos Se você não precisa mais da aplicação que implantou no tutorial, é possível excluí-la. Esta etapa ajuda a garantir que você não será cobrado pelos recursos que não está utilizando. **Para excluir uma aplicação** 1. No menu **Configurações da aplicação**, no painel de navegação, escolha **Configurações gerais**. 1. Na página **Configurações gerais**, escolha **Excluir aplicação**. 1. Na janela de confirmação, insira **delete**. Em seguida, selecione **Excluir aplicação**. ## Adicionar recursos à sua aplicação Agora que você tem uma aplicação implantada no Amplify, será possível explorar alguns dos recursos a seguir que estão disponíveis para sua aplicação hospedada. **Variáveis de ambiente** As aplicações geralmente precisam de informações de configuração no runtime. Essas configurações podem ser detalhes da conexão do banco de dados, chaves de API ou parâmetros. As variáveis de ambiente fornecem uma forma de expor essas configurações no momento da compilação. Para obter mais informações, consulte [Environment variables](environment-variables.md). **Domínios personalizados** Neste tutorial, o Amplify hospeda sua aplicação para você no domínio padrão `amplifyapp.com` com uma URL como `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. Quando você conecta seu aplicativo a um domínio personalizado, os usuários veem que seu aplicativo está hospedado em um URL personalizado, como `https://www.example.com`. Para obter mais informações, consulte [Configuração de domínios personalizado](custom-domains.md). **Pré-visualizações de solicitação pull** As visualizações prévias de pull request da Web oferecem às equipes uma maneira de visualizar as alterações das pull requests (PRs) antes de mesclar o código em uma ramificação de produção ou integração. Para obter mais informações, consulte [Pré-visualizações da Web para solicitações pull](pr-previews.md). **Gerenciar vários ambientes** Para saber como o Amplify funciona com ramificações de recursos e GitFlow fluxos de trabalho para oferecer suporte a várias implantações, consulte Implantações de [ramificações de recursos](multi-environments.md) e fluxos de trabalho de equipe. # Implantar uma aplicação Nuxt.js no Amplify Hosting Use as instruções a seguir para implantar uma aplicação Nuxt.js no Amplify Hosting. O Nuxt implementou um adaptador predefinido usando o servidor Nitro. Isso permite que você implante um projeto Nuxt sem nenhuma configuração adicional. **Para implantar uma aplicação Nuxt no Amplify Hosting** 1. Faça login Console de gerenciamento da AWS e abra o console do [Amplify](https://console.aws.amazon.com/amplify/). 1. Na página **Todas as aplicações**, escolha **Criar nova aplicação**. 1. Na página **Comece a desenvolver com o Amplify**, escolha seu provedor de repositório Git e escolha **Avançar**. 1. Na página **Adicionar ramificação do repositório**, faça o seguinte: 1. Selecione o nome do repositório a ser conectado. 1. Selecione o nome da ramificação do repositório a ser conectada. 1. Escolha **Próximo**. 1. 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 logs da aplicação SSR** na seção **Implantação da renderização no lado do servidor (SSR)**. 1. Escolha **Próximo**. 1. Na página **Revisar**, escolha **Salvar e implantar**. # 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](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template) na *Documentação do Astro*. Para implantar um site do Astro com SSR na Amplify Hosting, é necessário 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 no [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) no site. GitHub 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. 1. Para instalar o adaptador, abra uma janela de terminal e execute o comando a seguir. Este exemplo usa o adaptador de comunidade disponível no [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify). Você pode *astro-aws-amplify* substituir pelo nome do adaptador que você está usando. ``` npm install astro-aws-amplify ``` 1. 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', }); ``` 1. 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. 1. Faça login Console de gerenciamento da AWS e abra o console do [Amplify](https://console.aws.amazon.com/amplify/). 1. Na página **Todas as aplicações**, escolha **Criar nova aplicação**. 1. Na página **Comece a desenvolver com o Amplify**, escolha seu provedor de repositório Git e escolha **Avançar**. 1. Na página **Adicionar ramificação do repositório**, faça o seguinte: 1. Selecione o nome do repositório a ser conectado. 1. Selecione o nome da ramificação do repositório a ser conectada. 1. Escolha **Próximo**. 1. 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**. 1. 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**. 1. No arquivo `amplify.yml`, localize a seção de comandos de compilação de frontend. Digite **mv node\$1modules ./.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/**/*' ``` 1. Escolha **Salvar**. 1. 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 logs da aplicação SSR** na seção **Implantação da renderização no lado do servidor (SSR)**. 1. Escolha **Próximo**. 1. Na página **Revisar**, escolha **Salvar e implantar**. # Implante um SvelteKit aplicativo no Amplify Hosting Use as instruções a seguir para implantar um SvelteKit aplicativo 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](https://kit.svelte.dev/docs/creating-a-project) na *SvelteKit documentação*. Para implantar um SvelteKit aplicativo com SSR no Amplify Hosting, você deve adicionar um adaptador ao seu projeto. 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 no [github. com/gzimbron/amplify-adaptador](https://github.com/gzimbron/amplify-adapter) no GitHub site. 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. 1. Para instalar o adaptador, abra uma janela de terminal e execute o comando a seguir. Este exemplo usa o adaptador de comunidade disponível no [github. com/gzimbron/amplify-adaptador](https://github.com/gzimbron/amplify-adapter). Se você estiver usando um adaptador de comunidade diferente, *amplify-adapter* substitua pelo nome do seu adaptador. ``` npm install amplify-adapter ``` 1. Na pasta do projeto do seu SvelteKit aplicativo, abra o `svelte.config.js` arquivo. Edite o arquivo para usar `amplify-adapter` ou *'amplify-adapter'* substituir 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; ``` 1. Confirme a alteração e envie a aplicação para seu repositório Git. 1. Agora você está pronto para implantar seu SvelteKit aplicativo no Amplify. Faça login Console de gerenciamento da AWS e abra o console do [Amplify](https://console.aws.amazon.com/amplify/). 1. Na página **Todas as aplicações**, escolha **Criar nova aplicação**. 1. Na página **Comece a desenvolver com o Amplify**, escolha seu provedor de repositório Git e escolha **Avançar**. 1. Na página **Adicionar ramificação do repositório**, faça o seguinte: 1. Selecione o nome do repositório a ser conectado. 1. Selecione o nome da ramificação do repositório a ser conectada. 1. Escolha **Próximo**. 1. 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**. 1. 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**. 1. 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/**/*' ``` 1. Escolha **Salvar**. 1. 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 logs da aplicação SSR** na seção **Implantação da renderização no lado do servidor (SSR)**. 1. Escolha **Próximo**. 1. Na página **Revisar**, escolha **Salvar e implantar**.