Este tutorial explica cómo podemos alojar un sitio web estático en Alibaba Cloud Object Storage Service (OSS). No importa si tenemos un sitio web estático existente que deseamos alojar en OSS, o si estamos empezando desde cero, este tutorial nos puede ayudar a aprender cómo alojar sitios web en Alibaba Cloud OSS.
Requisitos previos
Si no tenemos un nombre de dominio registrado, necesitaremos seleccionar un registrador para registrar uno antes de comenzar este tutorial. Convenientemente, Alibaba Cloud proporciona un servicio de registro de nombres de dominio. Para obtener información sobre este servicio, debemos consultar el servicio de dominios de Alibaba Cloud. Este tutorial asume que nosotros hemos elegido este servicio. La elección de Alibaba Cloud nos ayudará a proporcionar una mejor integración con los otros servicios en la nube de Alibaba Cloud. Tengamos en cuenta que, por razones de conveniencia, en este tutorial, utilizaremos como ejemplo el nombre de dominio. Naturalmente, nosotros queremos reemplazar este nombre de dominio con el nombre de dominio que hemos registrado.examplewebsite.com
A continuación, antes de que comencemos con este tutorial, también tenemos que empezar a utilizar Alibaba Cloud Object Storage Service (OSS). Utilizaremos este servicio para crear buckets, subir una página web de ejemplo, configurar los permisos para que otros puedan ver el contenido, y luego configurar los buckets para el alojamiento del sitio web. En este ejemplo, como queremos permitir las solicitudes para y, crearemos dos cubos. Sin embargo, sólo alojaremos el contenido en un cubo y configuraremos el otro cubo para redirigir las peticiones al cubo que aloja el contenido. http://examplewebsite.comhttp://www.examplewebsite.com
Si elegimos Alibaba Cloud como nuestro proveedor de Sistema de Nombres de Dominio (DNS), tendremos que configurar los ajustes pertinentes asociados con Alibaba Cloud DNS. En este ejemplo, añadiremos nuestro nombre de dominio a Alibaba Cloud DNS y definiremos un registro CNAME para que podamos utilizar nuestro nombre de dominio en lugar del nombre de dominio de acceso asignado por OSS para acceder a nuestros cubos de OSS. En este ejemplo, utilizaremos Alibaba Cloud DNS. De hecho, nos recomiendan que utilicemos Alibaba Cloud DNS. Sin embargo, podemos utilizar varios registradores para definir un registro CNAME que apunte a un bucket de OSS.
Paso 1: Registrar un dominio
Como recordatorio de nuevo, deberíamos haber registrado un dominio. Si ya tenemos un dominio registrado, podemos saltar este paso. Si nunca hemos alojado un sitio web, nuestro primer paso es registrar un dominio, como, por ejemplo. Podemos utilizar el servicio Alibaba Cloud Domain para registrar un dominio. Para obtener más información, consultemos estos documentos Comprar un nombre de dominio en la Guía de inicio rápido de Alibaba Cloud Domain.examplewebsite.com
Paso 2: Crear y configurar cubos y cargar datos
Creemos dos cubos para admitir solicitudes tanto del dominio raíz como del subdominio. Un bucket se utiliza para almacenar el contenido, y el otro bucket se utiliza para redirigir las peticiones al bucket que almacena el contenido.examplewebsite.comhttp://www.examplewebsite.com
Paso 2.1: Crear dos cubos
En este paso, iniciemos sesión en la consola de Alibaba Cloud OSS con las credenciales de nuestra cuenta de Alibaba Cloud y creemos los siguientes dos buckets:
originbucket: para almacenar el contenido
redirectbucket: para redirigir las peticiones a originbucket
1. Iniciemos sesión en la consola de OSS.
2. Creemos dos cubos, por ejemplo, originbucket y redirectbucket, uno para almacenar el contenido, y el otro para redirigir las peticiones al cubo que almacena el contenido. Establezcamos la lista de control de acceso (ACL) de los dos buckets en Lectura pública para que todo el mundo pueda ver el contenido de los buckets.
Para conocer los procedimientos detallados, consultemos Crear un bucket.
3. Anotemos el nombre del dominio de acceso del cubo de origen y del cubo de redirección. Los utilizaremos en pasos posteriores. Podemos encontrar el nombre del dominio de acceso de un cubo en la etiqueta Resumen del cubo, como se muestra en la siguiente figura.
4. Subamos los datos de nuestro sitio web a originbucket.
Alojaremos nuestro contenido en el bucket de dominio raíz originbucket, y redirigiremos las peticiones del bucket de subdominio redirectbucket al bucket de dominio raíz originbucket. Podemos almacenar el contenido en cualquiera de los dos buckets.
En este ejemplo, el contenido se aloja en el bucket originbucket. El contenido puede ser cualquier tipo de archivo, como archivos de texto, fotos y vídeos. Si aún no hemos creado un sitio web, entonces sólo necesitamos dos archivos para este ejemplo. Un archivo se utiliza como la página de inicio del sitio web, y el otro archivo se utiliza como la página de error del sitio web.
Por ejemplo, podemos crear un archivo llamado index.html utilizando el siguiente HTML y subirlo al cubo. En un paso posterior, se utiliza este nombre de archivo como la página de inicio por defecto de su sitio web.
<html>
<head>
<title>Hello OSS! </title>
<meta charset="utf-8">
</head>
<body>
<p>Now host on Alibaba Cloud OSS</p>
<p>This is the index page</p>
</body>
</html>Se crea otro archivo llamado error.html utilizando el siguiente HTML y se sube al cubo. Este archivo se utiliza como la página de error 404 de un sitio web. En un paso posterior, se utiliza este nombre de archivo como la página 404 por defecto para su sitio web.
<html>
<head>
<title>Hello OSS! </title>
<meta charset="utf-8">
</head>
<body>
<p>This is the 404 error page</p>
</body>
</html>Paso 2.2: Configurar cubos para el alojamiento de sitios web
Cuando configuremos un cubo para el alojamiento de sitios web, podremos acceder al sitio web utilizando el nombre de dominio de acceso asignado por OSS.
En este paso, se configura originbucket como un sitio web.
- iniciemos sesión en la consola de OSS.
- En la lista de nombres de cubos, seleccionemos originbucket.
- Hagamos clic en la pestaña Configuración básica y busquemos el área Página estática.
- Hagamos clic en Editar y a continuación, introduzcamos la siguiente información:
- Página de inicio predeterminada: La página índice (equivalente a la del sitio web). Sólo se pueden utilizar los archivos HTML que se hayan almacenado en el bucket. Para este ejemplo, introduzcamos.index.htmlindex.html
- Página 404 por defecto: La página 404 por defecto que se devuelve cuando se accede a una ruta incorrecta. Sólo se pueden utilizar los archivos HTML y de imagen que se hayan almacenado en el cubo. Si este campo se deja vacío, la página 404 por defecto se desactiva. Para este ejemplo, introduzcamos error.html.
5.Hagamos clic en Guardar.
Paso 2.3: Configurar la página de índice para la redirección
Ahora que hemos configurado la página de inicio y la página de error por defecto de originbucket, también debemos configurar la página de inicio por defecto de redirectbucket.
Para configurar la página de índice para la redirección, sigamos estos pasos:
- Iniciemos sesión en la consola de OSS.
- En la lista de nombres de cubos, seleccionemos redirectbucket.
- Hagamos clic en la pestaña Configuración básica y busquemos el área Página estática.
- Hagamos clic en Editar y a continuación, introduzcamos index.html en el cuadro de texto Página de inicio predeterminada.
- Hagamos clic en Guardar.
Paso 3: Asocie su nombre de dominio a sus cubos de OSS
Ahora que tenemos nuestro dominio raíz y nuestro bucket de origen de OSS, tendremos que asociar nuestro dominio con nuestros buckets de OSS para que podamos acceder a los buckets de OSS utilizando nuestro propio nombre de dominio en lugar del nombre de dominio asignado por OSS. examplewebsite.com
En este ejemplo, antes de que podamos asociar nuestro dominio con nuestro bucket de origen de OSS, tendremos que utilizar primero el nombre de dominio asignado por OSS para acceder a nuestro bucket de origen. Después de asociar nuestro dominio examplewebsite.com, podemos utilizar este examplewebsite.com para acceder a nuestro bucket OSS. examplewebsite.comoriginbucket.oss-cn-beijing.aliyuncs.com
Del mismo modo, también debemos asociar nuestro subdominio con nuestro cubo de OSS redirectbucket, de modo que podemos utilizar en lugar del nombre de dominio asignado por OSS originbucket.oss-cn-beijing.aliyuncs.com para acceder a nuestro cubo de OSS. www.examplewebsite.comwww.examplewebsite.com
Para asociar nuestro dominio raíz con nuestro cubo OSS originbucket, sigamos estos pasos:examplewebsite.com
- Iniciemos sesión en la consola de OSS.
- En la lista de nombres de cubos, seleccionemos originbucket.
- Hagamos clic en la pestaña Nombres de dominio.
- Hagamos clic en Vincular dominio de usuario para abrir el cuadro de diálogo Vincular dominio de usuario.
- En el cuadro de texto Dominio de usuario, introduzcamos el dominio raíz examplewebsite.com.
- Definamos un registro CNAME para originbucket.
1. Si nuestro nombre de dominio se ha resuelto en nuestra cuenta de Alibaba Cloud, podemos abrir el interruptor Añadir registro CNAME automáticamente. A continuación, hagamos clic en Enviar.
2. Si nuestro nombre de dominio no se ha resuelto bajo nuestra cuenta principal de Alibaba Cloud, el interruptor Añadir registro CNAME automáticamente está desactivado. Sigamos estos pasos para añadir un registro CNAME manualmente y, a continuación, hagamos clic en Enviar.
- Añadamos nuestro nombre de dominio en Alibaba Cloud DNS.
Si nuestro nombre de dominio está registrado en Alibaba Cloud, se añade automáticamente a la lista de Alibaba Cloud DNS. Podemos omitir este paso.
2. En la consola de Alibaba Cloud DNS, busquemos nuestro nombre de dominio.
3. Hagamos clic en el nombre de dominio o en el enlace Configurar.
4. Hagamos clic en Añadir Registro.
5. En el cuadro de diálogo Añadir registro, seleccionemos CNAME en el cuadro desplegable Tipo, e introduzcamos el nombre de dominio OSS del cubo en el cuadro de texto Valor. En este ejemplo, introduzcamos originbucket.oss-cn-beijing.aliyuncs.com.
6. Hagamos clic en Confirmar.
- Sigamos los pasos anteriores para vincular nuestro subdominio a nuestro cubo OSS redirectbucket. www.examplewebsite.com
Paso 4: Configurar la redirección de su sitio web
Ahora que hemos configurado nuestro cubo para el alojamiento de sitios web y hemos asociado nuestro dominio personalizado con nuestro cubo OSS, configuremos el redirectbucket para redirigir todas las solicitudes a. http://www.examplewebsite.comhttp://examplewebsite.com
Para configurar la redirección de nuestro sitio web, sigamos estos pasos:
- Accedamos a la consola de OSS.
- En la lista de nombres de cubos, seleccionemos redirectbucket.
- Hagamos clic en la pestaña de Configuración Básica y busquemos el área de Back-to-Origin.
- Hagamos clic en Editar y, a continuación, en Crear regla.
- Creemos la regla de redirección 404 como se indica a continuación:
1. En el área Tipo de destino, seleccionemos Redirección.
2. En el área de Origen de vuelta cuando, establezcamos el Código de estado HTTP como 404.
3. En el área Back-to-Origin URL, seleccionemos Add a prefix or suffix, introduzcamos su nombre de dominio del originbucket. En este ejemplo, escribimos examplewebsite.com.
4. Hagamos clic en Aceptar.
Paso 5: (Opcional) Acelerar su sitio web con Alibaba Cloud CDN
Podemos utilizar Alibaba Cloud Content Delivery Network (CDN) para mejorar el rendimiento de nuestro sitio web. La CDN hace que los archivos de nuestro sitio web (como HTML, imágenes y vídeo) estén disponibles desde centros de datos de todo el mundo. Estos se llaman nodos de borde. Cuando un visitante solicita un archivo de nuestro sitio web, Alibaba Cloud CDN redirige automáticamente la solicitud a una copia del archivo en el nodo de borde más cercano. Esto hace que los tiempos de descarga sean más rápidos que si el visitante hubiera solicitado el contenido desde un centro de datos más lejano.
Alibaba Cloud CDN almacena en caché el contenido en los nodos de borde durante un período de tiempo que nosotros especifiquemos. Si un visitante solicita un contenido que ha sido almacenado en caché durante más tiempo que la fecha de caducidad, la CDN comprueba el servidor de origen para ver si existe una versión posterior del contenido. Si hay una versión posterior disponible, la CDN copia la nueva versión en el nodo de borde. Los cambios que se realizan en el contenido original se replican en los nodos de borde a medida que los visitantes solicitan el contenido. Sin embargo, antes de la fecha de caducidad, el contenido sigue en la versión anterior. Nos recomiendan que abramos el interruptor Auto Refresh CDN Cache, para que los cambios que realice en el contenido original se actualicen automáticamente en la caché CDN en tiempo real.
Para acelerar originbucket con CDN, sigamos estos pasos:
- Añadamos un dominio CDN en la consola CDN. Para ver los procedimientos detallados, consultemos el paso 2. Añadamos un dominio CDN en el inicio rápido de CDN.
- Definamos un registro CNAME en la consola de DNS de Alibaba Cloud. Para procedimientos detallados, consultemos Configurar Alibaba Cloud DNS.
- Abramos el interruptor Actualizar automáticamente la caché de la CDN en la consola de OSS.
- Iniciemos sesión en la consola de OSS.
- En la lista de nombres de cubos, seleccionemos originbucket.
- Hagamos clic en la pestaña Nombres de dominio.
- Abramos el interruptor Actualizar automáticamente la caché de la CDN.
4. Sigamos los pasos anteriores para acelerar redirectbucket con CDN.
Paso 6: Probar el sitio web
Para verificar que el sitio web funciona correctamente, en nuestro navegador, probemos las siguientes URLs:
| URL | Resultado |
| http://examplewebsite.com | Muestra el documento de índice en el contenedor de origen. |
| La dirección URL de un archivo que no existe en el originbucket, por ejemplo, http://examplewebsite.com/abc | Muestra el documento de error en el originbucket. |
| http://www.examplewebsite.com | Redirige la solicitud a .http://examplewebsite.com |
| http://www.examplewebsite.com/abc | Redirige la solicitud a .http://examplewebsite.com/abc |
Nota: En algunos casos, es posible que tengamos que borrar la caché de nuestro navegador web para ver el comportamiento esperado.
Paso 7: Limpieza
Si creamos nuestro sitio web estático como un ejercicio de aprendizaje solamente, recordemos eliminar los recursos de Alibaba Cloud que asignamos para evitar cargos innecesarios en nuestra cuenta. Después de eliminar nuestros recursos de Alibaba Cloud, nuestro sitio web ya no estará disponible.
Para limpiarlo, sigamos estos pasos:
- Desactivemos y luego eliminemos el nombre de dominio en la consola de Alibaba Cloud CDN.
- Eliminemos los registros CNAME en la consola DNS de Alibaba Cloud.
- Eliminemos los archivos y cubos OSS en la consola OSS de Alibaba Cloud.
Articulo de referencia: