Object Storage Service:Static Website Hosting

Paso 1: Configurar el hosting del sitio web estático

Configure una página principal predeterminada y una página de error para establecer las reglas básicas de acceso.

1. Vaya a la página Buckets, haga clic en el nombre del bucket de destino y luego, en el panel de navegación izquierdo, haga clic en Data Management > Static Page.

2. Haga clic en Settings y configure los siguientes parámetros:

   • Default Homepage: Establézcalo en index.html.

   • Subfolder Homepage: Elija si desea habilitar una página principal independiente para subcarpetas según la estructura de su sitio web.

     • Disabled (Default): Adecuado para sitios web simples que no requieren páginas principales separadas para subcarpetas. Con esta opción, cualquier ruta URL que termine con una barra diagonal (/) devuelve la página principal predeterminada del directorio raíz.

     • Enabled: Recomendado para sitios web complejos con varias secciones de contenido independientes, como /blog/ o /docs/, donde cada sección tiene su propia página principal. Cuando se habilita, también debe configurar la Subfolder 404 Rule para definir cómo responde el sistema cuando un usuario solicita un archivo que no existe:

       • Redirect (Default): Redirige a la URL del directorio. Si un archivo solicitado no existe, el sistema busca una página principal en el directorio correspondiente. Si existe, el sistema devuelve una respuesta de redirección 302 y la barra de direcciones del navegador se actualiza a la ruta del directorio. Por ejemplo, .../subdir cambia a .../subdir/.

       • Index: Devuelve el contenido de la página principal directamente. Similar a Redirect, pero si se encuentra una página principal, el sistema devuelve su contenido con un código de estado 200. La barra de direcciones del navegador permanece sin cambios.

       • NoSuchKey: Devuelve un error 404 directamente. Esta es la regla más estricta. Si un archivo solicitado no existe, el sistema devuelve un error 404, independientemente de si existe una página principal en el directorio correspondiente.

         Regla 404 de subcarpeta

         Cuando la función de página principal de subcarpeta está habilitada, esta regla define la respuesta del sistema ante solicitudes de un objeto inexistente, lo que garantiza que las rutas de su sitio web se gestionen correctamente.

         Mecanismo central: Solicitudes de objetos frente a directorios

         El comportamiento de la regla depende de la estructura de la URL, específicamente de si termina con una barra diagonal (/):

         • Solicitud de objeto: La URL no termina con /, como .../subdir. El sistema interpreta esto como una solicitud de un objeto llamado subdir.

         • Solicitud de directorio: La URL termina con /, como .../subdir/. El sistema interpreta esto como una solicitud de la página principal predeterminada en el directorio subdir.

         La regla 404 de subcarpeta se activa solo cuando falla una solicitud de objeto (es decir, el objeto no existe).

         Comportamiento de la regla

         La siguiente tabla explica el comportamiento de cada regla cuando se realiza una solicitud para un objeto que no existe, como http://example.com/subdir.

         Regla	Comportamiento principal	Flujo de procesamiento	Resultado final (depende de si subdir/index.html existe)
         Redirect (Default)	Redirige a la URL del directorio: El sistema busca una página principal en el directorio correspondiente. Si la encuentra, devuelve una respuesta de redirección 302.	No se encuentra el objeto subdir, lo que activa la regla. El sistema comprueba si existe subdir/index.html. Si existe, se devuelve una respuesta 302 Found con el encabezado Location apuntando a .../subdir/. Si no existe, se devuelve una respuesta 404 Not Found.	Si existe: Se muestra el contenido de la página principal y la barra de direcciones del navegador se actualiza a .../subdir/. Si no existe: Se muestra la página de error 404.
         Index	Devuelve el contenido de la página principal directamente: El sistema busca una página principal en el directorio correspondiente. Si la encuentra, devuelve el contenido con un código de estado 200.	No se encuentra el objeto subdir, lo que activa la regla. El sistema comprueba si existe subdir/index.html. Si existe, se devuelven el contenido del archivo y un estado 200 OK. Si no existe, se devuelve una respuesta 404 Not Found.	Si existe: Se muestra el contenido de la página principal y la barra de direcciones del navegador permanece como .../subdir. Si no existe: Se muestra la página de error 404.
         NoSuchKey	Devuelve un error 404 directamente: El sistema no realiza ninguna comprobación adicional de directorio o página principal.	No se encuentra el objeto subdir, lo que activa la regla. Se devuelve inmediatamente una respuesta 404 Not Found.	Independientemente de si existe: Siempre devuelve una página de error 404.

   • Default 404 Page: Establézcalo en error.html.

   • Error Page Status Code: Seleccione 404.

3. Haga clic en Save.

Paso 2: Cargar archivos del sitio web

Cargue sus archivos HTML preparados al bucket para proporcionar contenido a su sitio web.

1. Descargue y extraiga el archivo de muestra html.zip, o utilice sus propios archivos de proyecto.

2. En el panel de navegación izquierdo, haga clic en Object Management > Objects.

3. Arrastre los archivos de muestra o sus archivos de proyecto existentes a la ventana de carga. Una vez que los archivos se agreguen a la lista, haga clic en Upload Object.

   Nota

   Al actualizar el contenido del sitio web, cargar un objeto con el mismo nombre sobrescribe directamente el objeto existente. No es necesario eliminar primero el objeto anterior. Una sobrescritura reemplaza todo el objeto y el contenido previo ya no se conserva. Si el control de versiones está habilitado para el bucket, la sobrescritura conserva la versión anterior, que puede utilizar para revertir cambios. Si el control de versiones no está habilitado, la sobrescritura no se puede deshacer.

Paso 3: Establecer permisos del bucket

Configure permisos de lectura pública para que el contenido de su sitio web sea accesible para los usuarios de Internet.

1. La función Block Public Access se habilita de forma predeterminada al crear un bucket de OSS. Esta función le impide establecer la lista de control de acceso (ACL) del bucket como public-read o public-read-write. Debe deshabilitar esta función primero.

   1. En el panel de navegación izquierdo, haga clic en Permission Control > Block Public Access.

   2. Haga clic en el interruptor Block Public Access. En el cuadro de diálogo que aparece, introduzca I confirm that I want to disable Block Public Access y luego haga clic en OK.

2. Establezca los permisos de acceso del bucket como public-read.

   1. Vaya a la pestaña Access Control List y haga clic en Set.

   2. Establezca Bucket ACL en Public Read. En el cuadro de diálogo que aparece, haga clic en Continue.

   3. Haga clic en Save.

Paso 4: Verificar la configuración del sitio web

Pruebe su sitio web para confirmar que la función de hosting de sitios web estáticos funciona correctamente.

• Verificar el acceso a la página principal: En un navegador, vaya a su nombre de dominio personalizado, por ejemplo, http://example.com, para ver el resultado.

  Si la página muestra la página principal predeterminada para el hosting de sitios web estáticos de OSS, titulada Welcome to OSS con el subtítulo This is a static homepage, y tiene tres botones (Product Details, Product Console y Product Documentation) en la parte inferior, su configuración de hosting de sitio web estático funciona correctamente.

• Verificar la página 404: En un navegador, intente acceder a un archivo que no exista, por ejemplo, http://example.com/missing-object.

  Si la página muestra el título Welcome to OSS y el mensaje This is a 404 page, su página de error 404 está configurada correctamente.

Paso 1: Configurar el hosting de SPA

Configure los parámetros de hosting para garantizar que el enrutamiento del lado del cliente funcione correctamente.

1. Vaya a la página Buckets, haga clic en el nombre del bucket de destino y luego, en el panel de navegación izquierdo, haga clic en Data Management > Static Page.

2. Haga clic en Settings y configure los siguientes parámetros:

   • Default Homepage: Establézcalo en index.html.

   • Subfolder Homepage: Seleccione Disabled. Con esta configuración, cualquier solicitud al dominio del sitio web estático o cualquier URL bajo ese dominio que termine con una barra diagonal (/) devuelve la página principal predeterminada del directorio raíz.

   • Default 404 Page: Establézcalo en index.html (configuración crítica: redirige todas las rutas al punto de entrada de la aplicación).

   • Error Page Status Code: Seleccione 200 (garantiza que las transiciones de ruta devuelvan el código de estado correcto).

3. Haga clic en Save.

Paso 2: Cargar archivos de la aplicación

Cargue sus archivos de SPA al bucket para completar el despliegue.

1. Descargue y extraiga la aplicación de muestra demo.zip, o utilice sus propios archivos de aplicación.

2. En el panel de navegación izquierdo, haga clic en Object Management > Objects.

3. Arrastre todos los archivos del directorio demo o sus propios archivos de aplicación a la ventana de carga. Una vez que todos los archivos se agreguen a la lista, haga clic en Upload Object.

Paso 3: Establecer permisos del bucket

Configure permisos de acceso público para que su SPA sea accesible para los usuarios.

1. Deshabilite Block Public Access para el bucket.

   1. En el panel de navegación izquierdo, haga clic en Permission Control > Block Public Access.

   2. Haga clic en el interruptor Block Public Access. En el cuadro de diálogo que aparece, introduzca I confirm that I want to disable Block Public Access y luego haga clic en OK.

2. Establezca los permisos de acceso del bucket como public-read.

   1. Vaya a la pestaña Access Control List y haga clic en Set.

   2. Establezca Bucket ACL en Public Read. En el cuadro de diálogo que aparece, haga clic en Continue.

   3. Haga clic en Save.

Paso 4: Verificar el despliegue de la aplicación

Pruebe su sitio web para confirmar que la SPA gestiona correctamente las transiciones de ruta.

• Verificar el acceso a la página principal: En un navegador, vaya a su nombre de dominio personalizado (por ejemplo, http://example.com) para acceder a la SPA. El resultado se muestra en la siguiente figura.

  

• Verificar el comportamiento 404: En un navegador, intente acceder a un archivo que no exista, por ejemplo, http://example.com/missing-object. La solicitud se redirige al punto de entrada de la aplicación y se devuelve un código de estado 200 OK.

Mejores prácticas

• Transporte seguro: Habilitar acceso HTTPS

  Los navegadores modernos muestran advertencias de "no seguro" para sitios web HTTP, y los motores de búsqueda posicionan mejor a los sitios HTTPS. Fuerce el acceso HTTPS para su nombre de dominio personalizado siguiendo la guía para access OSS over HTTPS. HTTPS utiliza TLS/SSL para cifrar los datos en tránsito, lo que previene el robo o la manipulación de datos.

• Optimización del rendimiento: Configurar aceleración CDN

  Si su sitio web estático atiende a una audiencia global o maneja tráfico de alta concurrencia, configure CDN acceleration para almacenar contenido en caché en nodos perimetrales de todo el mundo. Esto mejora la velocidad de acceso y reduce los costos de tráfico de OSS.

  Una vez habilitada la aceleración CDN, las páginas se sirven desde el contenido almacenado en caché en los nodos perimetrales. Después de sobrescribir un archivo, las solicitudes aún pueden devolver la versión anterior hasta que expire la caché. Por lo tanto, tras actualizar el contenido del sitio web, actualice la caché de CDN para los archivos o directorios modificados y verifique el sitio web solo después de que se complete la actualización. Esto evita que una página obsoleta se confunda con una versión fallida.

• Intercambio de recursos de origen cruzado (CORS): Configurar reglas CORS

  Las SPA suelen llamar a API de backend o acceder a recursos de terceros, lo cual puede verse restringido por la política del mismo origen del navegador. Configure CORS rules para especificar orígenes, métodos y encabezados permitidos, de modo que su aplicación pueda acceder a las API y recursos externos necesarios.

• Gestión de versiones: Implementar versiones y reversiones

  Habilite versioning de OSS e integrelo con herramientas de automatización como Jenkins para crear un flujo de trabajo CI/CD que permita versiones rápidas y reversiones de emergencia.

Mitigación de riesgos

• Prevención de robo de ancho de banda: Configurar protección contra hotlinking

  Otros sitios web que enlazan directamente a sus recursos estáticos aumentan los costos de tráfico y la carga del servidor. Configure Referer-based hotlink protection para crear una lista de permitidos de dominios autorizados y evitar el uso no autorizado del ancho de banda.

• Monitoreo de acceso: Habilitar registros de acceso

  Habilite real-time log query para registrar todas las solicitudes de acceso. Esto le ayuda a identificar patrones de acceso inusuales, analizar el comportamiento de los usuarios y optimizar el rendimiento del sitio web.

Error 404 al actualizar página en SPA

En una aplicación de página única, todas las rutas son gestionadas por JavaScript del lado del cliente. Cuando accede directamente o actualiza una ruta que no es la raíz, el servidor no puede encontrar un archivo físico correspondiente. Para resolver esto, establezca la Default 404 Page en index.html y el Error Page Status Code en 200. Esta configuración redirige todas las rutas "no encontradas" al punto de entrada de la aplicación, lo que permite que el router del lado del cliente las gestione correctamente.

Deshabilitar el hosting de sitio web estático

1. Vaya a la página Buckets, haga clic en el nombre del bucket de destino y luego, en el panel de navegación izquierdo, haga clic en Data Management > Static Page.

2. Haga clic en Settings, borre las configuraciones de Default Homepage y Default 404 Page, y luego haga clic en Save para deshabilitar la función de hosting de sitio web estático.

Soporte para contenido dinámico

El hosting de sitios web estáticos admite únicamente archivos estáticos como HTML, CSS y JavaScript. No son compatibles lenguajes del lado del servidor como PHP, Python o Java. Para funcionalidad dinámica, utilice renderizado del lado del cliente con un framework de frontend o llame a API de backend mediante servicios serverless como Function Compute.