Враховуючи, що ми розмістили різні елементи, такі як скрипти та стилі, у нашому публічному S3 бакеті, ви могли подумати про розміщення повноцінної HTML-сторінки або статичного веб-сайту в S3 бакеті. У цьому розділі ви дізнаєтеся, як це зробити в публічному S3 бакеті, доступному за посиланням. Почнемо!

Примітка

Ми будемо розміщувати веб-сторінку, яку ви можете створити, пройшовши курс Bootstrap: Створення стильних веб-сайтів. Цей курс охоплює використання різних стилів з Bootstrap, і в кінці ви матимете власний портфоліо-сайт, який ми використаємо в цьому розділі!

Розміщення HTML-сторінки на AWS S3

Для початку я пропоную створити окрему папку в бакеті, де ми розмістимо всі ресурси, пов'язані з цією веб-сторінкою, для зручнішого управління та розробки:

Тепер, як зазвичай, нам потрібно завантажити HTML-файл у наш публічний бакет.

HTML-файл, який ми завантажимо, виглядає так:

Примітка

Зверніть увагу, що навіть у цьому коді використовуються хмарні технології для імпорту Bootstrap, а також для зображення, яке служить нашим аватаром у портфоліо.

Тепер давайте завантажимо його в S3 bucket:

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

Найцікавіше, що ця сторінка знаходиться в хмарі, і ми завжди матимемо до неї доступ.

Статична веб-сторінка

Існує інший спосіб розміщення веб-сторінки на S3, і цей метод буде більш спеціалізованим для веб-сторінок. Давайте подивимося, як це зробити.

Спочатку нам потрібно створити новий bucket і завантажити HTML-файл, який буде головною сторінкою нашого статичного веб-сайту.

Примітка

Це хороша практика створити окрему папку і завантажити туди CSS стилі, JavaScript скрипти, різні медіа та інші матеріали пов'язані з вашим статичним веб-сайтом.

Для цього давайте створимо новий bucket і завантажимо HTML-файл з портфоліо:

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

Ми відкриваємо цей розділ і вибираємо 'Увімкнути' у рядку Хостинг статичного веб-сайту.

Далі нам потрібно вказати індексний документ, який у нашому випадку є portfolio.html. Якщо у вас є сторінка обробки помилок, ви також можете її вказати. Потім просто збережіть сторінку.

Примітка

Зверніть увагу, що для того, щоб сторінка була доступна користувачам і вам в інтернеті, потрібно налаштувати її доступність, так само як ми робили з нашим попереднім бакетом.

Далі нам потрібно зберегти зміни, і Amazon надасть нам посилання на наш статичний веб-сайт, яке ви можете побачити внизу:

Тепер, коли ви перейдете за цим посиланням, ви зможете побачити нашу HTML-сторінку, розміщену на AWS S3:

Зверніть увагу, що це не найкращий спосіб розміщення веб-сайту; для цього існують спеціалізовані сервіси, такі як Amazon EC2.

На S3 ми можемо розміщувати невеликі статичні веб-сайти, але це може бути недостатньо для більших додатків.

Робити це на S3 досить просто, і тепер ви знаєте, як завантажувати та зберігати свої медіа там.