Если у вас есть простой HTML-сайт и вы пока не выбрали, на какой платформе его разместить, — мы поможем. В этой статье мы поэтапно покажем, как разместить статический сайт с помощью Yandex.Cloud Object Storage.
У меня статический сайт?
Статическим считается тот сайт, структура и внешний вид которого не меняется в зависимости от посетителей. На таком сайте не может быть динамических страниц.
Можно подумать, что время статических сайтов ушло ещё в 2000-х, однако это не так. На статическом сайте тоже можно сделать красивую вёрстку и дизайн, а также разместить разнообразный контент (изображения, текст, видео, аудио и другое). Чтобы добавить все эти элементы, будет достаточно html-разметки.
Чтобы динамический ресурс открылся в браузере пользователя, сервер задействует языки программирования — ASP, PHP или Java. Файлы сайта сначала попадают в интерпретатор, а уже затем передаются в браузер пользователя. Со статическими ресурсами всё проще: сервер передает HTML-файл браузеру сразу в изначальном виде.
Чаще всего статическими делают небольшие веб-ресурсы с простой структурой, например, одностраничники, сайты-портфолио, сайты-визитки. Чтобы внести любое изменение в такой сайт, нужно открыть его исходный код.
Некоторые провайдеры предоставляют бесплатный хостинг или бесплатный пробный период для работы со статическими сайтами. В Yandex.Cloud, например, можно разместить сайт через Object Storage и настроить для него домен и хостинг.
Что такое Object Storage от Yandex Cloud
Yandex Object Storage — это масштабируемое облачное хранилище. Сервис подходит как для высоконагруженных проектов, которым нужен быстрый доступ к данным, так и для сайтов с минимальными требованиями к инфраструктуре хранения (например, статических сайтов).
С помощью Yandex Object Storage можно:
- размещать файлы проектов (сайтов или приложений) для публичного или закрытого доступа. Поддерживается любой формат файлов — OS не обрабатывает данные и хранит их в изначальном виде;
- создавать архивы данных большого объема (до 5TB на один файл), настраивать ограниченный доступ;
- настраивать совместный доступ к данным или проекту для конкретной организации.
Преимущества Yandex Cloud
- Можно подключить столько ресурсов, сколько требует конкретный проект — выбрать число ядер и объём памяти виртуальных машин, а также тип базы данных и объём хранилища.
- Можно удалять сразу несколько объектов через консоль управления Yandex Cloud или через API (с помощью метода deleteMultipleObjects).
- Режим строгой согласованности (strong consistency) для перезаписываемых (PUT) или удаляемых (DELETE) объектов.
- Поддержка авторизации статическими токенами, методы HTTP API (подробнее в Справочнике API).
- Совместимость с технологией AWS S3 от Амазон.
Обо всех возможностях читайте в справке Yandex.Cloud.
Как разместить статический сайт на Yandex Object Storage
Чтобы использовать Object Storage только как хранилище файлов, выполните 1, 2 и 4 этапы инструкции. Если вы хотите использовать хостинг на Яндексе, выполните все 5 этапов инструкции.
1 этап. Создайте платежный аккаунт и настройте облако
Обратите внимание:
- Object Storage — платный функционал. Чтобы разместить свой проект, сначала создайте платёжный аккаунт и привяжите к нему банковскую карту или счёт.
- Если вы создаете аккаунт впервые, вы можете использовать пробный период (подробнее в инструкции ниже). Если у вас уже есть платёжный аккаунт, переходите к этапу №2.
- Кликните Создать, чтобы настроить своё облако:
- Создайте платежный аккаунт. Вы можете выбрать:
- пробный период — в этом случае вы бесплатно используете сервис в течение пробного периода. Когда он закончится, вы сможете перейти на платную версию по инструкции. Чтобы настроить аккаунт этим способом, кликните Создать платежный аккаунт и следуйте инструкции ниже:
5. Внесите информацию: укажите страну, имя аккаунта, выберите тип плательщика — Физическое лицо, Юридическое лицо или ИП. Заполните данные плательщика в зависимости от типа, который выбрали:
После этого добавьте карту (или номер счета) и номер телефона:
Чтобы подключить пробный период, поставьте галочку напротив пункта «Включить пробный период» и нажмите Активировать.
Обратите внимание: иногда при подключении пробного периода нужна дополнительная верификация. В этом случае на странице появится сообщение с подробной инструкцией — следуйте ей.
Готово, вы создали платёжный аккаунт:
После создания платежного аккаунта вы автоматически становитесь его владельцем (billing.accounts.owner). Поменять владельца нельзя, но можно предоставить доступ к аккаунту другому пользователю. Подробнее в справке Yandex.Cloud.
2 этап. Создайте публичный бакет (хранилище)
Бакет — это хранилище для файлов. Для каждого проекта (сайта, приложения) должен быть отдельный бакет.
Обратите внимание: чтобы разместить бакет, вы можете создать новый каталог или выбрать уже созданный на странице облака. Если вы создаете бакет впервые, он будет размещен в каталог default, который генерируется автоматически при создании облака. Подробнее об иерархии ресурсов Yandex Cloud.
- В консоли управления перейдите в раздел Object Storage:
- Нажмите Создать бакет:
- Укажите имя бакета (подробнее о требованиях к имени) — оно станет частью доменного имени сайта. После настройки проект будет открываться по двум адресам: http(s)://имя-бакета.website.yandexcloud.net и http(s)://website.yandexcloud.net/имя-бакета.
Обратите внимание: для размещения проекта в сети (этап 3) вы можете использовать свой домен, но только третьего и выше уровня (как устроены домены). В этом случае имя бакета должно в точности совпадать с именем вашего домена. Подробнее в справке Yandex.Cloud.
Затем укажите:
- максимальный размер бакета в ГБ — укажите нужный объём хранилища (ориентируйтесь на размер своего сайта). Обратите внимание: за каждый используемый ГБ берётся оплата;
- доступ на чтение объектов — выберите Публичный, чтобы пользователи видели содержимое сайта;
- доступ к списку объектов и доступ на чтение настроек — оставьте «Ограниченный». В этом случае бакет будет работать как внутреннее хранилище файлов приложений;
- класс хранилища — оставьте «Стандартный». Эта настройка подходит для сайтов с регулярным посещением.
После этого кликните Создать бакет:
Готово, вы создали бакет:
3 этап. Настройте зону и добавьте CNAME-запись
Чтобы сайт стал доступен в интернете, для него нужно указать домен. Если вы не планируете выкладывать сайт в сеть, а хотите просто разместить его файлы в хранилище, переходите к этапу 4.
Если у вас ещё нет домена, вы можете использовать технологический или зарегистрировать собственный в REG.RU. Обратите внимание: можно использовать домен только третьего и выше уровней. Также имя бакета должно в точности совпадать с именем вашего домена.
Перед тем как назначить бакету доменное имя, выполните два шага: настройте зону DNS и добавьте CNAME-запись.
Настройте зону DNS:
- Создайте новый каталог или перейдите в нужный:
- В списке сервисов выберите Cloud DNS:
- Нажмите Создать зону:
- Внесите данные. В качестве примера рассмотрим, как внести данные для домена третьего уровня www.fag-reg.ru:
- Зона — укажите часть вашего домена начиная со второго уровня и обязательно поставьте в конце точку (например, для домена test.text.ru — text.ru., для домена blog.mysite.ru — mysite.ru.). В нашем случае укажем fag-reg.ru.;
- Тип — выберите Публичная;
- Имя зоны — укажите второй уровень домена и добавьте к нему «-zone-1». В нашем случае получится fag-reg-zone-1.
Затем нажмите Создать:
Готово, вы создали зону:
Теперь добавьте CNAME-запись:
- Перейдите в зону, которую создали на предыдущем шаге:
- Кликните Создать запись:
- Задайте параметры записи:
- Имя — введите третью часть домена после точки (например, для домена test.text.ru — test, для домена blog.mysite.ru — blog). В нашем случае это www;
- Тип записи — из списка выберите CNAME.
- TTL (в секундах) (время кэширования записи) — оставьте выставленные по умолчанию значения;
- Значение — введите имя бакета, которое вы указывали на 3-м шаге этапа 2 и добавьте к нему значение «.website.yandexcloud.net.». В нашем примере получилось «www.fag-reg.ru.website.yandexcloud.net.».
Затем нажмите Создать:
Готово, вы добавили запись CNAME:
4 Этап: Загрузите файлы сайта в бакет
Теперь загрузите все файлы сайта в бакет. Это можно сделать несколькими способами:
- перетаскиванием на экран — это самый простой способ, который подойдёт, если вы хотите разместить сайт в сети. Все файлы можно сразу загрузить в том порядке, в котором они хранились на ПК. В этом случае бакет будет выполнять роль корневой директории сайта;
- через кнопку «Загрузить» — этот способ также подойдёт для размещения сайта в сети, а также для использования бакета в качестве хранилища. Если вам нужно разместить папки с файлами, сначала создайте в бакете папки, а затем загрузите в них файлы;
- через HTML-форму — способ подойдёт тем, кто хочет загружать файлы в бакет напрямую из браузера, а также открыть доступ на загрузку всем пользователям сервиса;
- с помощью S3-совместимых инструментов — подойдёт для тех, кто хочет выгружать объекты через HTTP API, совместимый с Amazon S3.
Рассмотрим, как загрузить в бакет файлы через кнопку:
- Нажмите Загрузить объекты на странице или Загрузить в верхней панели:
- Выберите нужный файл на ПК и нажмите Загрузить:
- После этого перезагрузите страницу. Файл появится в бакете:
Чтобы использовать бакет как хранилище и разместить в нём не только файлы, но и папки, нажмите Создать папку:
Назовите папку и кликните Создать:
Создайте нужное количество папок и загрузите в них файлы, как описано выше.
Готово, вы закончили размещение сайта в бакет. Чтобы закончить настройку зоны для привязки домена, переходите к этапу 5.
5 этап. Настройте DNS-серверы и проверьте работу сайта
Последний этап — это делегирование домена. Чтобы делегировать домен, укажите для него DNS-серверы ns1.yandexcloud.net и ns2.yandexcloud.net в личном кабинете регистратора. Если ваш домен зарегистрирован в REG.RU, используйте инструкцию Как прописать DNS для домена в личном кабинете. Если ваш домен зарегистрирован не в REG.RU, обратитесь к своему доменному регистратору.
Обратите внимание: дождитесь обновления DNS-серверов. Обычно это занимает до 24 часов. После этого сайт станет доступен в интернете. Чтобы проверить работу сайта, введите в поисковую строку:
- один из адресов Object Storage — http://www.example.website.yandexcloud.net или http://website.yandexcloud.net/example;
- или свой домен.
Готово, вы разместили свой сайт на пробный бесплатный хостинг от Яндекса.
⌘⌘⌘
Теперь вы знаете, как использовать yandex host, чтобы загрузить все файлы проекта в хранилище, а затем разместить его в интернете. А в REG.RU вы всегда можете подобрать для проекта лаконичный и красивый домен.
Зарегистрировать домен
Оригинал материала и ещё больше полезностей в блоге REG.RU
Понравился материал? Поделись с друзьями! Дальше будет ещё больше полезных постов 😊