Архитектурный центр

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

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

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

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

В списке сервисов выберите Object Storage Service.
В правом верхнем углу нажмите Create Bucket.
В поле Data Redundancy Policy выберите Single-AZ Storage. Для практической работы не требуется высокая доступность.
В поле Bucket Name задайте название бакета.
В поле Storage Class выберите Standard.
В поле Bucket Policy выберите Public Read и нажмите Continue.
В поле Default Encryption выберите Disable.
Нажмите Create Now.

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

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

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

Нажмите на название созданного бакета.
В левом меню перейдите в раздел Basic Configurations → Static Website Hosting.
Нажмите Configure Static Website Hosting.
Активируйте переключатель Status.
В поле Hosting By выберите Current Bucket.
В поле Home Page введите index.html.
Нажмите OK.

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

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

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

Скачайте и распакуйте архив с файлами сайта.
Откройте файл settings.json.
В поле api_url введите URL, по которому доступны API.
Сохраните изменения в файле.
Откройте ранее созданный бакет и перейдите в раздел Objects в меню слева.
Нажмите Upload Object.
В поле Object Permission выберите Public Read.
Перетащите содержимое каталога react-js-spa в форму загрузки OBS.
Нажмите Upload.

Примечание
Если у вас возникли проблемы во время загрузки файлов сайта, воспользуйтесь OBS Browser.
Перейдите в раздел Basic Configurations → Static Website Hosting.
Перейдите по адресу, который указан в поле Hosted Website URL.
Проверьте добавление, отображение и удаление записей на сайте.

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

Была ли статья полезной ?

Предыдущая статья

Тестирование API

Следующая статья

Защита сайта и API