Configuración de OCI Object Storage y Oracle API Gateway para el alojamiento de sitios web estáticos

Introducción

Si tiene una aplicación web que desea alojar en Oracle Cloud Infrastructure (OCI) y desea configurar el alojamiento de sitios web estáticos, en este tutorial, le mostraremos cómo configurar el alojamiento estático de una aplicación web JavaScript compilada con antelación (AOT) enriquecida mediante OCI Object Storage y Oracle API Gateway. El mismo enfoque se puede aplicar a cualquier escenario en el que desee servir un archivo estático a través de HTTP, ya sea para una aplicación más sencilla o páginas web estáticas, y proporcionar una experiencia en línea fiable a sus usuarios en la plataforma OCI, todo a un costo menor.

Objetivos

Descubra cómo aprovechar OCI Object Storage y Oracle API Gateway para alojar sitios web estáticos con el fin de desplegar y gestionar de manera eficiente contenido web en Oracle Cloud Infrastructure.

Requisitos

Tarea 1: Creación de un cubo de Oracle Object Storage

Empecemos por crear un nuevo cubo en OCI Object Storage. Este cubo se utilizará para alojar su sitio web estático.

Bucket de almacenamiento de objetos

Tarea 2: Cargue los archivos de distribución en el cubo

Cargue los archivos de distribución de la aplicación en el cubo creado en la tarea anterior. Los archivos de distribución de la aplicación normalmente se encuentran en la carpeta /dist del directorio de la aplicación y son la salida de la compilación del paquete web.

Archivos de distribución

Consejo: si desea utilizar la oci-cli para cargar los archivos, asegúrese de especificar el parámetro --content-type auto para asegurarse de que el tipo de contenido se define correctamente.

Tarea 3: Creación de solicitud autenticada previamente

Para permitir que Oracle API Gateway sirva los archivos de distribución a través de Internet, debe crear una solicitud autenticada previamente PAR para el cubo de almacenamiento de objetos donde se almacenan los archivos de distribución.

Lo utilizaremos al configurar el gateway de API.

Tarea 4: Creación de Oracle API Gateway

El servicio Oracle API Gateway le permite publicar API con puntos finales privados a los que se puede acceder desde la red y que se pueden exponer con direcciones IP públicas si quiere que acepten tráfico de Internet. Los puntos finales soportan las validaciones de API, las transformaciones de solicitud y respuesta, CORS, la autenticación y autorización, y la limitación de solicitudes. Para obtener más información, consulte Visión general de Oracle API Gateway.

  1. Vaya a Menú de OCI, Servicios para desarrolladores, Gateway de API y haga clic en Crear.

Nota: Necesitará una red virtual en la nube para desplegar este Oracle API Gateway. Cree una VCN si aún no se ha creado una.

Oracle API Gateway

Tarea 5: Configuración del despliegue de Oracle API Gateway

Una vez que Oracle API Gateway se haya creado correctamente, vaya a Despliegues y cree un nuevo despliegue.

  1. Seleccione Crear desde cero y defina el prefijo de ruta en "/". Esta será la ruta base de la URL.

    Despliegue de gateway

  2. Configure TLS, CORS, etc. aquí o haga clic en Siguiente para pasar al siguiente paso.

  3. Seleccione Sin autenticación y haga clic en Siguiente. No necesitamos agregar ninguna autenticación para nuestro sitio web estático.

    Autenticación de despliegue

Tarea 6: Agregar rutas

En el asistente de despliegue de API, agregue rutas que amplíen la ruta base de nuestros despliegues.

  1. Introduzca /{req*} en el campo de ruta.

    Ruta de despliegue

  2. Seleccione GET en la lista desplegable Methods.

  3. Seleccione Editar varios backends agregados.

    Despliegue de varios backends

  4. Seleccione Ruta en el campo de selector.

    Ruta de despliegue

  5. Haga clic en Definir backend.

  6. Cree una regla por defecto, introduzca Nombre como valor por defecto, Tipo de coincidencia como Cualquiera de y seleccione la casilla de control Convertir en valor por defecto, seleccione backend como HTTP e introduzca la URL de almacenamiento de objetos para la página index.html en el campo URL y haga clic en Crear.

    definición de backend

  7. Cree una regla de archivo js, introduzca Nombre como js-rule, Tipo de coincidencia como Comodín y *.js como expresión comodín, seleccione backend como HTTP e introduzca la URL del cubo de almacenamiento de objetos seguida de la página ${request.path[req]} en el campo URL y haga clic en Crear. La URL tendrá un aspecto similar a este

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. Haga clic en Crear.

    definición de backend

  9. Cree reglas similares para los archivos css, html, txt y json según sea necesario.

    backend definir todo

  10. Haga clic en Siguiente, complete la creación de Oracle API Gateway y espere a que se actualice.

Tarea 7: probar

Recupere la URL de despliegue e introdúzcala en el explorador web y debería mostrar la aplicación.

Notas:

  1. Si no ve que la aplicación se ha cargado, compruebe si la lista de seguridad o el grupo de seguridad de red de la VCN permiten el tráfico a Oracle API Gateway.

  2. No olvide agregar todos los diferentes tipos de archivo que tiene su aplicación en la definición de backend.

  3. Solo se pueden configurar aplicaciones compiladas AOT (Ahead of Time) y sitios web estáticos utilizando esta técnica. Asegúrese de que su aplicación está compilada en código Javascript nativo.

Acuses de recibo

Autor: Mayank Kakani (arquitecto de OCI Cloud)

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.