Поиск по сайту Поиск

Как разместить статический сайт с помощью 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. Войдите в Консоль управления:
  1. Кликните Создать, чтобы настроить своё облако:
  1. Создайте платежный аккаунт. Вы можете выбрать:
  • платную версию — чтобы настроить аккаунт этим способом, используйте официальную инструкцию;
  • пробный период — в этом случае вы бесплатно используете сервис в течение пробного периода. Когда он закончится, вы сможете перейти на платную версию по инструкции. Чтобы настроить аккаунт этим способом, кликните Создать платежный аккаунт и следуйте инструкции ниже:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Создайте новый каталог или перейдите в нужный:
  1. В списке сервисов выберите Cloud DNS:
  1. Нажмите Создать зону:
  1. Внесите данные. В качестве примера рассмотрим, как внести данные для домена третьего уровня 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. Перейдите в зону, которую создали на предыдущем шаге:
  1. Кликните Создать запись:
  1. Задайте параметры записи:
  • Имя — введите третью часть домена после точки (например, для домена 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. Нажмите Загрузить объекты на странице или Загрузить в верхней панели:
  1. Выберите нужный файл на ПК и нажмите Загрузить:
  1. После этого перезагрузите страницу. Файл появится в бакете:

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

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

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

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

Собственный магазин или маркетплейс: где выгоднее продавать?

58% всех интернет-заказов в 2023 году совершили на маркетплейсах.  Популярность маркетплейсов активно растет. При этом рост количества продавцов снижается: в...
Read More

SEO для бизнеса: поисковики — тоже реклама

Что такое SEO-оптимизация, как она приносит выгоду собственному бизнесу и как ее настроить — в блоге Рег.ру
Read More

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

Техногиганты всё время своего существования судились, обменивались колкостями и пытались обогнать друг друга по уровню новаторства в разработках. Наши коллеги...
Read More

Как компании меняли свой бренд из-за испорченной репутации: три кейса

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More

Россияне предпочитают .ru вместо .com, а Дональд Трамп проиграл доменный спор за mar-a-lago.com

Рассказываем самые интересные новости доменного мира. (далее…)
Read More

Прокрастинация: что такое, виды и как бороться

Прокрастинатор полон идей и амбиций, но ему часто не хватает самодисциплины и силы воли, чтобы начать действовать. Что заставляет нас...
Read More