2017 год подходит к концу, подведем итоги продвижения фронтенда станции B
В предыдущей модели разработки мы приняли внутреннюю архитектуру MVC. Конкретно, после каждого обзора проекта фронтенд и бэкенд сначала согласовывают интерфейс, а затем разрабатывают отдельно.После разработки фронтенд должен предоставить страницу бэкенду, настроить данные на серверной части, а затем вернуть его. Формально исходя из этой модели разработки общая рабочая нагрузка увеличилась, а стоимость связи и совместной отладки также весьма значительна.
Разделение передней и задней части
Чтобы избавиться от этой чрезмерной зависимости от внешнего и внутреннего интерфейса (фактически, внешний интерфейс не хочет публиковать каждую модификацию или выпуск на внутренней стороне, а серверная часть делает это). не хочется каждый раз при публикации фронтенда менять только заголовок, что повлияет на стабильность работы сервиса.секс), тогда начнем с разделения фронтенда и бекенда~
Разделение интерфейса и сервера, два основных режима, с промежуточным слоем и без него.
Первый очень простой, без промежуточного веб-слоя. Предоставьте HTML-шаблон и поместите его на компьютер со статическими ресурсами. HTML-шаблон ссылается на необходимые js и css. , При доступе к странице верните этот статический шаблон пользователю, а затем выполните js, чтобы получить данные через API запроса ajax на стороне браузера и отобразить страницу.
Второй уровень — это средний уровень узла. С появлением узла в 2009 году внешний интерфейс постепенно вытесняется внутренним. С узлом JavaScript может делать больше вещей.
Станция B, когда передняя и задняя части были разделены в начале, следовала первому методу, и некоторые страницы все еще находятся в этом режиме, например:woohoo.proportion.com/account/his…(Просмотреть исходный код веб-страницы). Это хороший способ для страниц, которые не нуждаются в SEO. После завершения фронтенд-разработки соответствующие js и css упаковываются webpack и загружаются на cdn, а затем на специальную статическую машину загружаются html-файлы, которые ссылаются на соответствующие ресурсы, упакованные webpack, после чего выполняется операция и маршруты конфигурации обслуживания используются для загрузки страницы. Студентам, работающим с серверной частью, нужно только предоставить соответствующий интерфейс API. Передняя и задняя части поддерживаются отдельно, и они работают в своем собственном темпе, уменьшая связь между страницами и службами.
Этот метод действительно является методом, который может быстро разделить переднюю и заднюю части. Нам потребовалось некоторое время, чтобы провести рефакторинг с использованием vue на стороне ПК и отреагировать на мобильной стороне H5. Рефакторинг. Прогресс идет быстро, но недостатки постепенно проявляются.
Когда отображается первый экран, поскольку ему нужно дождаться завершения загрузки ресурса перед рендерингом, это вызовет белый экран на первом экране.Если это одна страница, все в порядке.Если это спа-приложение, его время загрузки станет очень долгим.Время белого экрана сильно повлияет на пользовательский опыт, а поскольку отечественные поисковые компании не очень совместимы со спа-приложениями, рендеринг на стороне клиента будет очень недружественным к сео, а страницы с сео нуждаются в срочном обслуживании боковой рендеринг.
Затем на повестку дня ставится использование узла для рендеринга на стороне сервера.
Выбор
Во-первых, выберите фреймворк node.На рынке есть три основных фреймворка, hapi express koa и некоторые инкапсулированные и настраиваемые фреймворки, такие как eggjs и т. д.
Я исключил eggjs с самого начала, сначала Потому что eggjs очень мощный и имеет множество функций, некоторые из которых вообще не нужны, что делает его тяжелым или не легким.Во-вторых, eggjs для меня черный ящик.Если возникнет какая-то проблема, я ее решу. долгое время. (Но есть много мест, где я до сих пор заимствую eggjs, в конце концов, он очень мощный)
Остальные три фреймворка, экспресс, относительно просты в использовании и содержат больше документов. Он более полный, поэтому я выбрал экспресс (позже рефакторинг ==!)
Затем следует выбор интерфейсных фреймворков.Поскольку существует множество основных интерфейсных фреймворков, ng rv и т. д., я использую React и Vue. У них есть преимущество в том, что они могут выполнять внешний и внутренний изоморфизм. , и одну и ту же логику дважды писать не нужно.
Из-за разделения передней и задней частей ПК Вышеупомянутое было рефакторингом с помощью vue, поэтому, естественно, этот рендеринг на стороне сервера также построен на vue и использует vue ssr (это также проложило путь для моей более поздней идеи)
Во-первых, давайте выберем простую страницу для проверки, просто используйте страницу тегов (дети, избранные Богом:www.bilibili.com/tag/3503159)
развивать
Структура каталогов
-
клиент [изоморфный код клиентского кода]
-
построить [связанный со сборкой]
-
ПК [проект vue на стороне ПК]
-
package.json
-
config
-
config.local.js [локальная конфигурация разработки]
-
dist [каталог сборки каталога ресурсов]
-
сервер [код сервера]
-
контроллер [контролер]
-
PC
-
route.js
-
ядро [база основного кода]
-
служба [библиотека методов]
-
посмотреть [посмотреть]
-
ПК [файл после сборки vue]
-
tag.html [шаблон сборки]
-
tag.json [комплект сборки]
-
manifest.json
-
apps.js [запуск]
В начале проектирования клиентский код и серверный код размещаются в одной git-библиотеке, а клиент — это код vue и логика упаковки webpack. Сервер — это код на стороне сервера, использующий структуру, подобную MVC.
Код разработки Vue в клиенте основан на официальном примере, предоставленном Vue ssr, с использованием метода createBundleRender.
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, {
... })
Конфигурация сборки также является рекомендуемой конфигурацией для использования (ссылка:Birthday.v ue js.org/this/build-co…)
Проще говоря, он предоставляет две записи: одна entry-client.js, которая в основном является записью выполнения клиента, packaged — это коллекция эталонного кода клиента (манифест), а другая — entry-server.js packaged — это service Логика работы терминала интегрирована в bundle.json. Затем передайте его методу createBundleRender выше.
Логика в папке сервера очень проста.Ядром является логика некой экспресс-регистрации кода ядра, которая запускает проект.Стоит отметить, что маршрутизация здесь опирается на метод регистрации маршрутизации eggjs, и немного делает немного модификация, используя метод конфигурации
Здесь тоже есть фильтр, по сути, перед выполнением контроллера зарегистрируйтесь в мидлваре и сначала выполните его (на самом деле здесь есть некоторые ограничения, и постобработку делать нельзя)
Здесь я проигнорировал стресс-тест, стресс-тесты позади меня говорят
Онлайн-развертывание
Docker используется для онлайн-развертывания Для развертывания конфигурация представляет собой конфигурацию 1С 4G, а для запуска используются два экземпляра (логика предыдущего построения зеркала подробно не представлена)
После выхода в интернет ежедневный трафик составляет около 100Вт, а работа сервиса достаточно стабильна, в этот период произошел баг, то есть здесь есть статус, который связан со статусом входа пользователя, поэтому когда сервер запрашивает интерфейс, вам нужно принести файл cookie для запроса, я забыл добавить его позже, я обнаружил, что это немного хлопотно
Его нужно привести в контекст при вызове vuesssr, а потом передать послойно в методе asyncData, и наконец получить в экшене и вывести на апи
В это время давайте снова посмотрим на тег Страница
(Да, я привез все данные с собой)
рефакторинг
На самом деле это не заняло много времени, месяца три, версия ноды выросла очень быстро, после версии 7.6 нода поддерживает async/await. Синтаксический сахар, больше не нужно использовать функции yield и *, тогда, несомненно, koa — лучшая поддержка для await/async, мы решительно отказались от экспресса и выбрали koa2 для рефакторинга
На самом деле дело не только в поддержке koa2 для асинхронности, а еще в том, что наш koa - метод выполнения в стиле onion, который решает то, что я сказал выше, только предобработка контроллера, никакой постобработки, поэтому мне может быть очень удобно выполнять пре- и постобработку. Эффективность исполнения Koa также выше, чем у экспресса.
Как я сказал выше, выбор vue является предвестником последующего рефакторинга, который здесь
Первым делом я подключил к проекту центр конфигурации, для чего нужен центр конфигурации? Он используется для записи номера версии скрипта, чтобы я мог легко контролировать, какую версию скрипта использует интерфейсная страница, через центр конфигурации. Вместо того, чтобы выполнять перезапуск и обновление службы, поскольку номер версии скрипта был изменен.
Затем я внес волшебные изменения в компоненты упаковки vue и упаковал файлы, которые он упаковал. Принесите соответствующий номер версии (номер версии — это хеш-значение)
Таким образом, я могу управлять им через центр конфигурации.Какую версию продуктов сборки vue мне нужно использовать, и логика интерфейса vue обновлена. Мне нужно только раздать его на сервер через центр конфигурации без перезапуск службы. Убить двух зайцев.
Национальная ССР
После завершения рефакторинга попробуйте подключиться к другому проекту.
Домой, ладно, только домой
Домашняя страница и страница тегов По сути, они почти одинаковые, ничего особенного в них нет, разница лишь в том, что объем относительно большой, а посещений может быть около десятков миллионов в день. Затем мы добавляем слой кеша поверх CDN, а затем добавляем слой кеша поверх нашего сервиса. Идеально! ~
Кэш на стороне сервера идет от файлового лендинга, то есть когда приходит первый запрос, после завершения рендеринга в локал записывается файл, а потом при следующем посещении можно напрямую использовать это для выкинуть локальный файл без повторного рендеринга. , а потом контролировать его через время истечения.
Я тут нашел проблему, то есть каждый раз при обновлении я буду упаковывать и тег и индекс, а что мне нужно, так это отдельно упаковывать проект, обновлять его отдельно, могу ли я через параметры контролировать, какой из них я упаковываю? перепишите webpack.config.js, интегрируйте общедоступные части, а затем разделите приватные на несколько и настройте еще несколько скриптов в package.json.
Таким образом, каждый раз, когда я обновляю проект, мне нужно только упаковать соответствующий проект, и горячая загрузка во время упаковки и разработки не станет очень медленной после того, как будет подключено много проектов.
Благодаря доступу к двум слоям кеша, когда домашняя страница выходила в онлайн, мы расширили сервис с 2 экземпляров докера до 6 (докер действительно удобно расширять), благодаря преимуществам кеша нет нагрузки на сервис
Конечно, домашняя страница не может выходить в интернет так небрежно, как говорится.Должен быть план понижения, поэтому план понижения выигрывает от мощи Vue.
Vue проверит (data-server-render=true) на стороне браузера, чтобы увидеть, рендерится ли серверная сторона.Если серверная сторона не рендерится, то клиентская сторона снова выполняет логику для рендеринга. Таким образом, нам нужно только сохранить index.html, который изначально был отрендерен клиентом, когда мы переупаковываем его, а затем мы можем его извлечь.Конечно, не забудьте запустить метод в asyncData, когда клиент его выполнит. , иначе будет нехватка данных. Так просто~
Затем раздел первого уровня и раздел второго уровня были также подключены соответственно, и некоторые проблемы возникли в середине, но в конце они были решены гладко.Я напишу еще одну статью, когда у меня будет возможность рассказать о возникшие проблемы.
Повторный рефакторинг
В то время как наш проект находится в упорядоченном переходе от исходного рендеринга статической страницы на стороне клиента к рендерингу на стороне сервера, мы также продвигаем это внутри компании.Несколько родственных отделов также столкнулись с нашими предыдущими проблемами с поисковой оптимизацией, или я хочу, чтобы первый экран быть быстрее и так далее, поэтому я готов использовать колеса, которые мы уже построили. Однако наш проект пока не популярен, если братский отдел хочет его использовать, мы можем только скопировать нашу библиотеку, затем удалить бизнес-логику и добавить свою логику, стоимость очень высока, и как только мы обновим наша сторона Ничего, их всех нужно синхронизировать вручную, что очень хлопотно.
Мы потратили немного времени, прежде всего, на ядро Базовая библиотека извлекается и вместе с некоторыми распространенными методами, такими как метод подключения центра журналов и метод подключения центра конфигурации, превращается в пакет npm. Опубликуйте во внутреннем источнике npm компании, а затем отделите клиент от библиотеки, чтобы он стал внешней библиотекой, плюс простой server.js, который можно разрабатывать независимо от сервера, не слишком полагаясь на сервер узла во время разработки. А благодаря центру конфигурации мы можем разделить проект очень далеко, но в итоге через центр конфигурации он концентрируется на одном и том же сервисе, а обратно на фронтенд и бэкенд разделение, но не только разделение интерфейса и сервера, независимые коллеги по разработке интерфейса, а также рендеринг на стороне сервера, убивая двух зайцев одним выстрелом. Структура конструкции представлена на рисунке:
После этого разделения проект становится очень халяльным.Фронтенд-разработка фронтенд-проектов vue и npm-пакеты на стороне сервера доступны для всех, очень удобно апгрейдить и поддерживать, а сервис узла не нужно все время перезагружать.обновлять можно через конфиг.логика, горячее обновление.
После завершения многие братские отделы также стали получать доступ.
испытание давлением
Поскольку ситуация в каждой компании различна, использование кэширования компонентов, кэширования страниц и т. д. может достичь цели оптимизации, чтобы она соответствовала стандарту переноса трафика проекта. любое кэширование Результаты теста давления ниже.
Мы провели несколько стресс-тестов на разных уровнях, ведь производительность должна соответствовать требованиям, я помню, что когда запускали публикацию и проверку, VUE использовал версию 2.3.x, и производительность была не очень, потому что VUE был основан на виртуальном DOM (VNODE).Реализация является ресурсоемким проектом, поэтому во время стресс-теста процессор быстро достиг 100%, а TPS был очень низким, поэтому мы добавили кеш на страницу, и страница уровня P0, как и домашняя страница, добавила два слоя кеша, а позже VUE обновили до версии 2.4.x и производительность стала намного лучше, но ЦП всегда был узким местом. Если проект сложный и в нем много вложенных структур, сервер 1C4G будет ограничен 40-50 TPS при заполнении процессора, если он увеличится, время ожидания пользователя увеличится в геометрической прогрессии.
Я читал много статей, документов, сравнивающих vuessr и строковые шаблоны, но их демо-сравнения очень просты, в vue нет вложенности компонентов, и производительность может быть схожей, но увеличивается сложность страницы и компоненты вложены друг в друга. , производительность vuessr уже нельзя сравнивать со строковыми шаблонами
Например, количество обращений к узлу на первом и втором разделах нашей домашней страницы аналогично количеству статьи каждый день, но статья использует одну треть машины на домашней странице, а процессор и Использование памяти машины аналогично, потому что проект статьи использует строковый шаблон.
Суммировать
В течение всего процесса одноклассники по интерфейсу и одноклассники по бэкенду должны сотрудничать друг с другом.Одноклассникам по бэкенду API необходимо изменить исходный метод прямого объединения шаблона для вывода данных в интерфейс API, который является основой для разделения фронтенда и бэкенда. Что касается базовой конструкции, то ее можно развивать и улучшать постепенно, так же, как и при сборке в начале, номер версии встроенного конфигурационного файла необходимо вручную настроить в центре конфигурации, что занимает много времени и приводит к ошибкам. медленно Да, в центре конфигурации открылся апи-интерфейс, нам очень удобно заходить, и успешно реализована автоматизация синхронизации конфигурации.
В процессе использования узла в качестве среднего слоя также возникают такие проблемы, как утечки памяти и узкие места в производительности.Если будет возможность позже, я напишу статью, чтобы представить ее. В течение этого года Station B быстро развивалась, и интерфейс также сознательно заботится о производительности интерфейса, чтобы сделать страницу лучше и быстрее.
Шаги не прекращаются, мы все еще в пути!