Загрузка ресурсов, сопровождающих Javascript, из удаленного местоположения - PullRequest
Новая
       10

Загрузка ресурсов, сопровождающих Javascript, из удаленного местоположения

0 голосов
/ 30 января 2019

У нас работает 2 сервера.Сервер 1 содержит приложение реакции.На сервере 2 размещается веб-компонент, представленный в виде отдельного пакета JavaScript, а также некоторые ресурсы, такие как изображенияМы динамически загружаем веб-компонент Javascript, размещенный на сервере 2, в наше приложение реакции, размещенное на сервере 1. Тот факт, что это веб-компонент, может или не может повлиять на проблему.

То, что происходит, заключается в том, что веб-компонент использует ресурсы, такие как изображения, расположенные на сервере 2. Но когда приложение реагирует на загрузку веб-компонента, изображения не обнаруживаются, так как он ищет изображения локально на сервере 1..

Мы можем это исправить разными способами.Я ищу самое простое решение.Поскольку приложения Сервера 1 и Сервера 2 разрабатываются разными командами, обе должны иметь возможность разрабатывать наиболее естественным образом, не допуская возможной загрузки их приложений другими приложениями.

Исправления, о которых я мог подумать:

  1. Использование абсолютных URL-адресов для загрузки ресурсов - Необходимо заранее знать местоположение развертывания.
  2. Добавление обратного прокси-сервера на сервер 1 для перенаправления на сервер 2 при каждом попадании в конкретный путь - необходимо настроить это.Приложение React может загружать сотни веб-компонентов, то есть нам нужно добавить множество обратных прокси.
  3. Внедрите все ресурсы в один javascript на сервере 2, например, вставьте svgs в javascript.- Слишком ограниченно.Если SVG огромны и увеличат размер связки.

Я надеялся реализовать что-то вроде -
Так как приложение реагирования знает, где попасть на Сервер 2, мы не можем написать какой-нибудь умный javascript, который заставит браузер перейти на Сервер 2 всякий раз, когда ресурсызапрашиваются Javascript, загруженным сервером 2.

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Если вы загружаете свой веб-компонент с помощью классического сценария (<script> со значением по умолчанию type="text/javascript"), вы можете получить URL загруженного файла с помощью document.currentScript.src.

Если вы загружаете файл в виде модуля скрипта (<script> с type="module"), вы можете получить URL, используя import.meta.url.

Затем проанализируйте свойство, чтобы извлечь базовый путь к веб-компоненту.

Пример файла Javascript веб-компонента: 

( function ( path ) {
    var base = path.slice( 0, path.lastIndexOf( '/' ) )

    customElements.define( 'my-comp', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${base}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url )
0 голосов
/ 30 января 2019

Как насчет загрузки всех необходимых ресурсов в третье местоположение, или, может быть, в корзину AWS S3, Google Drive, Dropbox и т. Д.?Таким образом, эти ресурсы всегда имеют уникальный, известный URL, и обе команды могут получить к ним доступ независимо.До тех пор, пока имена остаются прежними, будут и URL-адреса.

...