Внедрение внешнего микросервиса с 0 (на)

Несколько реализаций интерфейсных микросервисов

Что такое front-end микросервис, вводных много в интернете, не буду многословен, вкратце, это объединение различных подпроектов воедино.

«Внешняя архитектура: от начала до микро-интерфейсов»Как показано в этой книге, архитектура микроинтерфейса обычно может быть реализована следующими способами:

1. Используйте маршрутизацию HTTP-сервера для перенаправления нескольких приложений (так называемые переходы по ссылкам).
2. Разрабатывайте механизмы связи и загрузки поверх различных фреймворков, таких как Mooa и Single-SPA.
3. Создайте единое приложение, объединив несколько независимых приложений и компонентов.
4. фреймы. Использование iFrames и настраиваемых сообщений
5. Создавайте приложения с помощью чистых веб-компонентов
6. Создавайте с помощью веб-компонентов

К числу наиболее распространенных относятсяiframeа такжеsingle-spa, оба из которых имеют свои собственные достоинства.

Плюсы и минусы iframe и single-spa

Плюсы и минусы фреймов

недостаток

1. Проблемы с загрузкой страницы: влияют на загрузку главной страницы, блокировкаonloadСамо событие также загружается очень медленно, а слишком большой кэш страниц приведет к зависанию компьютера.(не может быть решен)

2. Проблема макета:iframeДолжна быть указана заданная высота, иначе он рухнет. Решение: Подсистема вычисляет высоту в режиме реального времени и передаетpostMessageОтправляется на главную страницу, главная страница динамически устанавливает высоту, модифицирует подсистему или вставляет скрипт через прокси. В некоторых случаях появляется несколько полос прокрутки, что не очень удобно для пользователя.

3. Проблема со всплывающим окном и маскирующим слоем: только вiframeДиапазон центрируется по вертикали и горизонтали, но не может быть центрирован по вертикали и горизонтали на всей странице.

   • Решение 1: При синхронизации с сообщением страницы фрейма сообщение всплывающего окна отправляется на главную страницу, а на главной странице всплывает окно, что сильно меняет исходный проект и влияет на использование исходного проекта.
   • Решение 2. Измените стиль всплывающего окна: скройте слой маски и измените положение всплывающего окна. Способ изменить его — вставить стиль css через прокси-сервер.
   • Пополнить:iframeСодержимое внутри не может достичь всплывающего окна (не полного экрана), которое заполняет экран.Это может быть только полный экран в пределах диапазона iframe, а предел, который не может выпрыгнуть из iframe, ограничен полным экраном основного странице, но это бывает редко.

4. Проблемы браузера вперед/назад:iframeДелитесь историей посещений с главной страницей,iframeЭто повлияет на перемотку страницы вперед и назад, что в большинстве случаев нормально.iframeМножественные перенаправления приведут к тому, что функции браузера вперед и назад не будут работать должным образом, не все страницы будут отображаться, и их можно игнорировать. ноiframeОбновление страницы будет сброшено (например, переход со страницы списка на страницу сведений, а затем обновление приведет к возврату на страницу списка), поскольку адресная строка браузера не изменилась.

5. iframeСтраница переходит на другие страницы Проблемы, такие как дваiframeпрыгать между собой, прямой прыжок будет только вiframeПрыгайте в рамках, поэтому вы должны прыгать через главную страницу. ноiframeПрыжок редко

6. Связь между системами из разных источников должна проходить черезpostMessage, есть определенная безопасность

преимущество

1. полностью изолированcssа такжеjs, что позволяет избежать стилей иjsЗагрязнение
2. Может быть встроен в подсистему вообще без ее модификации

Плюсы и минусы одиночного спа

недостаток

1. cssа такжеjsТехнические характеристики должны быть разработаны для изоляции. В противном случае легко вызвать глобальное загрязнение, особенноvueГлобальный компонент, глобальный хук.
2. Требуется модификация подсистемы. Однако это не влияет на самостоятельную разработку и развертывание подсистемы.В части маршрутизации есть некоторые изменения в подсистеме, но на функции это не влияет.

преимущество

1. Быстрая загрузка, вы можете извлекать модули, общие для всех систем, и реализовывать загрузку по требованию, однократную загрузку и другое повторное использование.
2. Измените стиль подсистемы без необходимости прокси-сервера, измените его напрямую, потому что он принадлежит к одному и тому жеdocument.
3. Пользовательский интерфейс хороший и быстрый, а изменения контента не требуют перезагрузки всей страницы, что позволяет избежать ненужных переходов и повторного рендеринга.
4. httpМеньше запросов и меньше нагрузки на сервер.

сравнение single-spa и iframe

Контраст	single-spa	iframe	Пополнить
скорость загрузки	single-spa может извлекать vue/vuex/vue-router и другие файлы, совместно используемые всеми системами, загружать их только один раз, повторно использовать каждую систему и быстро загружать, но должен обеспечивать унификацию версий файлов.	iframe будет занимать http-канал основной системы, влияя на загрузку основной системы, а скорость загрузки очень низкая.	Оба могут в определенной степени повысить скорость загрузки за счет http-кэширования, но CDN нельзя использовать для обычных файлов, таких как vue, поскольку внутренняя система может не иметь доступа к внешней сети.
совместимость	single-spa подходит только для систем, написанных на vue, react и angular, и ничего не может сделать для некоторых старых систем, написанных на jq.	iframes могут быть встроены в любую страницу
Технические трудности	SINGLE-SPA требует определенного технического задела, есть некоторые затраты на обучение	Порог iframe очень низкий, дополнительное обучение не требуется
ограничение	single-spa может быть встроен в любую часть	iframe может быть встроен только в страницу, конечно, компонент также может быть написан как отдельная страница
Стоимость модернизации	подсистемы single-spa должны быть преобразованы, но не намного больше преобразования контента, и полтора часа на выполнение	Iframe может быть изменен в исходной системе, но должен быть вставлен с прокси-сервером и CSS, добавление прокси-сервера также увеличивает нестабильность системы (любой из двух серверов приведет к недоступности системы), сервер Это тоже требует затрат. Если исходная система трансформируется, рабочая нагрузка и SINGLE-SPA вполне	Если исходный файл проекта отсутствует или какая-либо другая ситуация, когда исходный файл не может быть изменен, можно использовать только iframe

Пополнить:

1. дляSEO,iframeне может быть решена, ноsingle-spaРешение есть (гугл может поддерживать одностраничные приложенияSEO, Байду нужноSSR), но внутренняя система, потребность в SEO меньше.
2. iframeЕсть риски безопасности, дваiframeСтраницы, ссылающиеся друг на друга, приведут к бесконечной вложенности.bug, это приведет к зависанию страницы, и в настоящее время ее можно проверить только через прокси-сервер.iframeсодержимое страницы для обработки
3. Страницы могут передавать некоторый код и не позволяют себяiframeвстроенный. В этом случае вы можете выбрать только другие решения, которые настроили Taobao, Jingdong, Tencent и др. Код выглядит следующим образом:

if(window.top !== window.self){ window.top.location = window.location;}

Реализация и простой принцип IFrame и Single-Spa

фреймы просты, это делает один тег. single-spa относительно незнаком, я буду вдаваться в подробности.

Предварительное исследование одноместного спа

кvueНапример,vue-cli4Сгенерированный проект упаковывается и генерируетсяindex.htmlСодержимое файла выглядит следующим образом (упрощено нерелевантное содержимое):

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <title>my-app</title>
  <link href=/js/about.6b1cbb89.js rel=prefetch>
  <link href=/css/app.c8c4d97c.css rel=preload as=style>
  <link href=/js/app.6a6f1dda.js rel=preload as=script>
  <link href=/js/chunk-vendors.164d8230.js rel=preload as=script>
  <link href=/css/app.c8c4d97c.css rel=stylesheet>
</head>
<body>
  <noscript>
    <strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id=app></div>
  <script src=/js/chunk-vendors.164d8230.js> </script>
  <script src=/js/app.6a6f1dda.js> </script>
</body>
</html>

Основная часть:

<link href=/css/app.c8c4d97c.css rel=stylesheet>
<div id=app></div>
<script src=/js/chunk-vendors.164d8230.js> </script>
<script src=/js/app.6a6f1dda.js> </script> 

Гипотеза: можно ли использоватьnodeсервер, подсистемаindex.htmlполучить, а потом читатьHTML, получить эти теги, вернуть их в основную систему, и основная система напрямую вставит их вbody, можно представить подсистемы?

nodeРеализация прокси-кода, операцияDOMиспользуетcheerioПлагин:

const http = require('http')
// 引入cheerio模块
const cheerio = require('cheerio')
const axios = require('axios')
const server = http.createServer(function (request, response) {
  //请求子系统服务器，获取到index.html文件
  axios.get('http://localhost/').then(res => {
    response.writeHead(200, { 
      'Content-Type': 'application/xml' ,
      'Access-Control-Allow-Origin': '*'
    })
    // 加载HTML字符串
    const $ = cheerio.load(res.data)
    $('link').each(function () {
      $(this).attr('href', 'http://localhost' + $(this).attr('href'))
    })
    $('script').each(function () {
      $(this).attr('src', 'http://localhost' + $(this).attr('src'))
    })
    const resp = $('body').prepend($('link[rel=stylesheet]')).html();
    response.end(resp)
  }).catch(e => {
    console.log(e)
  })
})
server.listen(8080)

нужно знать, это:

1. импортировать сюдаjs/cssВсе пути к файлам являются относительными путями, и вам необходимо ввести префикс подпроекта.
2. v-htmlвставленDOMФрагмент, внешняя ссылкаscriptОн не вступит в силу и должен быть вставлен вручную.

В результате получается основная система#appПодсистемы могут быть визуализированы внутри, но#appдинамически генерируется внутриHTML,img/video/audioПути других файлов являются относительными, поэтому они будут запрошены в основной системе, но этих файлов нет в основной системе, поэтому они будут 404. Аналогично, страница маршрутизации, загружаемая по запросу, соответствуетjs/cssФайл также является относительным путем и будет запрашивать ошибку.Если маршрут не загружен на спрос, эта проблема не существует

Вывод: эффекта микросервисов можно добиться, но нужно решить проблему относительных путей к файлам.index.htmlвнутриlink/scriptЕго также можно добавить вручную, но он генерируется динамически.htmlвнутриimg/video/audioд., а также соответствующую загрузку страницы маршрутизации по запросуjs/cssЭто не может быть разрешено через прокси-сервер.

Решения:

1. здесьjs/css/img/videoи т. д. - все относительные пути, можете ли вы пройтиwebpackУпаковать, упаковать все эти пути в абсолютные пути? Это решает проблему сбоев файловых запросов.

2. Может ли это быть как CDN, если один сервер не работает, он пойдет на другие серверы для запроса соответствующих файлов. Другими словами, для обмена файлами между серверами, если запрос файла в основной системе не удается, он автоматически найдет его на подчиненном сервере и вернет его.

3. Можно ли это сделать вручную (или с помощьюnode) скопировать все файлы подсистемы на главный сервер проекта,nodeКогда файл подсистемы мониторинга будет обновлен, он будет автоматически скопирован, и нажмитеjs/css/imgслияние папок

чек об оплатеwebpackа такжеvue-cli3После официального сайта нашел:

по умолчанию,Vue CLIбудет предполагать, что ваше приложение развернуто на корневом пути доменного имени, например.https://www.my-app.com/. Если приложение развернуто на подпутиhttps://www.my-app.com/my-app/, и вы используете маршрутизацию в режиме истории для URL:https://www.my-app.com/my-app/page1, vue не может различитьmy-appнастоящий путь иpage1Это параметр маршрутизации, который необходимо установить в данный момент.publicPathдля/my-app/, Vue может правильно запрашивать файловые ресурсы и сопоставлять маршруты.

Здесь может бытьvue-cli3изpublicPathУстановить какhttps://www.my-app.com/my-app/, а затем внутри кодаjs/css/img/videoПуть станет абсолютным путем, префиксhttps://www.my-app.com/my-app/, это решаетurlпроблема пути.

Это дает возможность простогоsingle-spaприменено, но загруженоVueПодсистема не будет удалена при переходе на следующую систему, слишком много подсистем вызовут отставание иcss/jsВозможность загрязнения увеличивается, а практичность невелика.

наконец

Если в статье есть вопросы или ошибки, комментарии приветствуются. Следующая статья:Внедрение внешнего микросервиса single-spa с 0 (средний уровень), включая полный процесс упаковки/разработки и отладки, как преобразовать старые проекты и т. д.