Хостинг статического веб-сайта в S3 с использованием вашего пользовательского домена (2 части серии)
Факт: Исследования показывают, что разработчики, размещающие свои сайты в S3, являются более здоровыми, более богатыми и имеют лучшие волосы, чем их сверстники.
Если вы не были убеждены вышеупомянутым, по крайней мере, по крайней мере, знаете, что комбинация Amazon S3 и Cloudfront предлагает простой, дешевый и исполнительный способ размещать статические сайты и обслуживать их через HTTPS. В этой серии из двух частей мы проведем немного времени по поводу шагов, необходимых для проживания вашего сайта и использования пользовательского домена. Мы охватим следующее:
- Часть I — Настройка ведра S3 и распределение Cloudfront для хоста и доставки вашего контента.
- Часть II — Передача вашего домена в маршрут 53 Amazon 53 и настроить сертификат SSL с использованием Manager Manager Amazon.
Каждая часть будет довольно короткими — так что не откладывайтесь от поломки выше — вся серия может быть завершена в хорошем состоянии в течение часа.
Для целей этого руководства я собираюсь использовать .tech Домен я купил у Godaddy. Я решил пойти с connectr.tech Поскольку это был дешевый, относительно неспецифический и достаточно битник, который будет использоваться в статье dev.to 🧐
Часть IA- Создание и настройка ведра S3 для размещения вашего сайта
- Войдите в консоль AWS и перейдите к С3 Ведро Создание страницы Отказ
Создать новое ведро E.g. CNENTR-сайт и временно удалить все блоки доступа к публичным доступам, как показано ниже
Выберите новое созданное ведро, а затем отправитесь на Характеристики: Статический хостинг сайта Чтобы настроить параметры статического хостинга.
Настройте Индекс и Ошибка Страницы как index.html и error.html Отказ Вы также увидите общедоступную конечную точку вашего скорой на сайт!
Скопируйте конечную точку и откройте его на другой вкладке — вы должны получить 403 (запрещенный) ответ, потому что политика ведра еще не настроена. Разбирать это, перейдите к Разрешения Вкладка (рядом с свойства ) и добавьте следующее Ковш политика используя Редактор политики ведра Отказ
Сохраните политику ведра и попробуйте снова ударить новую общедоступную конечную точку — на этот раз вы должны получить 404, как S3 пытается служить несуществующую index.html и Error.html страницы. Это то, что мы хотим на этом этапе 👍
Создать index.html и error.html Файл, который вы рады поделиться с миром. Например, я создал несколько «потрясающих» страниц ниже …
В то время как еще в S3 выберите Обзор вкладка, а затем загрузить error.html Файл к вашему ведрю S3. Убедитесь, что вы предоставляете публичный доступ для чтения на второй странице мастера загрузки перед нажатием Загрузить Отказ
После завершения загрузки перейдите к конечной точке вашего сайта снова, и ваша страница пользовательской ошибки должна отображаться.
Повторите процесс для вашего index.html — Когда вы снова перемещаетесь на сайт, вы должны увидеть ваш любовно изготовленный HTML! (Обратите внимание, что соединение просто HTTP и не безопасно)
Наконец, чтобы улучшить безопасность и убедиться, что мы следуем передовой практике, мы можем заблокировать политику ведра немного больше. Вернитесь к Разрешения Вкладка для вашего ведра и блокировать публичный доступ для ACL и новых политик для ведра, как показано:
Дважды проверьте, вы все еще можете получить доступ к вашему index.html страница и это — Ты приятно идти.
Часть IB- Настройка распределения CloudFront для доставки контента
Чтобы улучшить, как ваши пользователи получают доступ к вашему контенту, вы захотите использовать CDN — в этом случае Cloudfront — распределить свой контент с помощью глобальной сети прокси-серверов.
- В AWS перейдите к службе CloudFront и выберите Создать распространение для начала. Когда попросили выбрать способ доставки, выберите Веб Отказ
- Под Настройки происхождения Вы должны прикрепить доменное имя S3, которое было создано частично IA например connectr-site.s3.amazonaws.com.
- Во-вторых, вы захотите перенаправить все http движение над https Выбирая Redirect Http к https. Как Протокольная политика просмотра вариант
- Теперь установите Уровень корневого объекта по умолчанию к index.html (или любой корень сайта, который вы, возможно, решили настроить).
Теперь создайте распределение и подождите, пока он покажет статус Развернут В таблице Обзорных дистрибутивов (это может занять 5-10 минут, поэтому найдите видео Cat на Youtube).
Скопируйте доменное имя CloudFront E.g. d32gg49xh8c4xx.Cloudfront.net (бросается вправо?) и вставьте его в новую вкладку браузера. Если все поехало на план — вы должны снова увидеть ваш любовный HTML — на этот раз служил CDN CDN Cloudfront и перенесено с помощью протокола HTTPS!
И вот и это — вы сделали для части I. Надеюсь, это было относительно безболезненно И вы смогли следовать в приличном темпе.
В части II я пройду через процесс передачи вашего пользовательского домена на маршрут 53, создавая отдельный сертификат SSL и связывающую их как с помощью распределения CloudFront, который мы только что создали здесь.
Хорошая работа! Возьмите освежающий напиток и улыбнитесь самодовольно на несколько минут …
Хостинг статического веб-сайта в S3 с использованием вашего пользовательского домена (2 части серии)
Оригинал: «https://dev.to/lukeojones/host-a-secure-website-in-s3-using-your-own-custom-domain-part-i-19k5»