Uso de Medios de AWS S3

En el capítulo anterior, creamos un bucket y lo configuramos según nuestras necesidades. Ahora, aprendamos cómo subir y usar archivos de medios en nuestro bucket.

Primero, necesitamos abrir la pestaña Objects y hacer clic en el botón Upload:

Se nos presentará un menú donde podemos seleccionar archivos o una carpeta que contenga archivos para subir. Actualmente, para nosotros, S3 opera de manera similar a Google Drive, por ejemplo.

Nota

Google Drive también es un servicio de almacenamiento en la nube, pero proporciona un conjunto de herramientas más pequeño para trabajar con datos. Por lo tanto, para programación, AWS S3 se usa mucho más comúnmente, y eso es exactamente lo que estamos haciendo.

Necesitas seleccionar cualquier imagen y subirla a la plataforma; en nuestro caso, será una imagen de una tortuga.

Después de subir, abrimos el archivo subido, y aparece la siguiente información:

Por cierto, así es como se ve nuestra tortuga:

¿Cómo usar esta imagen en nuestros proyectos?

Para usar este archivo, ya hemos configurado correctamente el bucket para que podamos acceder a él desde cualquier fuente.

Escribamos una pequeña página HTML con un espacio para esta foto.

Podemos insertar la foto usando un enlace en la etiqueta <img> en HTML.

El código para esta foto se verá así:

Como puedes ver, cuando se ejecuta el código, se muestra la foto de esta tortuga para nosotros.

Todo lo que hicimos fue escribir un enlace a la imagen de nuestra tortuga en la etiqueta HTML.

Nota

Ten en cuenta que la foto de esta tortuga no está en los archivos de este sitio web, y puede que no se descargue localmente en tu dispositivo. Este archivo está almacenado en AWS S3, desde donde lo accedemos y lo mostramos en cualquier página.

También puedes acceder directamente a esta imagen siguiendo este enlace.

Ahora, escribamos una pequeña página HTML donde describimos la tortuga y damos al usuario la oportunidad de alimentarla.

El código se verá así:

Para tu conveniencia, también he añadido el código para la página de la tortuga a un bloque en el sitio web:

Así, podemos incrustar varios medios que subimos a S3 en nuestras páginas HTML, tal como hicimos con la imagen de la tortuga. Simplemente insertamos el enlace de la imagen en la etiqueta img, y obtenemos el resultado.

¡Buen trabajo!