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

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

Сильная презентация для инвесторов: от содержания до выступления

Презентация поможет структурировать данные и представить идею потенциальным инвесторам. Как сделать качественный документ – разбираемся вместе с основателем REC’s GROUP...
Read More

Дёшево и эффективно: как малому бизнесу продвигать свой сайт

Как выделиться среди конкурентов и получить внимание потенциальных клиентов. Бюджетные методы продвижения сайта – в этом обзоре.  
Read More

Как перевести бизнес в онлайн: 7 шагов

Пошаговая инструкция по переводу существующего бизнеса в онлайн: от создания сайта до начала продаж и запуска рекламы.
Read More

Кризис как точка роста для бизнеса

Когда бизнес развивается слабо, на помощь приходит… кризис. Рассказываем, как не испугаться перемен и открыть офис в другой стране, чем отличается построение бизнеса в Москве и Алматы.
Read More

Миллион на подтяжках для собак

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

Нейросети в помощь бизнесу: на что способен искусственный интеллект

Развитие нейросетей стало для россиян главным научным событием 2023 года. Бизнес активно внедряет искусственный интеллект, чтобы создавать контент, лучше понимать...
Read More

13 лайфхаков, которые погубят ваш бизнес

Разбираем «серые» способы работы и ошибки, которые точно развалят собственный бизнес.
Read More

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

Предприниматели из Тюмени смогли стать девелоперами по загородной недвижимости без начального капитала и кредитов. Основатель компании «Финская улочка» Юлиу Пантя рассказывает,...
Read More

Не потерять ни клиента: топ-5 CRM-систем для предпринимателей

По мере роста бизнеса обрабатывать запросы клиентов вручную становится все сложнее. Информация о заказах часто теряется, а клиенты по несколько...
Read More

На чём нельзя экономить на старте бизнеса

Купили дешёвые материалы, а потом потеряли половину дохода из-за брака. Сэкономили на зарплате работников, а в итоге сорвали сроки и...
Read More