Публикация статического сайта в облаке яндекса#

Существует множество генераторов сайтов, которые выдают статические html и JS файлы, которые необходимо опубликовать для общего доступа. Примеры приложений:

  • генератор сайтов sphinx, с помощью которого создан данный ресурс

  • генератор статических сайтов docusaurus, с помощью которого создан сайт https://massage-republika.ru/

  • система отчетности allure-report

Одна из подходящих площадок для публикации статических сайтов - это yandex cloud с сервисом S3.

Процедура публикации:

  • Создать bucket

  • Загрузить подготовленные файлы веб сайта c помощью cyberduck

  • настроить webсайт в бакете

    • подключить website и выставить базовые параметры

    • в сервисе Cloud DNS яндекс облака создать публичную зону

    • В публичной зоне создать DNS записи для перенаправления трафика на website бакета

    • В сервисе Certificate Manager заказать сертификаты lets-encrypt

    • Настроить https для вебсайта в бакете

Создание бакета в сервисе Object Storage#

  1. В консоли управления выберите каталог, в котором нужно создать бакет.

  2. Выбрать сервис Object Storage.

  3. Нажать кнопку Создать бакет.

  4. На странице создания бакета:

  • Ввести имя бакета в соответствии с правилами именования.

По умолчанию бакет с точкой в имени доступен только по протоколу HTTP.
Чтобы поддержать для бакета протокол HTTPS,
нужно загрузить собственный сертификат или создать Lets Encrypt в менеджере сертификатов

  • Ограничить максимальный размер бакета минимальным значением в 1 Gb

  • Поставить тип доступа для сценария использования - вебсайт:

    • На чтение объектов - публичный

    • Доступ к списку объектов - ограниченный

    • Доступ на чтение настроек - ограниченный

  • Выбрать класс хранилища - стандартное. Там чуть дороже хранить данные, но зато дешевле операции управления объектами и чтение.

Загрузить подготовленные файлы веб сайта c помощью Cyberduck#

Подготовка#

  • Создайте сервисный аккаунт.

  • Назначьте нужную роль сервисному аккаунту. Подробнее о ролях см. в документации Identity and Access Management.

  • Создайте статический ключ доступа.

  • Добавьте сервисному аккаунту роли storage.editor, storage.uploader

Установка#

дистрибутив CyberDuck для вашей операционной системы и запустите его. https://cyberduck.io/download/

Подключение#

  1. Запустите CyberDuck.

  2. Нажмите кнопку Open Connection.

  3. Выберите тип подключения — Amazon S3.

  4. Укажите параметры подключения:

  • Server — storage.yandexcloud.net.

  • Port — 443.

  • Access Key ID — идентификатор статического ключа, полученный ранее.

  • Secret Access Key — секретный ключ, полученный ранее.

  1. Нажмите кнопку Connect.

  2. После подключения откроется бакет, созданный ранее. Файлы в бакете можно удалить и залить новые

Детали: https://yandex.cloud/ru/docs/storage/tools/cyberduck

Настройка вебсайта для бакета#

Для работы хостинга необходим публичный доступ к бакету. Иначе при обращении к сайту вернет пользователю ответ с кодом 403.

Загрузить в бакет содержимое сайта и указать главную страницу сайта#

xml
<WebsiteConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <IndexDocument>
      <Suffix>index.html</Suffix>
  </IndexDocument>
  <ErrorDocument>
      <Key>error.html</Key>
  </ErrorDocument>
</WebsiteConfiguration>

В консоли управления

  1. перейдите в бакет, для которого хотите настроить хостинг.

  2. Откройте публичный доступ к операциям с бакетом

  3. Перейдите на вкладку Веб-сайт. В разделе Хостинг:

  • В поле Главная страница укажите абсолютный путь к файлу главной страницы сайта;

  • (опционально) в поле Страница ошибки укажите абсолютный путь к файлу, который будет отображаться при ошибках 4хх. По умолчанию Object Storage возвращает собственную страницу.

  1. Нажмите кнопку Сохранить.

Для переадресации всех запросов.#

Указать хост, на который будут перенаправляться все запросы, а также задать протокол для передачи запросов. Обычно не требуется.

xml
<WebsiteConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <RedirectAllRequestsTo>
      <HostName>gruzdenko.ru</HostName>
      <Protocol>http</Protocol>
  </RedirectAllRequestsTo>
</WebsiteConfiguration>

Для условной переадресации запросов#

Используя правила маршрутизации можно перенаправлять запросы в соответствии с префиксами имен объектов или HTTP-кодами ответов. Можно перенаправить на другую веб-страницу запрос к удаленному объекту или перенаправить запросы, возвращающие ошибку. Как правило нужно для популярных проиндексированных в поисковиках страниц, URL которых изменен. Чтобы пользователи при переходе из поисковика получали доступ к требуемому контенту. В обычных обстоятельствах конфигурация не требуется.

xml
<WebsiteConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <RoutingRules>
    <RoutingRule>
      <Condition>
        <KeyPrefixEquals>temp/</KeyPrefixEquals>
      </Condition>
      <Redirect>
        <ReplaceKeyWith>folderdeleted.html</ReplaceKeyWith>
      </Redirect>
    </RoutingRule>
  </RoutingRules>
</WebsiteConfiguration>

Настроить [хостинг статического сайта](../operations/hosting/setup.md#hosting), [переадресацию всех запросов](../operations/hosting/setup.md#redirects) или [условную переадресацию запросов](../operations/hosting/setup.md#redirects-on-conditions) можно с помощью консоли управления {{ yandex-cloud }}.

Проверка конфигурации#

После настройки бакета для хостинга сайт становится доступен по адресу:

http(s)://<имя_бакета>.website.yandexcloud.net

Включение https#

По умолчанию бакет с точкой в имени доступен только по протоколу HTTP. Чтобы поддержать для бакета протокол HTTPS нужно выписать бесплатный сертификат

  1. В списке сервисов выберите Certificate Manager.

  2. Нажмите кнопку Добавить сертификат.

  3. В открывшемся меню выберите Сертификат от Let’s Encrypt.

  4. В открывшемся окне в поле Имя введите имя сертификата.

  5. (Опционально) В поле Описание введите описание сертификата.

  6. В поле Домены введите список доменов, для которых нужно выпустить сертификат.

Имена доменов могут содержать маску, например *.example.com.
В этом случае при выборе типа проверки прав на домен необходимо будет выбрать DNS.
Подробнее см. в разделе Проверка прав на домен.

  1. Выберите тип проверки прав на домен: DNS или HTTP.

  2. Нажмите кнопку Создать.

В списке сертификатов появится новый сертификат со статусом Validating. Этот статус означает, что запрос на выпуск сертификата от Let’s Encrypt® создан, и для его успешной обработки вам необходимо пройти процедуру проверки прав на домены.

Собственный домен#

Создайте в сервисе Cloud DNS публичную зону DNS и ресурсную запись, которая связывает ваше доменное имя и бакет:

  1. В консоли управления перейти в бакет, для которого хотите использовать собственный домен.

  2. Перейти на вкладку Веб-сайт.

  3. В разделе Хостинг в блоке Домены в Cloud DNS нажмите кнопку Создать запись

  4. В открывшемся окне нажмите кнопку Создать зону и выберите доменную зону, которая соответствует имени бакета, например gruzdenko.ru.

  5. Нажмите кнопку Создать.

  6. Раскройте блок Дополнительные настройки.

  7. В поле TTL (в секундах) укажите время жизни ресурсной записи или выберите из предложенных.

  8. Нажмите кнопку Создать.

Чтобы получить доступ к именам из публичной зоны, делегируйте домен. Для этого в личном кабинете вашего доменного регистратора укажите адреса серверов ns1.yandexcloud.net и ns2.yandexcloud.net.

Делегирование домена и обновление ресурсных записей могут занять некоторое время.

Справочная информация#

https://yandex.cloud/ru/docs/storage/tools/cyberduck https://yandex.cloud/ru/docs/storage/operations/hosting/certificate https://yandex.cloud/ru/docs/storage/operations/hosting/own-domain