Эта статья написана технической командой билетного крупного рогатого скота.@Сюй ЦзяиСпособствовать.
причина
Мобильная станция Piniu всегда представляла собой многостраничные веб-приложения, использующие jade, less и es6+zepto для отдельного написания страниц, стилей и скриптов, а затем использующие gulp для упаковки и публикации. API-интерфейс синхронизируется с мобильным терминалом, а обратный прокси делается на nginx, чтобы избежать междоменных проблем. В начале 2017 года, с увеличением сложности логики страницы, в качестве базового фреймворка был запущен vue, а некоторые старые страницы подверглись рефакторингу.
Это решение работает очень хорошо, но чистый внешний рендеринг имеет свои проблемы: сканеры поисковых систем не могут его уловить. В этом вопросе промышленность предприняла некоторые попытки, такие какPrerender.io, идея этих сервисов в основном заключается в том, чтобы кинуть запрос, когда придет краулер, они попытаются использовать PhantomJS для рендеринга, а затем вернут сгенерированный html. Современные основные интерфейсные фреймворки также обеспечивают реализацию рендеринга на стороне сервера.
Что касается компромиссов, мое личное мнение таково, что если вы просто хотите удовлетворить потребности SEO, стоит попробовать такое решение, как Prerender, но на самом деле у нас все еще есть некоторые другие сценарии, которые необходимо реализовать в тегах страницы. , например, желая настроитьOpen GraphЧтобы сделать ссылку с iMessage в превью, надо знать, что Apple давно перепилила гадов, еще и скорость отклика у некоторых плохая. И SSR также позволяет разработчикам иметь больший контроль над проектом, поскольку с тех пор, как они перешли на Vue, лучше попробовать новую технологию в 2017 году.
Nuxt.jsЭто платформа, разработанная парой французских братьев на основе возможностей ssr, предоставляемых vue 2.0.Основываясь только на правильном соглашении и конфигурации, она может значительно снизить порог для разработчиков при создании веб-приложений для рендеринга на стороне сервера. Если вы начинаете с нуля, вы можете использовать vue-cli для создания проекта в соответствии с официально рекомендованной практикой. Поскольку у нас есть существующий проект, мы сделали следующее:
Инициализировать проект
По умолчанию srcDir Nuxt — это rootDir, где в нашем корневом каталоге уже есть содержимое нашего собственного проекта, поэтому мы создали каталог nuxt, чтобы обрабатывать его по-другому, просто объявите его в nuxt.config.js. Промежуточное программное обеспечение распространяет некоторое промежуточное программное обеспечение для анализа информации о городе текущей страницы и т. д. и взаимодействует с доступом к действию в магазине, чтобы все страницы могли получить доступ к этой информации.
В каталоге pages соответствующие файлы создаются в соответствии с существующим URL-адресом. Например, если URL-адрес сведений о производительности — /activity/detail.html, создайте pages/activity/detail.html.vue, а затем объедините предыдущие jade, less и js в этот файл.
Запрос на модификацию сети
В случае рендеринга на стороне сервера данные страницы также инициируются серверной стороной в начале. Раньше я делал слой инкапсуляции для сетевых запросов и использовал свой собственный модуль выборки.Теперь мне нужно сделать различие между клиентом и сервером в реализации выборки и просто переключить реализацию. На стороне сервера мы используем axios в качестве библиотеки запросов, а на стороне клиента по-прежнему остается zepto. Об этом можно судить по process.server/process.browser.
Nuxt сделал собственное расширение конфигурации vue.Файл vue в качестве записи страницы будет иметь дополнительные элементы конфигурации, такие как asyncData и head.AsyncData — это место, куда мы отправляем запросы для получения данных.
Адаптация к существующим компонентам
За исключением входа на страницу, другие компоненты могут быть повторно использованы на стороне браузера и сервера. Есть две основные вещи, которые необходимо изменить:
- Часть компонента, которая использует API-интерфейсы, связанные с браузером, должна оценивать среду, например инициализацию iscroll, измерение ширины и т. д.
- Место, где параметр запроса получается непосредственно из URL-адреса в исходном компоненте, теперь должно быть передано родителем.
То, с чем я сталкиваюсь здесь, связано с zepto, и я буду судить по одному в начале.
var$;if(process.browser){$=require('zepto')}
Позже я обнаружил, что это проблематично, поэтому я сделал $.js, вставил эту логику и использовал ее напрямую:
var$=require('$')
Если сумма относительно велика, вы можете изменить циветтного кота на принца, изменить исходный zepto на zepto-origin, а затем создать zepto для выполнения вышеуказанных действий, а бизнес-код можно оставить нетронутым.
Настроить маршрутизацию
Оптимизация маршрутизации также является частью SEO, и хотя кажется, что оптимизация — это в основном метафизика, некоторые стратегии кажутся эффективными.
В частности, что нам нужно сделать, это№ plagiarism.com/activity/wipe…Такая ссылка становитсяm.piaoniu.com/sh-dramasТаким образом, это также используется Схемы SSR можно оптимизировать только при большем контроле.
Для простых нужд Nuxt поддерживает настройку следующей файловой структуры для поддержки:
pages/
--| activity/
-----| _id.vue
Будет сгенерирована следующая конфигурация:
router: {
routes: [
{
name: 'activity-id',
path: '/users/:id?',
component: 'pages/activity/_id.vue'
}
]
}
Если вы не можете удовлетворить свои потребности, вы также можете самостоятельно расширить его в nuxt.config.js.Например, в упомянутом выше сценарии мы настроили его следующим образом:
router: {
extendRoutes (routes, resolve) {
// ...
routes.push({
name: 'category-home',
path: '/:city-:category/:filter?',
component: resolve(__dirname, 'nuxt/pages/activity/category-home.html.vue')
})
// ...
}
}
Ссылаться на:Routing - Nuxt.js
Сценарий выпуска обновлений
Первоначальный скрипт публикации создавал статические ресурсы, а затем последовательно отправлял общие ресурсы и html на разные серверы nginx, и это было сделано. Теперь есть еще один, и обнаружено, что nuxt.config.js существует в каталоге, затем выполните
npm run nuxt-build
После этого заархивируйте всю директорию проекта, перенесите на сервер для распаковки и выполните плавный перезапуск через pm2.
Соответствующие изменения также следует внести в nginx: сначала попробуйте try_file, если он не найден, перенаправьте его в службу узла для отрисовки на стороне сервера, и соответствующая страница ошибки также предоставляется службой узла.
Здесь, поскольку мы хотим быть совместимыми с существующими страницами типа activity/detail.html, а файлы, которые раньше нельзя было отправить, не удаляются, необходимо дополнительно настроить эти страницы на nginx. Через некоторое время эти файлы можно удалить из проектов и серверов, чтобы упростить настройку.
Добавить мониторинг
Поскольку он отвечает за рендеринг на стороне сервера, необходимо также взять на себя соответствующий мониторинг качества обслуживания. Мы используем серверный продукт от DianpingCAT, у nodejs также есть соответствующий клиент:cat-client, использовать его несложно, но потребовались некоторые усилия, чтобы найти точку входа на страницу ошибки Nuxt. Официальная не дала рекомендуемой практики, а я изучил исходный код и сделал врезку на неправильную запись.
Renderer.prototype.errorMiddleware = (err, req, res, next) => {
Cat.logError(req.url, err)
// 给用户展示错误页面，自己则可以更方便的看到具体错误信息
if (req.cookies.ERROR_VISIBLE) {
res.end(err.stack)
} else {
res.status(500).render('error', {
code: 500,
error: '出错了'
})
}
}
Кроме того, используя функцию Transaction, предоставляемую CAT, вы также можете легко увидеть, какова производительность сервиса и где находится узкое место.Это выглядит так:
Что ж, для возврата сведений о шоу требуется 160 мс, что неплохо.
0