Огляд
Готові розмістити ваш вебсайт без складнощів з сервером? У цьому короткому посібнику ми покажемо вам, як розмістити статичний сайт на Amazon S3 — від завантаження файлів до налаштування вашого бакету. Незалежно від того, чи ви новачок, чи просто шукаєте простіший спосіб розмістити сайт, ви швидко налаштуєте все.☁️🚀
Наші цілі:
- Створити бакет S3
- Генерувати політики для бакету
- Увімкнути статичний вебсайт
Розділ 1: Створення бакету S3
Крок 1. Введіть S3 у рядок пошуку та відкрийте AWS S3 Console
Порада: Ви можете зберегти інструменти AWS у ваших улюблених для зручного доступу.
Крок 2. Натисніть Create Bucket
Не переживайте, якщо це ваш перший бакет S3, цей розділ буде порожнім!
Крок 3. Виберіть General Purpose та додайте Bucket Name
Це має бути унікальне ім’я, яке ще не зайняте.
Крок 4. Переконайтесь, що ACLs вимкнені, оскільки ми будемо використовувати лише Bucket Policies для дозволу трафіку на статичний вебсайт.
Крок 5. Зараз ми знімаємо галочки з цих полів (для тестування QA), але якщо ви хочете зробити ваш статичний сайт більш безпечним, краще залишити ці поля вибраними. (Див. Статтю про CloudFront)
- Прокрутіть вниз і натисніть Create Bucket
Порада: Увімкніть версіонування, якщо ви випадково перезапишете файл.
Вітаємо, ви маєте ваш новий S3 бакет!
Розділ 2: Завантаження HTML файлу
Крок 1. Клацніть на ваш S3 бакет та під вкладкою Objects натисніть Upload
Крок 2. Натисніть Add Files
Порада: Ви можете знайти безкоштовні HTML шаблони в Інтернеті або використовувати AI для легкого створення.
Виберіть HTML файл (index.html)
Чудово, тепер ви побачите, що ваш файл був завантажений до вашого S3 бакету!
Розділ 3: Увімкнення статичного вебсайту
Крок 1. Перейдіть до вкладки Properties вашого S3 бакету
Крок 2. Прокрутіть вниз до Static Website Browsing і натисніть Edit
Крок 3. Увімкніть хостинг вебсайту, введіть “index.html” у розділ Index Document
- Натисніть Save Changes
Розділ 4: Генерація політик для бакету
Крок 1: Перейдіть до вкладки Permissions вашого S3 бакету та скопіюйте ARN бакету S3
- Натисніть Policy Generator
Крок 2. Використовуйте Policy Generator для створення політики для S3 бакету
- Виберіть S3 Bucket Policy
- Виберіть Allow, оскільки ми хочемо дозволити трафік на наш вебсайт
- Введіть ***** в розділі Principal
- Вставте S3 Bucket ARN і додайте /* в кінці
(Principal () застосує політики до всього з (/), що прив'язано до цього.)
-
У роздіОсь ще одна частина перекладу:
-
У розділі Actions виберіть GetObject
- Натисніть Add Statement і потім Generate Policy
Крок 3. Отримайте політику, яка дозволяє доступ до вашого бакету, і збережіть її. Тепер ваш статичний вебсайт на S3 готовий до роботи, і ви можете поділитися своїм сайтом з іншими людьми або скористатися ним для особистих потреб.
Вітаємо, ви успішно налаштували статичний вебсайт на Amazon S3! 🎉
Цей переклад відповідає всім вимогам, включаючи точне збереження коду та елементів markdown, що було в оригіналі.
Скопіюйте політику бакету (JSON) Вставте її в розділ Bucket Policy (під вкладкою Permissions)
- Вставте її в розділ політики бакету (під вкладкою Permissions)
- Натисніть Save Changes
Якщо ви отримали помилку, переконайтесь, що ви додали /* до Bucket ARN
Розділ 5: Тестування статичного вебсайту
Крок 1. Перейдіть до вкладки Properties вашого S3 бакету, прокрутіть вниз до Static Website Hosting
Крок 2. Тепер ви можете або натискати на Bucket Website Endpoint link, або Скопіювати/Вставити його в адресний рядок вашого веббраузера
ТАДАААА, тепер ви офіційно хостите статичний вебсайт на AWS S3!
Якщо ви отримали помилку доступу, переконайтесь, що ваш браузер не використовує https:// (захищене з'єднання). Наразі статичний вебсайт налаштований тільки для доступу через http://. (Див. Частину 2 про використання CloudFront для включення трафіку через https://)
Висновок
Сподіваюся, ця стаття була корисною, і що тепер ви розумієте, як просто можна розмістити вебсайт за допомогою бакету AWS S3.
І ось ми знову!
Перегляньте мій наступний посібник, де я продовжу з того місця, де зупинилися, і використаю CloudFront для покращення кешування на рівні краю та прискорення часу завантаження вашого сайту! Частина 2 має бути такою ж простою, як і частина 1, і ми продовжимо саме звідси. Побачимося наступного разу!
Перейдіть до частини 2 цієї статті
Перекладено з: How to Easily Host a Static Website with AWS S3: A Step-by-Step Guide