Как разместить статический сайт с помощью Yandex.Cloud Object Storage

Если у вас есть простой 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.

1. Авторизуйтесь в аккаунте Яндекс.Почта или создайте новый аккаунт.
2. Войдите в Консоль управления:

3. Кликните Создать, чтобы настроить своё облако:

4. Создайте платежный аккаунт. Вы можете выбрать:

• платную версию — чтобы настроить аккаунт этим способом, используйте официальную инструкцию;
• пробный период — в этом случае вы бесплатно используете сервис в течение пробного периода. Когда он закончится, вы сможете перейти на платную версию по инструкции. Чтобы настроить аккаунт этим способом, кликните Создать платежный аккаунт и следуйте инструкции ниже:

5. Внесите информацию: укажите страну, имя аккаунта, выберите тип плательщика — Физическое лицо, Юридическое лицо или ИП. Заполните данные плательщика в зависимости от типа, который выбрали:

После этого добавьте карту (или номер счета) и номер телефона:

Чтобы подключить пробный период, поставьте галочку напротив пункта «Включить пробный период» и нажмите Активировать.

Обратите внимание: иногда при подключении пробного периода нужна дополнительная верификация. В этом случае на странице появится сообщение с подробной инструкцией — следуйте ей.

Готово, вы создали платёжный аккаунт:

После создания платежного аккаунта вы автоматически становитесь его  владельцем (billing.accounts.owner). Поменять владельца нельзя, но можно предоставить доступ к аккаунту другому пользователю. Подробнее в справке Yandex.Cloud.

2 этап. Создайте публичный бакет (хранилище) 

Бакет — это хранилище для файлов. Для каждого проекта (сайта, приложения) должен быть отдельный бакет. 

Обратите внимание: чтобы разместить бакет, вы можете создать новый каталог или выбрать уже созданный на странице облака. Если вы создаете бакет впервые, он будет размещен в каталог default, который генерируется автоматически при создании облака. Подробнее об иерархии ресурсов Yandex Cloud.

1. В консоли управления перейдите в раздел Object Storage:
2. Нажмите Создать бакет:

3. Укажите имя бакета (подробнее о требованиях к имени) — оно станет частью доменного имени сайта. После настройки проект будет открываться по двум адресам: http(s)://имя-бакета.website.yandexcloud.net  и http(s)://website.yandexcloud.net/имя-бакета. 

Обратите внимание: для размещения проекта в сети (этап 3) вы можете использовать свой домен, но только третьего и выше уровня (как устроены домены). В этом случае имя бакета должно в точности совпадать с именем вашего домена. Подробнее в справке Yandex.Cloud.

Затем укажите:

• максимальный размер бакета в ГБ — укажите нужный объём хранилища (ориентируйтесь на размер своего сайта). Обратите внимание: за каждый используемый ГБ берётся оплата;
• доступ на чтение объектов — выберите Публичный, чтобы пользователи видели содержимое сайта;
• доступ к списку объектов и доступ на чтение настроек — оставьте «Ограниченный». В этом случае бакет будет работать как внутреннее хранилище файлов приложений;
• класс хранилища — оставьте «Стандартный». Эта настройка подходит для сайтов с регулярным посещением. 

После этого кликните Создать бакет:

Готово, вы создали бакет:

3 этап. Настройте зону и добавьте CNAME-запись 

Чтобы сайт стал доступен в интернете, для него нужно указать домен. Если вы не планируете выкладывать сайт в сеть, а хотите просто разместить его файлы в хранилище, переходите к этапу 4. 

Если у вас ещё нет домена, вы можете использовать технологический или  зарегистрировать собственный в REG.RU. Обратите внимание: можно использовать домен только третьего и выше уровней. Также имя бакета должно в точности совпадать с именем вашего домена.

Перед тем как назначить бакету доменное имя, выполните два шага: настройте зону DNS и добавьте CNAME-запись. 

Настройте зону DNS:

1. Создайте новый каталог или перейдите в нужный:

2. В списке сервисов выберите Cloud DNS:

3. Нажмите Создать зону:

4. Внесите данные. В качестве примера рассмотрим, как внести данные для домена третьего уровня www.fag-reg.ru:

• Зона — укажите часть вашего домена начиная со второго уровня и обязательно поставьте в конце точку (например, для домена test.text.ru — text.ru., для домена blog.mysite.ru — mysite.ru.). В нашем случае укажем fag-reg.ru.;
• Тип — выберите Публичная;
• Имя зоны — укажите второй уровень домена и добавьте к нему «-zone-1». В нашем случае получится fag-reg-zone-1.

Затем нажмите Создать:

Готово, вы создали зону:

Теперь добавьте CNAME-запись:

1. Перейдите в зону, которую создали на предыдущем шаге:

2. Кликните Создать запись:

3. Задайте параметры записи:

• Имя — введите третью часть домена после точки (например, для домена 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.

Рассмотрим, как загрузить в бакет файлы через кнопку:

1. Нажмите Загрузить объекты на странице или Загрузить в верхней панели:

2. Выберите нужный файл на ПК и нажмите Загрузить:

3. После этого перезагрузите страницу. Файл появится в бакете:

Чтобы использовать бакет как хранилище и разместить в нём не только файлы, но и папки, нажмите Создать папку:

Назовите папку и кликните Создать: 

Создайте нужное количество папок и загрузите в них файлы, как описано выше.

Готово, вы закончили размещение сайта в бакет. Чтобы закончить настройку зоны для привязки домена, переходите к этапу 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 вы всегда можете подобрать для проекта лаконичный и красивый домен.