Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Introducción a la implementación de una aplicación en Amplify Hosting Para comprender cómo funciona Amplify Hosting, consulte los siguientes tutoriales que lo guiarán a través de la creación e implementación de aplicaciones creadas con marcos SSR comunes compatibles con Amplify. **Topics** + [Implementación de una aplicación de Next.js](getting-started-next.md) + [Implemente una aplicación Next.js](get-started-nuxt.md) + [Implemente una aplicación Astro.js](get-started-astro.md) + [Implemente una aplicación SvelteKit](get-started-sveltekit.md) # Implementación de una aplicación Next.js en Amplify Hosting En este tutorial, se explica cómo crear e implementar una aplicación Next.js desde un repositorio de Git. Antes de comenzar este tutorial, complete los siguientes requisitos previos. **Inscríbase en una Cuenta de AWS** Si aún no es AWS cliente, debe [crear una Cuenta de AWS](https://portal.aws.amazon.com/billing/signup#/start/email) siguiendo las instrucciones en línea. Al registrarte, podrás acceder a Amplify y a otros AWS servicios que puedes usar con tu aplicación. **Creación de una aplicación de ** Cree una aplicación básica de Next.js para utilizarla en este tutorial, siguiendo las [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)instrucciones de la *documentación de Next.js*. **Creación de un repositorio de Git** Amplify admite GitHub Bitbucket y. GitLab AWS CodeCommit Envíe la aplicación `create-next-app` a su repositorio de Git. ## Paso 1: Conectar un repositorio de Git En este paso, conecta la aplicación Next.js en un repositorio de Git a Amplify Hosting. **Conexión de una aplicación a un repositorio de Git** 1. Abra la [consola de Amplify](https://console.aws.amazon.com/amplify/). 1. Si va a implementar su primera aplicación en la región actual, de forma predeterminada empezará desde la página de servicio de **AWS Amplify**. En la parte superior de la página, elija **Implementar una aplicación**. 1. En la página **Comenzar a crear con Amplify**, seleccione el proveedor de repositorios de Git y, a continuación, elija **Siguiente**. En el GitHub caso de los repositorios, Amplify utiliza GitHub la función Aplicaciones para autorizar el acceso de Amplify. Para obtener más información sobre la instalación y la autorización de la GitHub aplicación, consulte. [Configuración del acceso de Amplify a los repositorios GitHub](setting-up-GitHub-access.md) **nota** Tras autorizar la consola de Amplify con Bitbucket GitLab, o AWS CodeCommit Amplify obtiene un token de acceso del proveedor del repositorio, pero *no lo almacena* en los servidores. AWS Amplify obtiene acceso a su repositorio utilizando claves de implementación instaladas solo en un repositorio específico. 1. En la página **Añadir ramificación de repositorio**, siga estos pasos: 1. Seleccione el nombre del repositorio que desea conectar. 1. Seleccione el nombre de la ramificación del repositorio que desea conectar. 1. Elija **Siguiente**. ## Paso 2: Confirmar la configuración de compilación Amplify detecta automáticamente la secuencia de comandos de compilación que se va a ejecutar en la ramificación que se va a implementar. En este paso, se revisa y confirma la configuración de compilación. **Confirmación de la configuración de compilación de una aplicación** 1. En la página de **Configuración de la aplicación**, busque la sección **Configuración de compilación**. Compruebe que el **comando de compilación de Frontend** y el **directorio de salida de compilación** sean correctos. Para esta aplicación Next.js de ejemplo, el **directorio de salida de compilación** está establecido en `.next`. 1. El procedimiento para agregar un rol de servicio varía en función de si desea crear uno nuevo o usar uno existente. + Creación de un nuevo rol: 1. Elija **Crear y utilizar un nuevo rol de servicio**. + Uso de un rol existente: 1. Elija **Usar un rol existente**. 1. En la lista de roles de servicio, seleccione el que desee utilizar. 1. Elija **Siguiente**. ## Paso 3: implementar de la aplicación En este paso, implementas tu aplicación en la red AWS global de entrega de contenido (CDN). **Guardar e implementar una aplicación** 1. En la página de **revisión**, confirme que los detalles del repositorio y la configuración de la aplicación son correctos. 1. Elija **Guardar e implementar**. La compilación de frontend suele tardar de 1 a 2 minutos, pero puede variar en función del tamaño de la aplicación. 1. Una vez completada la implementación, podrá ver su aplicación con el enlace en el dominio predeterminado `amplifyapp.com`. **nota** Para aumentar la seguridad de las aplicaciones de Amplify, el dominio *amplifyapp.com* se ha registrado en la [lista de sufijos públicos (PSL)](https://publicsuffix.org/). Para una mayor seguridad, le recomendamos que utilice cookies con un prefijo `__Host-` si alguna vez necesita configurar cookies confidenciales en el nombre de dominio predeterminado de las aplicaciones de Amplify. Esta práctica le ayudará a proteger su dominio de los intentos de falsificación de solicitudes entre sitios (CSRF). Para obtener más información, consulte la página de [configuración de cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) en la red de desarrolladores de Mozilla. ## Paso 4: Limpieza de recursos (opcional) Si ya no necesita la aplicación que implementó para el tutorial, puede eliminarla. Este paso le permite asegurarse de que no se le cobre por los recursos que no vaya a utilizar. **Eliminación de una aplicación** 1. En **Configuración de la aplicación** del menú del panel de navegación, elija **Configuración general**. 1. En la página **Configuración general**, elija **Eliminar aplicación**. 1. En la ventana de confirmación, introduzca **delete**. A continuación, elija **Eliminar aplicación**. ## Agregar características a su aplicación Ahora que tiene una aplicación implementada en Amplify, puede explorar algunas de las siguientes características disponibles para su aplicación alojada. **Variables de entorno** Las aplicaciones suelen necesitar información de configuración en el tiempo de ejecución. Estas configuraciones pueden ser los detalles de conexión de la base de datos, las claves de API o los parámetros. Las variables de entorno proporcionan una manera de exponer estas configuraciones en el momento de la compilación. Para obtener más información, consulte [Environment variables](environment-variables.md). **Dominios personalizados** En este tutorial, Amplify aloja su aplicación en el dominio `amplifyapp.com` predeterminado con una URL como `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. Si conecta su aplicación a un dominio personalizado, los usuarios verán que su aplicación está alojada en una URL personalizada, como `https://www.example.com`. Para obtener más información, consulte [Setting up custom domains](custom-domains.md). **Vista previa de una solicitud de extracción** Las vistas previas de las solicitudes de extracción web ofrecen a los equipos una forma de previsualizar los cambios de las solicitudes de extracción (PRs) antes de fusionar el código con una rama de producción o integración. Para obtener más información, consulte [Web previews for pull requests](pr-previews.md). **Administrar varios entornos** Para saber cómo Amplify trabaja con las ramas de funciones y los GitFlow flujos de trabajo para admitir múltiples implementaciones, consulte Implementaciones de [ramas de funciones y flujos de trabajo de equipo.](multi-environments.md) # Implementación de una aplicación Nuxt.js en Amplify Hosting Utilice las siguientes instrucciones para implementar una aplicación Nuxt.js en Amplify Hosting. Nuxt implementó un adaptador preestablecido mediante el servidor de Nitro. Esto le permite implementar un proyecto de Nuxt sin ninguna configuración adicional. **Implementación de una aplicación Nuxt en Amplify Hosting** 1. Inicia sesión en la consola de [Amplify Consola de administración de AWS](https://console.aws.amazon.com/amplify/) y ábrela. 1. En la página **Todas las aplicaciones**, seleccione **Crear nueva aplicación**. 1. En la página **Comenzar a crear con Amplify**, seleccione el proveedor de repositorios de Git y, a continuación, elija **Siguiente**. 1. En la página **Añadir ramificación de repositorio**, haga lo siguiente: 1. Seleccione el nombre del repositorio que desea conectar. 1. Seleccione el nombre de la ramificación del repositorio que desea conectar. 1. Elija **Siguiente**. 1. Si quieres que Amplify pueda enviar registros de aplicaciones a Amazon CloudWatch Logs, debes habilitarlo explícitamente en la consola. Abra la sección **Configuración avanzada** y, a continuación, seleccione **Habilitar registros de aplicaciones de SSR** en la sección **Implementación de la renderización del servidor (SSR)**. 1. Elija **Siguiente**. 1. En la página **Revisar**, elija **Guardar e implementar**. # Implementación de una aplicación Astro.js en Amplify Hosting Utilice las siguientes instrucciones para implementar una aplicación Astro.js en Amplify Hosting. Puede usar una aplicación existente o crear una aplicación inicial mediante uno de los ejemplos oficiales que proporciona Astro. Para crear una aplicación inicial, consulte [Use a theme or starter template](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template) en la *documentación de Astro*. Para implementar un sitio de Astro con SSR en Amplify Hosting, debe agregar un adaptador a su aplicación. No mantenemos un adaptador propiedad de Amplify para el marco de Astro. En este tutorial, se utiliza el adaptador `astro-aws-amplify` que creó un miembro de la comunidad. Este adaptador está disponible en [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) en el sitio web. GitHub AWS no mantiene este adaptador. **Implementación de una aplicación Astro en Amplify Hosting** 1. En el equipo local, vaya a la aplicación Astro que desea implementar. 1. Para instalar el adaptador, abra una ventana de terminal y ejecute el siguiente comando. En este ejemplo, se usa el adaptador comunitario disponible en [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify). Puede sustituirlo por *astro-aws-amplify* el nombre del adaptador que esté utilizando. ``` npm install astro-aws-amplify ``` 1. Abra el archivo `astro.config.mjs` en la carpeta de proyectos de su aplicación Astro. Actualice el archivo para agregar el adaptador. El archivo debe tener un aspecto similar al siguiente. ``` 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 el cambio y envíe el proyecto a su repositorio de Git. Ahora está listo o lista para implementar la aplicación Astro en Amplify. 1. Inicia sesión en la consola de [Amplify Consola de administración de AWS](https://console.aws.amazon.com/amplify/) y ábrela. 1. En la página **Todas las aplicaciones**, seleccione **Crear nueva aplicación**. 1. En la página **Comenzar a crear con Amplify**, seleccione el proveedor de repositorios de Git y, a continuación, elija **Siguiente**. 1. En la página **Añadir ramificación de repositorio**, haga lo siguiente: 1. Seleccione el nombre del repositorio que desea conectar. 1. Seleccione el nombre de la ramificación del repositorio que desea conectar. 1. Elija **Siguiente**. 1. En la página de **Configuración de la aplicación**, busque la sección **Configuración de compilación**. En **Directorio de salida de compilación**, introduzca **.amplify-hosting**. 1. También debe actualizar los comandos de compilación del frontend de la aplicación en la especificación de compilación. Para abrir la especificación de compilación, seleccione **Editar archivo YML.** 1. En el archivo `amplify.yml`, localice la sección de comandos de compilación del frontend. Escriba **mv node\$1modules ./.amplify-hosting/compute/default** El archivo de configuración de compilación debe tener el aspecto siguiente. ``` 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. Seleccione **Save**. 1. Si quieres que Amplify pueda enviar registros de aplicaciones a Amazon CloudWatch Logs, debes habilitarlo explícitamente en la consola. Abra la sección **Configuración avanzada** y, a continuación, seleccione **Habilitar registros de aplicaciones de SSR** en la sección **Implementación de la renderización del servidor (SSR)**. 1. Elija **Siguiente**. 1. En la página **Revisar**, elija **Guardar e implementar**. # Implemente una SvelteKit aplicación para Amplify Hosting Utilice las siguientes instrucciones para implementar una SvelteKit aplicación en Amplify Hosting. Puede usar su propia aplicación o crear una aplicación de inicio. Para obtener más información, consulte [Crear un proyecto](https://kit.svelte.dev/docs/creating-a-project) en la *SvelteKit documentación*. Para implementar una SvelteKit aplicación con SSR en Amplify Hosting, debes agregar un adaptador a tu proyecto. No mantenemos un adaptador propiedad de Amplify para el SvelteKit marco. En este ejemplo, utilizamos el `amplify-adapter` creado por un miembro de la comunidad. El adaptador está disponible en [github. com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter) en el sitio GitHub web. AWS no mantiene este adaptador. **Para implementar una SvelteKit aplicación en Amplify Hosting** 1. En su computadora local, navegue hasta la SvelteKit aplicación que desee implementar. 1. Para instalar el adaptador, abra una ventana de terminal y ejecute el siguiente comando. En este ejemplo, se usa el adaptador comunitario disponible en [github. com/gzimbron/amplify-adaptador.](https://github.com/gzimbron/amplify-adapter) Si utiliza un adaptador comunitario diferente, *amplify-adapter* sustitúyalo por el nombre del adaptador. ``` npm install amplify-adapter ``` 1. En la carpeta del proyecto de tu SvelteKit aplicación, abre el `svelte.config.js` archivo. Edita el archivo para usarlo `amplify-adapter` o *'amplify-adapter'* sustitúyelo por el nombre de tu adaptador. El archivo debe tener un aspecto similar al siguiente. ``` 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 el cambio y envíe la aplicación a su repositorio de Git. 1. Ahora está listo para implementar su SvelteKit aplicación en Amplify. Inicia sesión en la consola de [Amplify Consola de administración de AWS](https://console.aws.amazon.com/amplify/) y ábrela. 1. En la página **Todas las aplicaciones**, seleccione **Crear nueva aplicación**. 1. En la página **Comenzar a crear con Amplify**, seleccione el proveedor de repositorios de Git y, a continuación, elija **Siguiente**. 1. En la página **Añadir ramificación de repositorio**, haga lo siguiente: 1. Seleccione el nombre del repositorio que desea conectar. 1. Seleccione el nombre de la ramificación del repositorio que desea conectar. 1. Elija **Siguiente**. 1. En la página de **Configuración de la aplicación**, busque la sección **Configuración de compilación**. En **Directorio de salida de compilación**, introduzca **build**. 1. También debe actualizar los comandos de compilación del frontend de la aplicación en la especificación de compilación. Para abrir la especificación de compilación, seleccione **Editar archivo YML.** 1. En el archivo `amplify.yml`, localice la sección de comandos de compilación del frontend. Introduzca **- cd build/compute/default/** y **- npm i --production**. El archivo de configuración de compilación debe tener el aspecto siguiente. ``` 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. Seleccione **Save**. 1. Si quieres que Amplify pueda enviar registros de aplicaciones a Amazon CloudWatch Logs, debes habilitarlo explícitamente en la consola. Abra la sección **Configuración avanzada** y, a continuación, seleccione **Habilitar registros de aplicaciones de SSR** en la sección **Implementación de la renderización del servidor (SSR)**. 1. Elija **Siguiente**. 1. En la página **Revisar**, elija **Guardar e implementar**.