Overview
Muchas aplicaciones web desarrolladas con frameworks modernos, como React, Vue y Angular, son aplicaciones de una sola página (SPA) que gestionan dinámicamente la enrutación y el renderizado en el lado del cliente en lugar de obtener cada página renderizada del servidor. Puede utilizar Atlas App Services para host su SPA y servirlo a los clientes.
Para alojar tu aplicación, necesitas especificar que es una SPA en App Services. Por defecto, App Services gestiona las solicitudes de un recurso determinado devolviendo el archivo alojado en la ruta del recurso especificada o un 404 si ningún archivo coincide con la ruta. Sin embargo, los SPA se renderizan en un único archivo HTML específico, por lo que todas las solicitudes deberían devolver ese archivo independientemente de la ruta del recurso solicitada.
Esta guía abarca cómo configurar App Services Hosting para redirigir todas las solicitudes de recursos a un único archivo y así soportar el patrón SPA.
Nota
Errores 404 en aplicaciones de una sola página
Cuando se habilita el alojamiento de aplicaciones de una sola página, App Services siempre devuelve una respuesta HTTP 200 con la raíz de la aplicación, independientemente de la ruta solicitada. Esto significa que no se puede especificar una página 404 personalizada para una SPA. En su lugar, se debe incluir código personalizado en la aplicación para gestionar rutas no válidas.
Procedimiento
Sube tu aplicación creada a App Services
Las aplicaciones de una sola página se procesan en un único archivo HTML específico, normalmente /index.htmlEl archivo debe incluir el código JavaScript necesario para conectar y renderizar tu aplicación, ya sea integrado en una etiqueta <script> o importado desde un archivo externo. También deberás alojar cualquier recurso al que no desees acceder a través de una CDN.
Cuando esté listo para alojar su SPA, ejecute el script de compilación de su aplicación y luego cargue la carpeta de compilación en App Services.
Configura App Services para servir tu aplicación
Una vez que haya comenzado a alojar los archivos de su aplicación, podrá acceder inmediatamente a su SPA solicitando directamente el archivo HTML raíz. Sin embargo, una solicitud a cualquier ruta distinta del archivo raíz devolverá un error 404. Esto puede afectar el comportamiento esperado de una SPA que utiliza un enrutador del lado del cliente o que depende de la ruta URL.
Para configurar los Servicios de aplicación para servir la página raíz del SPA para todas las solicitudes:
Navega hasta el Hosting página en la interfaz de usuario de App Services y luego haga clic en la pestaña Settings.
Asegúrese de no haber especificado una página 404 personalizada. Si la página 404 personalizada está habilitada, haga clic en el ícono de la papelera () junto a la página 404 especificada.
Junto a Single Page Application, haga clic en Choose File. Seleccione el archivo HTML raíz de su SPA y haga clic en Select.
Haga clic en Save.
Nota
Permitir alojamiento en la Interfaz de Usuario
Antes de comenzar a utilizar la CLI de App Services con alojamiento estático, debe habilitar el alojamiento en la interfaz de usuario de App Services.
Obtenga la última versión de su aplicación
Para configurar una aplicación de una sola página con la CLI de App Services, necesita una copia local de los archivos de configuración de su aplicación.
Para extraer una copia local de la última versión de su aplicación, ejecute lo siguiente:
appservices pull --remote="<Your App ID>"
Tip
También puedes descargar una copia de los archivos de configuración de tu aplicación desde la pantalla Deploy > Import/Export App en la Interfaz de usuario Realm.
Add Your Built Application Code
Las aplicaciones de una sola página se renderizan en un único archivo HTML específico, normalmente /index.html. Este archivo debe incluir el código JavaScript necesario para conectar y renderizar la aplicación, ya sea integrado en una etiqueta <script> o importado desde un archivo externo. También deberá alojar cualquier recurso al que no desee acceder a través de una CDN.
Cuando esté listo para alojar su SPA, ejecute el script de compilación de su aplicación y luego copie la carpeta de compilación de salida en el directorio /hosting/files del directorio de su aplicación.
Configura App Services para servir tu aplicación
En,hosting/config.json default_response_code 200 establece como y default_error_path como la ruta de recursos del archivo HTML raíz de tu SPA. Asegúrate de guardar el archivo al terminar.
{ "enabled": true, "default_response_code": 200, "default_error_path": "/index.html", }
Implemente la Configuración de Hosting Actualizada
Una vez que hayas actualizado y guardado hosting/config.json, puedes enviar la configuración actualizada a tu aplicación remota. La CLI de App Services admite tu SPA inmediatamente al enviarla.
appservices push --remote="<Your App ID>" --include-hosting