Implementación de archivos web estáticos

  • Artículo

Nota:

Azure Spring Apps es el nuevo nombre del servicio Azure Spring Cloud. Aunque el servicio tiene un nuevo nombre, verá el nombre antiguo en algunos lugares durante un tiempo mientras trabajamos para actualizar recursos, como capturas de pantalla, vídeos y diagramas.

Este artículo se aplica a:❌ Básico o Estándar ✔️ Enterprise

En este artículo se muestra cómo implementar los archivos estáticos en una instancia de plan de Azure Spring Apps Enterprise mediante el paquete de compilación de servidores web tanzu. Este enfoque es útil si tiene aplicaciones que son exclusivamente para contener archivos estáticos como HTML, CSS o aplicaciones front-end compiladas con el marco de JavaScript que prefiera. Puede implementar directamente estas aplicaciones con un servidor web configurado automáticamente (HTTPD y NGINX) para atender esos recursos.

Requisitos previos

Implementación de archivos estáticos

Nota:

Este artículo se centra en describir las configuraciones de implementación y solucionar problemas específicos de la implementación de archivos estáticos web. Para comprender los escenarios generales de compilación e implementación del plan Azure Springs Apps Enterprise, consulte la sección Build service on demand (Uso del servicio de compilación de Tanzu) y How to deploy polyglot apps (Uso del servicio de compilación de Tanzu) y How to deploy polyglot apps (Implementación de aplicaciones poliglot).

Puede implementar archivos estáticos en Azure Spring Apps mediante servidores web NGINX o HTTPD de las siguientes maneras:

  • Puede implementar archivos estáticos directamente. Azure Spring Apps configura automáticamente el servidor web especificado para servir los archivos estáticos.
  • Puede crear la aplicación front-end en el marco de JavaScript que prefiera y, a continuación, implementar la aplicación front-end dinámica desde el código fuente. Azure Spring Apps compila la aplicación en contenido estático y usa el servidor web configurado para atender los archivos estáticos.

También puede crear un archivo de configuración de servidor para personalizar el servidor web.

Ejemplos de implementación

Los ejemplos de la CLI de Azure de esta sección muestran la compilación e implementación de archivos estáticos para dos escenarios de registro de contenedor:

  • Registro de contenedor administrado de Azure Spring Apps.
  • Registro de contenedor administrado por el usuario.

Compilar e implementar archivos estáticos directamente

En este ejemplo se implementan archivos estáticos directamente mediante un archivo de configuración de servidor predeterminado generado automáticamente.

El siguiente comando implementa un archivo estático:

az spring app deploy
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --source-path <path-to-source-code> \
    --build-env BP_WEB_SERVER=nginx

Para obtener información sobre el uso de variables de entorno, consulte la sección Configurar un archivo de configuración de servidor generado automáticamente.

Compilación e implementación de la aplicación front-end como contenido estático

En este ejemplo se implementa una aplicación front-end dinámica desde el código fuente.

El comando siguiente implementa una aplicación:

az spring app deploy \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --source-path <path-to-source-code> \
    --build-env BP_WEB_SERVER=nginx BP_NODE_RUN_SCRIPTS=build BP_WEB_SERVER_ROOT=build

Compilación e implementación de archivos estáticos mediante un archivo de configuración personalizado

En este ejemplo se implementan archivos estáticos mediante un archivo de configuración de servidor personalizado.

El comando siguiente implementa una aplicación:

az spring app deploy \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --source-path <path-to-source-code>

Para obtener más información, consulte la sección Uso de un archivo de configuración de servidor personalizado de este artículo.

Código de ejemplo

Nota:

El código de ejemplo lo mantiene la comunidad de código abierto Paketo.

Los ejemplos de módulos de compilación de Paketo muestran casos de uso comunes para varios tipos de aplicación diferentes, incluidos los siguientes casos de uso:

  • Servir archivos estáticos con un archivo de configuración de servidor predeterminado mediante BP_WEB_SERVER para seleccionar HTTPD o NGINX.
  • Usar Node Administrador de paquetes para compilar una aplicación react en archivos estáticos que un servidor web puede servir. Siga estos pasos:
    1. Defina un script bajo la propiedad scripts del archivo package.json que compila los recursos estáticos listos para producción. Para React, es build.
    2. Averigüe dónde se almacenan los recursos estáticos después de que se ejecute el script de compilación. Para React, los recursos estáticos se almacenan en ./build de manera predeterminada.
    3. Establezca BP_NODE_RUN_SCRIPTS en el nombre del script de compilación.
    4. Establezca BP_WEB_SERVER_ROOT en el directorio de salida de compilación.
  • Proporcionar archivos estáticos con su propio archivo de configuración de servidor, mediante HTTPD o NGINX.

Configuración de un archivo de configuración de servidor generado automáticamente

Puede usar variables de entorno para modificar el archivo de configuración del servidor generado automáticamente. En la tabla siguiente se muestran las variables de entorno admitidas.

Variable de entorno Valor admitido Descripción
BP_WEB_SERVER nginx o httpd Especifica el tipo de servidor web, nginx para Nginx o httpd para el servidor HTTP de Apache. Necesario al usar el archivo de configuración del servidor generado automáticamente.
BP_WEB_SERVER_ROOT Una ruta de acceso de archivo absoluta o una ruta de acceso de archivo relativa a /workspace. Establece el directorio raíz de los archivos estáticos. El valor predeterminado es public.
BP_WEB_SERVER_ENABLE_PUSH_STATE true o false Habilita el enrutamiento de estado de inserción para la aplicación. Independientemente de la ruta solicitada, index.html siempre se sirve. Útil para aplicaciones web de página única.
BP_WEB_SERVER_FORCE_HTTPS true o false Aplica HTTPS para las conexiones de servidor redirigiendo todas las solicitudes para usar el protocolo HTTPS.

No se admiten las siguientes variables de entorno.

  • BP_LIVE_RELOAD_ENABLED
  • BP_NGINX_VERSION
  • BP_HTTPD_VERSION

Usar un archivo de configuración de servidor personalizado

Puede configurar el servidor web mediante un archivo de configuración de servidor personalizado. En la tabla siguiente se muestra la ruta de acceso del archivo de configuración:

Servidor web Ruta de acceso del archivo de configuración predeterminada Personalización de la ruta de acceso del archivo de configuración del servidor
nginx nginx.conf en la ruta de acceso raíz del código fuente. Use la variable de BP_NGINX_CONF_LOCATION entorno para especificar el nombre del archivo de configuración. Coloque el archivo en la ruta de acceso raíz del código fuente.
httpd httpd.conf en la ruta de acceso raíz del código fuente. No admitida.

El archivo de configuración debe cumplir las restricciones descritas en la tabla siguiente.

Configuración Descripción Configuración de Nginx Configuración de Httpd
Puerto de escucha El servidor web debe escuchar en el puerto 8080. El servicio comprueba la preparación del puerto en TCP y si está en ejecución. Debe usar la variable PORT con plantilla en el archivo de configuración. El número de puerto adecuado se inserta cuando se inicia el servidor web. listen {{PORT}} Listen "${PORT}"
Ruta de acceso al registro Ruta de acceso del registro de configuración a la consola. access_log /dev/stdout, error_log stderr ErrorLog /proc/self/fd/2
Ruta de acceso de archivo con permiso de escritura Al servidor web se le concede permiso de escritura al directorio /tmp. La configuración de la ruta de acceso completa requiere el permiso de escritura en el directorio /tmp. Por ejemplo: client_body_temp_path /tmp/client_body_temp
Tamaño máximo aceptado del cuerpo de la solicitud de cliente El servidor web está detrás de la puerta de enlace. El tamaño máximo de cuerpo aceptado de la solicitud de cliente se establece en 500 m en la puerta de enlace y el valor del servidor web debe ser inferior a 500 m. client_max_body_size debe ser inferior a 500 m. LimitRequestBody debe ser inferior a 500 m.

Enlaces de módulos de compilación

La implementación de archivos estáticos en el plan Enterprise de Azure Spring Apps admite el enlace buildpack de Dynatrace. No se admite el enlace de módulos de compilación htpasswd.

Para más información, consulte Cómo configurar la integración de APM y los certificados de CA.

Errores comunes de compilación e implementación

La implementación de archivos estáticos en una instancia de Azure Spring Apps Enterprise puede generar los siguientes errores de compilación comunes:

  • ERROR: No buildpack groups passed detection.
  • ERROR: Please check that you're running against the correct path.
  • ERROR: failed to detect: no buildpacks participating

La causa principal de estos errores es que no se especifica el tipo de servidor web. Para resolver estos errores, establezca la variable BP_WEB_SERVER de entorno en nginx o httpd.

En la tabla siguiente se describen los errores de implementación comunes al implementar archivos estáticos en Azure Spring Apps Enterprise.

Mensaje de error Causa principal Solución
112404: Exit code 0: purposely stopped, please refer to https://aka.ms/exitcode No se pudo iniciar el servidor web. Valide el archivo de configuración del servidor para ver si hay un error de configuración. A continuación, compruebe si el archivo de configuración se ajusta a las restricciones descritas en la sección Usar un archivo de configuración de servidor personalizado.
mkdir() "/var/client_body_temp" failed (13: Permission denied) El servidor web no tiene permiso de escritura en la ruta de acceso especificada. Configure la ruta de acceso en el directorio /tmp; por ejemplo: /tmp/client_body_temp.

Pasos siguientes