Guía definitiva para alojar panorámicas de gigapíxeles
Este artículo es simplemente sobre hosting. Para obtener información sobre el arte de crear panoramas y fotografía de 360°, consulte estos artículos:
La guía definitiva de fotografía panorámica,
Base de nivelación para fotografía panorámica,
La mejor guía de fotografía 360
El mejor software para fotografía 360
Configuración de un servidor web en Amazon S3 y uso de Cloudfront para almacenar contenido en caché
Alojar panoramas Gigapixel ha sido un problema para los fotógrafos desde siempre. Puedes usar una plataforma en línea como 360Ciudades o Kuula para alojar recorridos virtuales, pero usted depende completamente de la plataforma para mantenerse en el negocio y la mayoría no alojará sus panoramas. El complemento de WordPress Panopress no se ha actualizado durante 6 años, pero podría usar Zoomificar para habilitar panoramas autohospedados. Pero no admite imágenes de 350°. ¡No es la situación más satisfactoria!
Probé una variedad de hosts en línea antes de frustrarme con las limitaciones. Eventualmente, decidí hacerlo yo mismo y documenté todo el proceso para que sea más fácil de abordar para personas no técnicas.
decidí usar Amazon S3 para alojar las imágenes y frente a la nube para almacenarlos en caché.
Configurar un sitio web con Amazon S3 y CloudFront no es para todos, llegué a esto con un requisito específico para alojar medios muy grandes en forma de fotografías panorámicas divididas en miles de "mosaicos" para una transferencia y renderización rápidas. No estoy usando S3 para alojar mi sitio web, simplemente para alojar imágenes, pero es perfectamente posible alojar un sitio web y usar CloudFront como una solución CDN para entregar contenido rápidamente a clientes remotos.
Cuando utiliza Cloudfront como proxy, su contenido se sirve desde el servidor de CloudFront más cercano a la ubicación de la solicitud. Pero primero debe configurar su sitio en Amazon S3. Este tutorial explica cómo configurar Amazon S3 para alojar un sitio web. cómo configurar CloudFront como un proxy de distribución de contenido para el sitio web y cómo configurar un certificado SSL para ese contenido.
Lo que vas a aprender:
Por qué usar Amazon S3 y CloudFront
Facilidad de uso
Lo siento, pero eso pretendía ser irónico. ¡El alojamiento de WordPress es mucho más fácil en casi cualquier otra plataforma!
Costo
La mayoría de las empresas de alojamiento web cobran una tarifa regular basada en el espacio o los inodos (la cantidad de objetos servidos). Amazon cobra por los datos transferidos y eso los hace más baratos que la mayoría de las empresas de alojamiento web para ciertos tipos de contenido, especialmente panoramas donde el volumen es alto y la cantidad de objetos servidos es de miles para un solo panorama.
¿Qué está pasando en inglés simple?
Si describimos un sitio web en los términos más simples posibles, consiste en un conjunto de páginas, a menudo enlazadas entre sí, que contienen texto e imágenes.
El sitio web más simple posible en código, se ve así:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<p>¡Bienvenido a mi fantástico nuevo sitio web!</p>
</body>
</html>Este es el html sin procesar que se crea a mano o se genera mediante un sistema de administración de contenido como wordpress, servido por un servidor web y convertido por el navegador en algo más aceptable para el ojo humano.
Todos los sitios web funcionan así. El servidor sirve código con formato html, el navegador interpreta ese código y lo presenta como una página visual. Los panoramas funcionan exactamente de la misma manera, la imagen original se divide en mosaicos y se "envuelve" en un marco HTML 5 que es, a todos los efectos, un sitio web.
Cuando instala código en Amazon S3, Amazon proporciona el servidor web y sirve ese contenido en respuesta a una solicitud de un navegador. El nombre de dominio (dominio legible por humanos, como mygreatcompany.com) se traduce en una referencia a su espacio en el servidor de Amazon en su registro DNS.
Si tiene un sitio web complejo con mucho contenido que leen personas de todo el mundo, tiene sentido usar una red de distribución de contenido (CDN) como proxy para entregar ese contenido desde un nodo cercano al origen de la solicitud. . Si tengo una audiencia en San Francisco, por ejemplo, y estoy en España, mis páginas web tardarán más en llegar a San Francisco desde Europa que desde un servidor en los Estados Unidos.
Usaremos Amazon Cloudfront como un proxy para servir nuestro contenido sin que la solicitud llegue hasta nuestra instalación de S3. Cloudfront actualiza periódicamente su caché desde la instalación de S3 para mantener el contenido actualizado.
Amazon S3
Terminología
Balde – Este es tu espacio web. Puede crear varios cubos para diferentes propósitos, pero para crear un sitio web simple o servir un panorama, solo necesitamos uno.
Objeto – en el mundo de Amazon todo es un Objeto, incluido su cubo.
punto final – URL
El panel S3
La primera tarea es crear una cuenta con Amazon. No utilice su identificación de compras, cree una nueva específicamente con el fin de utilizar los servicios técnicos de Amazon.
Abre el Sitio web de Amazon S3 en tu navegador.
Haga clic en el botón Comenzar.
Crea una cuenta nueva. Hay varios pasos de prueba de identidad que deberá seguir, así que tenga a mano su teléfono móvil y un cliente de correo electrónico.
Una vez que haya creado su cuenta, inicie sesión en la consola. Asegúrese de seleccionar Usuario raíz.
Esta es la consola web. haga clic en S3 en la sección Visitados recientemente.
Haga clic en Crear depósito
Creación de un depósito para contenido
Esta página tiene varias configuraciones importantes que debe completar cuidadosamente.
- Configuración general
- Bloquear acceso público
- Control de versiones del cubo
- Cifrado predeterminado
- Ajustes avanzados
son los que hay que vigilar.
Nombre del depósito: use algo simple y reconocible. Piense en ello como un nombre de directorio. Elija una región de AWS que se adapte a su ubicación.
Desplazarse hacia abajo en la página, dejar ACL deshabilitado en Propiedad del objeto, Desactivar Bloquear acceso público y marque la advertencia "Desactivar bloquear todo el acceso público": desea que las personas vean el sitio web. Control de versiones de depósito permanece deshabilitado para nuestros propósitos al igual que Cifrado predeterminado.
En la configuración avanzada, verifique que el bloqueo de objetos esté deshabilitado
Ahora haga clic en Crear depósito
Accederás a una pantalla similar a la de arriba.
Ahora que tiene su cubo, podemos establecer permisos y llenarlo con contenido.
Configuración de permisos para alojamiento web
Notará en la imagen de arriba que dice "Los objetos pueden ser públicos" debajo de la columna de acceso. La configuración predeterminada es que no son públicos, por lo que debemos modificar esto.
Haga clic en el nombre de su cubo. Y elige "PAGpropiedades” en la siguiente pantalla.
Desplácese por esta página hasta el final y verá Alojamiento de sitios web estáticos - haga clic en Editar.
Verás este diálogo.
Permitir Alojamiento de sitio web estático y asegúrese de que Tipo de alojamiento esté configurado en Aloja un sitio web estático. Establezca el documento de índice en índice.html luego guarde sus cambios. Volverá a la página Propiedades del depósito y, si se desplaza hacia abajo, verá que el alojamiento de sitios web estáticos está habilitado y se le ha asignado un punto final
los Extremo del sitio web del segmento es la URL que identifica su cubo dentro del universo de Amazon.
El siguiente trabajo es establecer explícitamente su política de acceso. Haga clic en permisos el menú principal.
Vamos a proporcionar una política en la ventana Política de depósito.
Prensa "Editar” frente a la Política de depósitos. Necesitamos proporcionar una política que permita a cualquier miembro del público cargar cualquier objeto (página o imagen) que esté contenido en el cubo. Este es el código que necesitarás. No cambies la fecha, eso indica una versión para Amazon. La última línea debe cambiarse: debe coincidir con su propio ARN de depósito.
{ "Versión": "2012-10-17", "Declaración": [ { "Sid": "PublicReadGetObject", "Efecto": "Permitir", "Principal": "*", "Acción": [ "s3 :GetObject" ], "Recurso": [ "arn:aws:s3:::helterskeltertraining/*" ] } ] }El ARN del depósito se muestra en la pantalla de edición, justo encima de la ventana.
Guarde sus cambios. Si obtiene un error, lo más probable es que sea el nombre del ARN; esa línea debe coincidir exactamente con su propio ARN.
Cargar su sitio web
¡Ahora puedes cargar tu contenido en el depósito!
Usando las migas de pan en la parte superior de la pantalla, regrese a su cubo.
Clickea en el Subir botón.
Puede agregar archivos o carpetas aquí. Utilizo el área de arrastrar y soltar ya que solo tengo un archivo en este ejemplo. Tenga en cuenta que, aunque el nombre del archivo aparece en la lista, no se carga hasta que presiona el botón Cargar.
Ahora debería tener un sitio web o panorama, listo para ser atendido por AWS.
Pruebas
Para probar, regrese a la pantalla de propiedades, desplácese hacia abajo hasta el alojamiento del sitio web estático y haga clic en la URL; si todas las configuraciones son correctas, debería mostrarse en su navegador.
Actualización de su registro DNS
Probablemente no desee utilizar la URL con formato de Amazon si ya posee un dominio. Para usar su propio dominio, debe cambiar una configuración de DNS.
Hay dos tipos de configuración que indican puntos finales en su DNS. Estos son registros A y registros CNAME. El registro A apunta a una dirección IP. El registro CNAME se usa para proporcionar alias para el registro A y puede apuntar a un servidor diferente. ejemplos bien conocidos son mail.tudominio.com y ftp.tudominio.com.
Necesitamos configurar un subdominio llamado de la misma manera que su depósito y luego proporcionar la URL generada por Amazon como destino.
Así que crea un nuevo registro CNAME. Algunos hosts difieren en cómo se hace esto, si ingresa el nombre de su depósito como nombre, CNAME como tipo y su URL de Amazon como valor de registro, el sistema descartará el resto de su dominio en el campo Nombre. Este registro debería redirigir las solicitudes al subdominio a Amazon. Los cambios de DNS pueden tardar algún tiempo, según mi experiencia, entre un instante y un día, en filtrarse, por lo que es posible que esto no funcione de inmediato. Pruebe con su nueva URL, por ejemplo http://bucketname.yourdomain.com
Si es todo el sitio web que está alojando en Amazon, entonces necesita hacer una redirección.
frente a la nube
Cloudfront es la red de distribución de contenido de Amazon y si su sitio contiene una gran cantidad de contenido que es de interés para una audiencia global, entonces puede tener sentido usar la CDN para almacenar contenido en caché en varias ubicaciones más cercanas a su audiencia.
Ve a la Servicios en la parte superior izquierda de la pantalla de Amazon y elija Cloudfront en el menú desplegable. Si no está allí, simplemente escriba frente a la nube en el cuadro de búsqueda.
Recapitulación en inglés sencillo
En este punto, ha creado su sitio web en Amazon S3. Si su audiencia está geográficamente distante del alojamiento de su sitio (usted eligió la geografía del alojamiento al comienzo del proceso de S3), entonces puede beneficiarse del uso de una CDN.
Advertencia – si su tráfico es bajo, entonces un CDN puede causar un retraso porque el contenido guardado en el caché caducará entre las solicitudes de los usuarios. En ese caso, la CDN tiene que volver a S3 para recuperar el contenido, por lo que todo lo que ha logrado es agregar una segunda iteración en el proceso de solicitud/servicio.
Terminología
Distribución: una distribución representa su parte de la caché de CDN. Está asignado a su depósito de Amazon S3.
Creación de una distribución
En CloudFront, haga clic en el Crear una distribución de CloudFront botón.
Accederá a un formulario muy largo que recorreremos paso a paso en secciones.
los Dominio de origen se puede seleccionar en el menú desplegable de ese campo. Simplemente mueva el cursor al campo vacío y haga clic. No va a ser que los cubos que ha creado.
los Ruta de origen solo necesita completarse si tiene su contenido dentro de un subdirectorio del depósito. Por ejemplo, si su depósito contiene un solo archivo llamado index.html, deje este campo en blanco. Si contiene un directorio en el nivel superior, que contiene su index.html, ingrese el nombre del directorio aquí.
Ignorar Agregar encabezado personalizado y vete Habilitar escudo de origen desactivado.
La siguiente sección es Comportamiento de caché predeterminado.
Política de protocolo de visor debe establecerse en Redirigir HTTP a HTTPS.
Métodos HTTP permitidos debe ser OBTENER, CABEZA
Restringir el acceso del espectador debe establecerse en Sí si está seguro de que todos los espectadores deben pasar por CloudFront.
Desplácese hacia abajo para Ajustes
Escoge tu Clase de precio – esto debería ser intuitivo, el primero es el más caro.
Haga clic en Solicitar Certificado para obtener un nuevo certificado SSL.
Los nombres de dominio alternativos deben incluir todas las variantes que pueda necesitar proteger. Por ejemplo nombredecubo.sudominio.com, *.nombrededepósito.sudominio.com aseguraría cualquier subdirectorio creado bajo nombredecubo.sudominio.com
Objeto raíz predeterminado
Ingresar índice.html como el nombre del objeto raíz (para que los usuarios no tengan que incluirlo en la URL).
Configuración de un certificado SSL
La solicitud de un certificado SSL es sencilla. Para mayor claridad, este certificado cifra el tráfico entre el navegador y Cloudfront.
Elija certificado público y en la siguiente pantalla, validación de DNS.
Luego, el sistema le dará los datos que necesita para crear un nuevo registro CNAME; esto es simplemente para validar su propiedad del dominio y se verá muy oscuro. Cópielo y péguelo en su configuración de DNS tal como se presenta.
Una vez que se haya propagado el DNS, el sistema validará su certificado SSL. El mío tomó alrededor de 5 segundos, pero dependiendo de dónde esté configurado su DNS, puede demorar hasta un par de días.
Una vez emitido el certificado se puede publicar la Distribución. CloudFront le emitirá una nueva URL que termina en cloudfront.net esto debe reemplazar el valor S3 en su DNS existente.
Actualización de su registro DNS (nuevamente)
Vaya al registro CNAME que creó en la configuración de S3 y sustituya el valor de cloudfront.net por el valor de S3 en su subdominio. Esto tiene el efecto de señalar todas las solicitudes de nombredecubo.sudominio.com a Cloudfront en lugar de S3. Ya le ha dicho a CloudFront los detalles de su depósito, por lo que se apagará y llenará el caché y entregará su contenido desde allí en lugar de S3.
Configurar un sitio web con Amazon S3 y CloudFront es bastante sencillo una vez que conoce la terminología. Usamos un ejemplo trivial aquí, pero los pasos para implementar un sitio web más complejo o un panorama con un contenedor HTML 5 son idénticos.
¿Qué sucede si ya usa un CDN?
Si ya usa una CDN pero quiere usar Amazon S3 para alojar medios grandes, puede crear el registro CNAME en la configuración de DNS de su CDN. Recuerde que cuando configura una CDN con un servidor web convencional, normalmente cambia los servidores de nombres a los de la CDN, por lo que cambiar los registros DNS en el nivel de alojamiento no funcionará. En su lugar, lleve a cabo el mismo proceso a nivel de CDN.
Aquí hay un enlace a un panorama Me preparé para una serie grabando el Valle de Lecrín, al sur de Granada. Utilicé S3 y CloudFront exactamente como lo establecí aquí, el sitio web está alojado por separado de las panorámicas y uso Quic.cloud como CDN para el sitio web y CloudFront para servir las panorámicas. Por lo tanto, todas las modificaciones de DNS se realizaron en Quic.cloud. El archivo original para una sola panorámica pesa alrededor de 850 MB. Casi imposible servir utilizando servidores http convencionales.
Conclusión
Configurar un sitio web con Amazon S3 y CloudFront es ciertamente un trabajo para los técnicamente capacitados. No es ni remotamente adecuado para sitios web pequeños y fáciles de mantener. Sin embargo, funciona muy bien para el caso de uso de servir medios de gran tamaño, como panoramas de gigapíxeles.
Suscribir…
Lo mantendré informado con actualizaciones mensuales periódicas sobre talleres, cursos, guías y reseñas.
Apúntate aquí y consigue precios especiales en todos los cursos y photowalks de 2024
