Overview
Muchas aplicaciones web desarrolladas con frameworks modernos, como React, Vue y Angular, son aplicaciones de página única (SPA) que gestionan dinámicamente el enrutamiento y la renderización del lado del cliente, en lugar de obtener cada página renderizada del servidor. Puedes usar Atlas App Services para alojar tu SPA y ofrecerla a los clientes.
Para alojar tu aplicación, debes especificar que es una SPA en App Services. De forma predeterminada, App Services gestiona las solicitudes de un recurso determinado devolviendo el archivo alojado en la ruta de recurso especificada o un 404 si ningún archivo coincide con la ruta. Sin embargo, las 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 de recurso solicitada.
Esta guía explica cómo configurar el alojamiento de servicios de aplicaciones para redirigir todas las solicitudes de recursos a un solo archivo para admitir el patrón SPA.
Nota
404 Errores en aplicaciones de una sola página
Cuando se habilita el alojamiento de aplicaciones de una sola página, App Services siempre devuelve una 200 respuesta HTTP con la raíz de la aplicación, independientemente de la ruta solicitada. Esto significa que no se puede especificar una 404 página 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:
Navegar 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 404 página personalizada. Si la página personalizada 404 está habilitada, haga clic en el icono de la papelera () junto a la 404 página 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
Habilitar el 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.
Agregue el código de su aplicación creada
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", }
Implementar la configuración de alojamiento 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