Публикация статического веб-сайта для работы с API

Когда все функции опубликованы и протестированы, можно создать веб-сайт, который будет работать с API. В рамках практической работы будет создано простое одностраничное приложение. Оно будет размещено в OBS с использованием функции «Static Website Hosting».

Создание бакета

Создайте бакет, который будет использоваться для хостинга сайта:

  1. В списке сервисов выберите Object Storage Service.

  2. В правом верхнем углу нажмите Create Bucket.

  3. В поле Data Redundancy Policy выберите Single-AZ Storage. Для практической работы не требуется высокая доступность.

  4. В поле Bucket Name задайте название бакета.

  5. В поле Storage Class выберите Standard.

  6. В поле Bucket Policy выберите Public Read и нажмите Continue.

  7. В поле Default Encryption выберите Disable.

  8. Нажмите Create Now.

Бакет создан.

Настройка бакета

Настройте бакет для хостинга веб-сайта:

  1. Нажмите на название созданного бакета.

  2. В левом меню перейдите в раздел Basic Configurations → Static Website Hosting.

  3. Нажмите Configure Static Website Hosting.

  4. Активируйте переключатель Status.

  5. В поле Hosting By выберите Current Bucket.

  6. В поле Home Page введите index.html.

  7. Нажмите OK.

Бакет готов к публикации сайта. В поле Hosted Website URL можно найти URL, по которому будет доступен сайт.

Публикация сайта

Чтобы опубликовать сайт в OBS:

  1. Скачайте и распакуйте архив с файлами сайта.

  2. Откройте файл settings.json.

  3. В поле api_url введите URL, по которому доступны API.

  4. Сохраните изменения в файле.

  5. Откройте ранее созданный бакет и перейдите в раздел Objects в меню слева.

  6. Нажмите Upload Object.

  7. В поле Object Permission выберите Public Read.

  8. Перетащите содержимое каталога react-js-spa в форму загрузки OBS.

  9. Нажмите Upload.

    Примечание

    Если у вас возникли проблемы во время загрузки файлов сайта, воспользуйтесь OBS Browser.

  10. Перейдите в раздел Basic Configurations → Static Website Hosting.

  11. Перейдите по адресу, который указан в поле Hosted Website URL.

  12. Проверьте добавление, отображение и удаление записей на сайте.

Сайт опубликован. Следующий шаг — защита сайта и API.

Запустили Evolution free tier
для Dev & Test
Получить