Summary  
This chapter covers uploading and managing media files in cloud object storage, retrieving their public URLs, and integrating those hosted assets into HTML code.  

General domain of usage  
Web development


Ознайомлення з процесом завантаження та використання **медійних** файлів у нашому бакеті.

Спочатку необхідно відкрити вкладку `Objects` і натиснути кнопку `Upload`.

Відкриється **меню для вибору файлів або папки** з файлами для завантаження. На даному етапі для нас **S3** працює подібно до **Google Drive**, наприклад.

**Google Drive** — ще один сервіс хмарного зберігання даних, але він пропонує **обмежений набір інструментів** для роботи з даними. Для програмування **AWS S3** використовується значно частіше, тому ми обираємо саме його.

Примітка

Потрібно вибрати **будь-яке зображення** та завантажити його на платформу; у нашому випадку це буде **фотографія черепахи**.

Після завантаження відкриваємо файл, і з'являється така інформація:

Unique identifier of the AWS user who owns this S3 object.

The AWS region where the object is stored, specified as "Europe (Stockholm)" with the value eu-north-1.

The date and time of the last modification of the object, shown here as April 3, 2024, 15:15:08 UTC+3.

The size of the file, 35.3 KB, which is a fairly standard size for an image.

The file format, indicating that the object is an image in PNG format.

The name of the file in S3, in this case, turtle.png, which uniquely identifies the object in the S3 bucket.

Uniform Resource Identifier (URI) pointing to the location of the file in Amazon S3.

Standard AWS resource identifier used to specify a specific resource in AWS.

The file's checksum used to verify data integrity during transmission.

Direct link to the object that can be used to access the file via a browser or HTTP request.

Ось як виглядає наша черепаха:

## Як використовувати це зображення у наших проєктах?

Щоб скористатися цим файлом, ми вже **правильно налаштували бакет**, щоб мати доступ до нього з будь-якого джерела.

Напишемо **невелику HTML-сторінку** з місцем для цього фото.

Ми можемо вставити фото **за допомогою посилання** у тегу `<img>` в HTML.

Код для цього фото виглядатиме так:

PGltZyBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvMTExOGExM2EtMDI4OC00M2M1LThmZjktZDUxZGEyNWM5MDNlL1NlY3Rpb24yL2NvZGVmaW5pdHktYXdzLXR1dG9yL3R1cnRsZS5wbmciPiAgICAgICAgICA=

Як бачимо, при виконанні коду **відображається фото цієї черепахи**.

Все, що ми зробили — це написали посилання на зображення нашої черепахи у **HTML-тегу**.

**Фото черепахи** не зберігається у файлах цього вебсайту і не завантажується локально на ваш пристрій. Натомість цей **файл зберігається на AWS S3**, звідки ми отримуємо до нього доступ і відображаємо на будь-якій сторінці.

Ви також можете отримати прямий доступ до цього зображення, перейшовши за <a href="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/turtle.png" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> цим</a> посиланням.

Тепер створимо **невелику HTML-сторінку**, де опишемо черепаху та дамо користувачу можливість її погодувати.

Код виглядатиме так:

PCFET0NUWVBFIGh0bWw+CiAgPGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCIgLz4KICAgIDx0aXRsZT5HcmVldGluZyBUdXJ0bGU8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iZ3JlZXRpbmciPkhlbGxvLCBJJ20gYSB0dXJ0bGUsIEknbSB2ZXJ5IGh1bmdyeTwvZGl2PgogIAogICAgPCEtLUhlcmUgd2UgaW5zZXJ0IGEgbGluayB0byB0aGUgcGljdHVyZSBmcm9tIEFXUyBTMy4tLT4KICAgIDxpbWcKICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzExMThhMTNhLTAyODgtNDNjNS04ZmY5LWQ1MWRhMjVjOTAzZS9TZWN0aW9uMi9jb2RlZmluaXR5LWF3cy10dXRvci90dXJ0bGUucG5nIgogICAgICBhbHQ9Ikh1bmdyeSBUdXJ0bGUiCiAgICAgIGNsYXNzPSJ0dXJ0bGUtaW1hZ2UiCiAgICAvPgogIAogICAgPGRpdiBjbGFzcz0iYnV0dG9ucy1jb250YWluZXIiPgogICAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24gZmVlZCI+RmVlZDwvYnV0dG9uPgogICAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24gaWdub3JlIj5JZ25vcmU8L2J1dHRvbj4KICAgIDwvZGl2PgogIAogICAgPGRpdiBpZD0iZmVlZE1vZGFsIiBjbGFzcz0ibW9kYWwiPgogICAgICA8ZGl2IGNsYXNzPSJtb2RhbC1jb250ZW50Ij4KICAgICAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+CiAgICAgICAgPHA+VGhhbmsgeW91IHZlcnkgbXVjaCE8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgCiAgICA8ZGl2IGlkPSJpZ25vcmVNb2RhbCIgY2xhc3M9Im1vZGFsIj4KICAgICAgPGRpdiBjbGFzcz0ibW9kYWwtY29udGVudCI+CiAgICAgICAgPHNwYW4gY2xhc3M9ImNsb3NlIj4mdGltZXM7PC9zcGFuPgogICAgICAgIDxwPldoeT88L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgCiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

LmdyZWV0aW5nIHsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLXRvcDogMjBweDsKICBmb250LXdlaWdodDogYm9sZDsKfQoudHVydGxlLWltYWdlIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDIwcHggYXV0bzsKICB3aWR0aDogMzAlOwogIG1heC13aWR0aDogMzAwcHg7CiAgaGVpZ2h0OiBhdXRvOwp9Ci5idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICM0Y2FmNTA7CiAgYm9yZGVyOiBub25lOwogIGNvbG9yOiB3aGl0ZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgZm9udC1zaXplOiAxNnB4OwogIG1hcmdpbjogMTBweDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlLCBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQouYnV0dG9uOmhvdmVyIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMDUpOwogIGJhY2tncm91bmQtY29sb3I6ICMzNjdiMzc7Cn0KLmJ1dHRvbi5pZ25vcmUgewogIGJhY2tncm91bmQtY29sb3I6ICNmNDQzMzY7Cn0KLmJ1dHRvbi5pZ25vcmU6aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICNkMzJmMmY7Cn0KLm1vZGFsIHsKICBkaXNwbGF5OiBub25lOwogIHBvc2l0aW9uOiBmaXhlZDsKICB6LWluZGV4OiAyOwogIGxlZnQ6IDA7CiAgdG9wOiAwOwogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogMTAwJTsKICBvdmVyZmxvdzogYXV0bzsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNCk7CiAgcGFkZGluZy10b3A6IDEwMHB4Owp9Ci5tb2RhbC1jb250ZW50IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmVmZWZlOwogIG1hcmdpbjogYXV0bzsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICM4ODg7CiAgd2lkdGg6IDgwJTsKICBtYXgtd2lkdGg6IDMwMHB4OwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBib3gtc2hhZG93OiAwIDRweCA4cHggcmdiYSgwLCAwLCAwLCAwLjIpOwogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC40czsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgdG9wOiA1MCU7CiAgbGVmdDogNTAlOwogIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOwp9Ci5jbG9zZSB7CiAgY29sb3I6ICNhYWFhYWE7CiAgZmxvYXQ6IHJpZ2h0OwogIGZvbnQtc2l6ZTogMjhweDsKICBmb250LXdlaWdodDogYm9sZDsKfQouY2xvc2U6aG92ZXIsCi5jbG9zZTpmb2N1cyB7CiAgY29sb3I6ICMwMDA7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGN1cnNvcjogcG9pbnRlcjsKfQouYnV0dG9ucy1jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0=

bGV0IGZlZWRNb2RhbCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdmZWVkTW9kYWwnKTsKbGV0IGlnbm9yZU1vZGFsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2lnbm9yZU1vZGFsJyk7CgpsZXQgYnRuRmVlZCA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2ZlZWQnKVswXTsKbGV0IGJ0bklnbm9yZSA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2lnbm9yZScpWzBdOwoKbGV0IHNwYW5zID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnY2xvc2UnKTsKCmJ0bkZlZWQub25jbGljayA9IGZ1bmN0aW9uICgpIHsKICBmZWVkTW9kYWwuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7Cn07CmJ0bklnbm9yZS5vbmNsaWNrID0gZnVuY3Rpb24gKCkgewogIGlnbm9yZU1vZGFsLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwp9OwoKZm9yICh2YXIgaSA9IDA7IGkgPCBzcGFucy5sZW5ndGg7IGkrKykgewogIHNwYW5zW2ldLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7CiAgICBmZWVkTW9kYWwuc3R5bGUuZGlzcGxheSA9ICdub25lJzsKICAgIGlnbm9yZU1vZGFsLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7CiAgfTsKfQoKd2luZG93Lm9uY2xpY2sgPSBmdW5jdGlvbiAoZXZlbnQpIHsKICBpZiAoZXZlbnQudGFyZ2V0ID09IGZlZWRNb2RhbCB8fCBldmVudC50YXJnZXQgPT0gaWdub3JlTW9kYWwpIHsKICAgIGZlZWRNb2RhbC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOwogICAgaWdub3JlTW9kYWwuc3R5bGUuZGlzcGxheSA9ICdub25lJzsKICB9Cn07

Відкрийте для себе світ хмарних обчислень, досліджуючи його основні технології та практичні застосування в цьому курсі! Почніть з основ хмарних обчислень, а потім зосередьтеся на ключових сервісах AWS, таких як S3 (Simple Storage Service) для масштабованого зберігання, EC2 (Elastic Compute Cloud) для віртуальних серверів і RDS (Relational Database Service) для керованих баз даних. Отримайте практичний досвід, дізнаючись, як ці сервіси інтегруються для ефективної підтримки сучасних застосунків.

Дізнайтеся про історію та розвиток хмарних технологій, а також про те, як працюють сучасні сервери та вебзастосунки. Ознайомтеся з різними моделями хмарних обчислень, зрозумійте пропозиції основних постачальників хмарних сервісів і дослідіть основи безпеки, які забезпечують безпечну роботу в хмарі.

Ознайомтеся з хмарним сервісом S3 та дізнайтеся, як його налаштовувати та використовувати. Ви завантажуватимете різні медіафайли до S3, а також навчитеся розміщувати простий статичний вебсайт на S3.

Зануртеся у розуміння того, що таке EC2 і як він працює. Дізнайтеся, для чого використовується EC2, як створювати та керувати інстансами, а також як підключатися до них зі свого пристрою. Ознайомтеся з основами роботи з інстансами EC2 та розгортанням власного вебсайту на EC2 вебсервері.

Дізнайтеся, як створювати та використовувати бази даних у хмарі. Використання різних типів, ознайомлення з їхньою взаємодією з додатками та інтеграція з різними продуктами. Хмарні бази даних є найбезпечнішим способом зберігання даних.

Використання Медіа в AWS S3

Як використовувати це зображення у наших проєктах?