Itsa-react-server — это MVC-фреймворк для создания одностраничных приложений (SPA) с рендерингом на стороне сервера с помощью React.js. Если вы пропустили: см. здесь.

Эта статья о том, как настроить сеть доставки контента (CDN) с веб-приложением itsa-react-server.

Исходная информация

Itsa-react-server использует несколько файлов во время выполнения. Некоторые из них являются статическими, некоторые создаются динамически, а некоторые являются статическими, но на них должен отвечать сам сервер itsa-react-server.

Многие статические файлы можно обслуживать с другого сервера, например CDN. На самом деле это предпочтительнее: itsa-react-server работает на nodejs, который просто не подходит для обслуживания статических файлов. Выбрав CDN, ваш сервер не только избавится от этого бремени: ваши клиенты также получат возможность запрашивать данные с другого домена. Это обходит ограничение максимум 4 одновременных запросов на домен, которое есть во многих браузерах.

Как выбрать CDN

Выбор, на какой CDN хранить ваши статические файлы, полностью зависит от вас. Здесь вы найдете информацию, которая может помочь вам выбрать правильный CDN.

На его сервере реагирования уже есть код для автоматической интеграции с Amazon S3. Вы можете выбрать другой CDN, но это требует от вас самостоятельного создания дополнительного кода (подробнее об этом позже).

Как определить свой CDN с помощью itsa-react-server

Определить/настроить CDN с помощью itsa-react-server очень просто: вы просто сообщаете manifest.json, что используете CDN:

Пример manifest.json с

Примечание: в локальной среде, предназначенной для локальной разработки, cdn почти никогда не требуется. Этот манифест отключил его.

После включения itsa-react-server позаботится об изменении URL-адресов всех статических файлов, которые можно обслуживать из CDN!

Осталось только: вам нужно загрузить эти статические файлы в нужное место на CDN, а также очистить неиспользуемые файлы CDN. Itsa-react-server имеет для этого подходящие сценарии.

CDN: автоматическая загрузка и очистка

Itsa-react-server точно знает, какие файлы загружать на ваш cdn (имя и местоположение). В конце концов: он должен совпадать со статическими URL-адресами, сгенерированными фреймворком.

Для автоматизации itsa-react-server имеет процедуру загрузки файлов в CDN и очистки неиспользуемых файлов.

Процедура загрузки файлов

Начать загрузку

Чтобы начать загрузку, вам нужно всего лишь выполнить команду:

npm run cdn

Примечание. npm run start также запускает скрипт загрузки cdn.

Сценарий загрузки

Сценарий загрузки будет выполняться всякий раз, когда вызывается npm run cdn . Сценарий загрузки представляет собой файл: cdn-deploy.js, который находится в корне вашего проекта. Это содержимое файла по умолчанию:

Примечание 1. Файл cdn-deploy оптимизирован для использования с Amazon S3. Если вы выберете другой CDN, обязательно измените: uploadS3.uploadFiles(cdnConfig, files);
 Это должна быть ваша собственная функция, которая загружает файлы и должна возвращать Promise, когда она готова.

Примечание 2. Поскольку manifest.json его свойство cdn доступно в cdnConfig, вы можете напрямую добавлять собственные свойства cdn. в манифест.json.

Процедура удаления неиспользуемых файлов

Очистка

Сценарий очистки будет активирован, как только запустится ваше веб-приложение. Предположим, что вы установили это в manifest.json со свойством cdn.cleanupPrevious. В нашем примере manifest.json его значение равно true.

Настоятельно рекомендуется использовать очистку. Приложение будет работать нормально, и вы предотвратите увеличение CDN из-за неиспользуемых файлов. Единственная ситуация, когда вы не хотите выполнять очистку, — это когда вы запускаете несколько веб-приложений в разных версиях на разных серверах.

Сценарий очистки

Сценарий очистки — это файл cdn-cleanup.js, который находится в корне вашего проекта. Это содержимое файла по умолчанию:

Примечание. Файл cdn-cleanup оптимизирован для использования с Amazon S3. Если вы выберете другой CDN, обязательно измените: uploadS3.cleanupFiles(cdnConfig, files);
 Это должна быть ваша собственная функция, которая загружает файлы и должна возвращать Promise, когда она готова.

Его-реактивный-сервер делает CDN одноразовой установкой. После настройки вам не нужно беспокоиться о его использовании: он просто работает! Кроме того, вы всегда можете отключить cdn, установив для свойства cdn.enabled в manifest.json значение false.

В следующей статье я расскажу обо всех возможностях manifest.json.