Привет друзья, я давно не писал статьи, в этот раз я поделюсь некоторыми оптимизациями архитектуры интерфейса, так как мы использовали node.
Если вы читали мою последнюю статьюПередний конец станции BМои друзья могут знать, что мы используем узел с прошлого года, и он прошел год итерации, и количество посещений увеличилось с одного миллиона до текущего миллиарда. Давайте на этот раз добавим немного галантереи~
Как vue реализует горячее обновление
Все мы знаем, что для ноды ритм итерации внешнего кода vue очень быстрый, он может повторяться несколько раз в неделю, но итерация ноды не такая обычная, она может обновляться раз в неделю или даже дольше. , поэтому для стабильности службы узлов очень полезно уменьшить количество выпусков служб узлов.
Центр конфигурации определенно необходим, потому что необходимо уведомить службу узла, чтобы обновить номер версии в службе, настроив разные номера версий ресурсов.
Итак, как нам преобразовать наш код vue для получения горячих обновлений?
Давайте посмотрим на пример, приведенный официальным vue. Следующий код — это два фрагмента кода, которые я перехватилОфициальный случай: Сначала он определяет метод createRenderer Он вызывает функцию рендеринга, созданную методом createBundleRender vue-ssr.
Затем передается три файла: template.html bundle.json и clientmanifest.json.Здесь вы можете видеть, что пакет clientMainfest передается, когда требуется createRender.
Тогда некоторые студенты подумают: я хочу поддерживать горячее обновление, должен ли я регулярно очищать кеш в соответствии с механизмом кеша require? Хотя это можно сделать, это не обязательно
Я проверил официальную документацию по API, на самом деле пакет поддерживает три параметра.Затем посмотрите на исходный код Vue, Если передается абсолютный путь, как в приведенном выше случае, что вы сделали, когда вам требуется файл bundle.json в каталоге distОн считает, что если это путь к файлу js или json, то он сначала прочитает файл, затем преобразует его в объект через json, а затем перейдет к следующему решению, чтобы определить, является ли это объектной логикой.
Ну, разве мы не можем сделать это для него?
Мы можем прочитать файл пакета с удаленного компьютера, затем преобразовать его в пакет и передать методу createBundleRender, чтобы мы могли получить его без использования метода require.
Затем добавьте номер версии в файл удаленного пакета, вы можете добиться горячего обновления через конфигурацию.
Проект vue отделен от проекта узла
Чтобы разделить интерфейс и серверную часть, мы построили уровень узла между интерфейсом и слоем API, который используется для рендеринга на стороне сервера, чтобы ускорить доступность первого экрана для пользователей и быть дружелюбным к поисковым системам. Проект изначально помещается в один и тот же репозиторий git, в каталог клиента и каталог сервера соответственно (или аналогично официальному примеру vue, служба узла может иметь только один server.js. Поскольку серверу могут потребоваться некоторые ресурсы в клиенте , поэтому их приходится ставить вместе. Позже, после того, как их прогонит центр конфигурации, клиент и сервер могут быть полностью независимы, а соединение может быть установлено через центр конфигурации. Следовательно, клиентский проект и серверный проект могут быть полностью разделены.
По сути, во фронтенд-проекте фронтенд и бэкенд снова разделены, причина этого разделения несколько отличается от разделения API-интерфейсов фронтенда и бэкенда. На этот раз это связано с тем, что первый интерфейсный проект Vue является полностью независимым проектом, перетаскивание серверного проекта не так гибко, Точно так же сервер содержит клиент, хотя он может быть выпущен независимо, но из-за разных итерационных циклов, в Ветка управления всегда немного закручена, она просто обособлена, и у каждой своя
Каждый из них прекрасен, но как они могут отличаться при разработке?(f***~), при разработке я должен следовать логике рендеринга на стороне сервера.Вы дали мне сначала разработать на основе клиента.И затем сотрудничать с узлом для отладки волны? Это не увеличивает затраты на разработку.
Есть ли какая-то логика, которая позволяет клиенту запускать ssr самостоятельно, а затем, наконец, просто нужно сотрудничать с официальной службой узла через центр конфигурации?
Да, не лучше ли было бы настроить простой сервис для клиента? Разве общий nodessr не такой?.. Грубо говоря, как я уже говорил выше, это sever.js. Внутри простой сервис, основанный на koa, плюс промежуточное ПО koawepack.(koa-webpack), используемый для горячей загрузки во время разработки.
Затем используйте разные сценарии запуска, чтобы настроить различные параметры переменных среды, чтобы начать разработку разных страниц, таким образом, разработка будет намного удобнее, npm run start:home — это домашняя страница разработки, npm run start:video — это разработка Добавление параметра сервера в конец страницы воспроизведения предназначен для разработки рендеринга на стороне сервера.Например, npm run start:home:server
(Здесь я даю только идею~ В конкретной реализации слишком много вещей, о которых нужно говорить, я не хочу здесь писать >_>~~)
аварийное восстановление
Поскольку это служба узла, для службы также должен быть соответствующий план аварийного восстановления, иначе как можно доверять ей большой трафик?
Затем нам нужен план перехода на более раннюю версию на случай чрезвычайных ситуаций (следующий контент должен основываться на ваших знаниях vuessr)
Во-первых, серверный рендеринг vue имеет два файла входа: entryclient.js и entryserver.js.
Теперь index.temlate.html добавляет контейнер рендеринга на стороне клиента, div с именем de-app ( является заполнителем для рендеринга на стороне сервера)
Затем заглянем внутрь entryclient.jsЭто используется для синхронизации данных сервера с клиентским хранилищем.Затем, если вы переходите на клиентский рендеринг, вам нужно сделать здесь некоторую совместимость.Наш рендеринг на стороне сервера по умолчанию должен иметь window.__INITIAL_STATE__. Если это не указывает на то, что сервер не помог нам получить данные, то есть понижен до рендеринга на стороне клиента, нам нужно повторно запустить следующий метод asyncData для получить данные от клиента, а затем смонтировать их. Перейдите к нашему предустановленному деприложению, конечно, мы должны сделать вывод об оригинале, смонтированном в приложении.Таким образом, если сервер не отображает содержимое, страница все равно может быть отображена клиентом, снова пройти логику и вывести страницу в обычном режиме.
Код vue был изменен. Когда мы собираем, нам также нужно упаковать наш html для двух целей. Первая — это чистый HTML-шаблон (template.html). представленный, который используется в качестве шаблона для рендеринга на стороне сервера (то есть передается в createBundleRender, как упоминалось выше), а другой пакет представляет сконструированный js css (degrage.html), который может быть непосредственно отображен на стороне клиента. используется шаблон (то есть, используя htmlwebpackplugin дважды, один передает куски, а другой не передает)Итак, как конкретно использовать эти два файла?
Мы готовы к трем уровням деэскалации
1. Прежде всего, на сервисе узла я настроил сервис, чтобы отслеживать, превышает ли использование процессора всех процессов узла установленный порог, если он превышает установленный порог, то возвращаюсь к подготовленному нами файлу degrade.html заранее перейти на более раннюю версию. Отказ от рендеринга на стороне сервера может значительно снизить нагрузку на серверную рендеринг. Конечно, вы также можете вручную указать, нужно ли вам переходить на более раннюю версию. Вы можете свободно приходить и уходить.
2. Если Node взорвется к сожалению, то нужно делать настройку на слое slb, то есть nginx.Если сервис вернул код 5xx, то направить трафик на наш опубликованный degrade.html
3. Если очень прискорбно и все лопается, то если страница настроена с cdn cache, то cdn возврат к первоисточнику не проходит, и возвращается страница на предыдущем кеше. Затем, в крайних случаях, пользователю все равно будет отображаться первая экранная страница (нижняя строка данных сделает это решение более совершенным, и я сделаю это в следующий раз, когда у меня будет шанс) На этом пока все, возможно добавлю другие оптимизации иreactнекоторые из черных технологий~