Shaoli's Blog

从单页应用(SPA)到服务器渲染(SSR)的改造之路

本人博客最初是用vue做的单页面应用,且采用history模式,去掉了 `#`,看起来就像一个正常的多页面网站,同时页面体验也比多页面的好。

然鹅单页面应用的缺点还是很明显的,就是首屏和seo问题。

首屏这个问题本人已经通过gzip解决了,就算是最差的服务器配置,加载也很快。

seo始终是个问题,毕竟搜索引擎爬虫只能抓到首页的标题、关键词和描述,却无法获取到页面上真正的内容,而且每个内页的内容也无法抓到,如下图所示:



页面的内容和爬虫能抓到的内容不一样,无法获取到实际的东西,这样对搜索引擎优化就不好了,


采用ssr渲染后,如下图:



而且使用sitemap生成器模拟爬虫抓取,也能抓到网站下的子页面,如下图



下面开始讲讲nuxt部署流程。


1.首先用nuxt脚手架创建项目

npx create-nuxt-app <项目名>

npx在NPM版本5.2.0默认安装了,可以直接使用。


本人选择的脚手架配置是:

Express + Universal模式 + axios module + EsLint + Prettier 


2.新建好项目后,目录结构如下


  • 资源目录 assets 用于组织未编译的静态资源如 LESSSASS 或 JavaScript
  • 组件目录 components 用于组织应用的 Vue.js 组件。注意,组件下无法使用fetchasyncData .
  • 布局目录 layouts 用于组织应用的布局组件。
  • 中间件目录 middleware 目录用于存放应用的中间件。
  • 页面目录 pages 用于组织应用的路由及视图。
  • 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  • 静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。
  • store 目录用于组织应用的 Vuex 状态树 文件。
  • nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。
  • package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。


3.这边就不说开发过程了,github源码都有。

4.本地开发并测试没问题后,就可以准备部署了。


Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。


我采用的是服务端渲染应用部署,配置文件里的命令如下:


打开命令行,执行build后,可以本地start启动看看效果

run run build 
#或
nuxt build

#再
npm run start




如果要使用 静态应用部署,执行完命令,把dist文件夹复制到服务器根目录就行。

npm run generate


5.build编译构建完成后,会生成 .nuxt 目录。

然后我们把.nuxt目录,server目录(如果有的话),static目录,nuxt.config.js,package.json 复制到服务器上的web根目录


6.复制到服务器,先安装依赖项

npm install
#建议用淘宝镜像源 cnpm,比较稳定快速


7.安装完依赖后,尝试启动nuxt服务

npm run start
#或
nuxt start


如果出现以下结果,说明nuxt服务启动成功!



8.然后把nuxt服务先停掉,改用pm2启动nuxt长服务,实时在线运行。

首先先新建一个 pm2system.config.js

/* pm2system.config.js
 * pm2 start pm2system.config.js
 */
module.exports = {
  apps: [
    {
      name: 'my-blog'// 项目名称
      cwd: './'// 当前工作路径
      script: 'npm'// 实际启动脚本
      args: 'run start'// 参数
      autorestart: true,
      watch: true// 监控变化的目录,一旦变化,自动重启
      watch_delay: 10000,
      ignore_watch: ['node_modules'], // 从监控目录中排除
      watch_options: {
        'followSymlinks'false,
        'usePolling'true
      }
    },
    {
      name: 'test-env'// 项目名称
      cwd: './'// 当前工作路径
      script: 'npm'// 实际启动脚本
      args: 'run start'// 参数
      autorestart: true,
      watch: true// 监控变化的目录,一旦变化,自动重启
      watch_delay: 10000,
      ignore_watch: ['node_modules'], // 从监控目录中排除
      watch_options: {
        'followSymlinks'false,
        'usePolling'true
      }
    }
  ]
}


然后启动项目。

以后部署更新文件时,pm2就会自动重启任务了

$ pm2 start pm2system.config.js
# 多个pm2配置任务时,可指定要启动的任务
$ pm2 start pm2system.config.js --only test-env



后续会加一下自动部署功能...



未完待续....To be continued

    评论列表

  • 匿名小伙伴 --福建省厦门市

    赶紧更新啊!!!

  • 1 --广东省中山市

    按你写的启动pm2时会把.nuxt文件夹下的dist文件夹删掉,这是为什么?

  • 本人 --福建省

    @1 使用服务端渲染,是需要.nuxt目录没错,如果能正常启动,dist目录被删掉也没事,我没有这种情况,这是nuxt内部机制,我们不做深入研究。

  • 撒东方大厦 --江苏省

    地方撒的

  • adsf --江苏省

    asdf

  • 一股 --CHINA

    ggf看

  • 第三方

    asd

  • lincoln --福建省福州市

    https://www.ylyun.com/portal/ 借你参考一下,我用nuxt + koa 写的。

  • 123123 --广东省广州市

    13213

person
0 / 16
comment
0 / 100