侧边栏

博客SSR实践总结

发布于 | 分类于 博客

由于百度半年都没有收录这个博客的缘故，很早就想尝试Vue的服务端渲染（Server Side Rendering）。

上周末难得双休，决定实现这个功能，然后从vue-cli迁移到nuxt，以及后台从PHP迁移到NodeJS共花了两天时间，然后从Apache迁移到Nginx上又花了一天时间，一番折腾之后，有了下面的血泪史。

项目传送门，参考：

SSR概念 ​

这真的不是阴阳师里面的脱非入欧的那啥~

传统网站由后台提供数据，然后使用模板引擎渲染好页面，最后返回给客户端，因此浏览器初始拿到的就是一个完整的页面；用Vue搭的单页面应用，几乎所有的html代码都是在异步获得数据之后由JS渲染的，而浏览器初始拿到的页面只有一个孤零零的<div id="app"></div>根节点。

对于用户来说可能没啥感觉（由于页面体积极简可能速度更快），但是对于SEO来讲这就是灾难啊~解决这个问题，就必须要在服务端返回HTML文档。这仿佛进入了一个死胡同，幸运的是，大佬们为我们提供了Vue的SSR解决方案。

文档里面有一句：

将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

想到了之前使用过的一个叫做JUI的管理系统框架，不过实现完全不同~具体原理啥的后面再深入，需要注意的是，后台只能是 Node.js server环境（所以需要从PHP进行迁移）。

文档中推荐了一个Nuxt的框架，在Vue SSR解决方案的基础上进行进一步封装，帮助我们快速部署SSR的Vue项目。

项目迁移 ​

Nuxt ​

在ShymeanV0.2.0的版本中使用的是vue-cli进行开发，最后将项目打包，由PHP托管和提供数据的。Nxut提供了与之类似的功能，包括了开发dev，打包build功能，与vue-cli不同的是，我们直接使用Nuxt内置的nodejs服务器托管项目。

安装啥的就不扯了（这里没遇见啥问题），下载完成之后运行npm run start，然后在浏览器输入localhost:3000预览即可。

当然通过浏览器我们发现不了SSR的效果，这里推荐使用Chrome应用Postman来进行调试。安装启动Postman，然后输入地址，就可以查看对应的响应报文了。

可以看见实际的HTML内容，是正儿八经的服务端渲染；如果采用相同的方式去爬去vue-cli的打包文件，得到的肯定只是一个根节点而已。

nuxt-express ​

nuxt的官方demo并没有提到如何处理数据的问题，应用肯定是需要调用服务器数据接口的，然而，端口号为3000的这个服务器是内置在nuxt框架中的，我们如何绑定请求路由和数据库操作呢？

nuxt文档中又推荐了nuxt-express来解决这个问题，OK知道用啥框架了，下一步就是项目迁移了。

目录 ​

nuxt为我们指定了项目的目录结构，文档里面有写，这里只是简单介绍一下

  • asstes，存放静态资源如图片，样式表，字体啥的
  • components，存放vue组件，感谢Vue组件系统，整个项目迁移成本非常低
  • layouts，布局文件，相当于vue-cli中的App.vue入口文件，这里还可以定制error.vue错误文件啥的
  • pages，nuxt通过该文件夹的目录结构自动生成对应的vue-router，规则见Routing
  • static，静态文件如favicon.icon
  • store，vuex的相关对象如state,mutations
  • 所有组件的引入方式都推荐使用~的绝对路径形式，我发现貌似自己新建的目录引入的路径有点问题，暂时没有深入

上面这些是nuxt客户端相关的目录，与express后台相关的代码位于server目录

  • 已存在的index.js不需要我们更改，
  • 绑定路由需要在server/api/目录下进行，在组件中请求数据则需要带上/api/前缀
  • 可以在api的同级目录新建其他目录，如core服务器核心库文件，model数据库模型，config配置文件等

配置 ​

根目录下存在和两个配置文件，其中

  • nuxt.config.jsnuxt的配置，指定页面的meta标签，favicon图标，样式表啥的
  • backpack.config.js是backpack的配置文件，这里暂时不需要进行修改

由于项目采用scss，因此记得在nuxt配置文件中添加scss入口文件，否则会报错

css: [
      {
          src: '~assets/scss/blog.scss',
          lang: "scss"
      },
      '~assets/fonts/iconfont.css'
  ],

开发 ​

在页面迁移的过程中，重新设计了部分组件和路由，对着文档在具体开发的时候倒没遇见啥大问题。

改动比较大的是后台，从PHP迁移到NodeJS需要修改接口，数据库方面暂时使用之前随便写的一个mysql模型类，由于之前设计的数据库很不合理，后面可能会进行调整。

前后端的网络请求使用的是axios，配合express用起来还是很简单的。

开发问题 ​

后台热更新

后台采用的backpack可以实现服务器热加载（跟supervisor类似），但是启动过程有些缓慢~不知道是不是电脑性能的问题。如果开发时发现接口不正常，记得检查后台服务器是否更新了。

修改文件名

整个项目在WebStorm开发，这里遇见了一个很大的坑：在修改文件名时，webstorm会自动检查项目中的资源引用并自动修改；在其他项目中这是一个很智能的功能，但是在nuxt-express中，比如我只是修改了pages目录下某个路由名称（把index.vue修改为home/index.vue），导致backpack.config.js中的入口文件被修改~整个项目都崩溃了，错误定位还很麻烦。因此建议在修改文件名称时取消自动检索功能。

接口路径

后台路由存放在/server/api目录中，接口统一以/api开头，因为前端和后台都使用3000接口，所以使用api前缀区分后台数据接口和前端路由，这里坑了两次，遇见404错误却发现后台路由貌似没毛病的时候，记得检查请求路径

vue拓展

nuxt在vue基础上拓展了几个常用的属性，使用方式见文档，注意在dev模式下，asyncData的catch错误是在服务端控制台显示的，调试的话请注意。

项目部署 ​

项目从vue-cli迁移完毕之后，就可以使用npm run build接npm run start进行打包和部署了。先在VMware虚拟机ubuntu14.04 LTS进行模拟，然后再部署到阿里云，这个过程中遇见了无数的坑。

下面的步骤是我现在回忆的，可能会有一些问题，但大致方向是没错的~不要打我。使用的远程服务器连接工具是putty。

node ​

由于后台使用了backpack，因此需要nodeV6.0以上的版本，之前的ubuntu下node版本太低了（V0.10）需要重新升级，但是发现使用n stable升级无效，最后重新卸载安装node然后就可以用了

apt-get remove nodejs
apt-get install nodejs
node -v

但是！！在阿里云上面使用apt-get，死活只能安装v0.10的版本，此外无法使用node -v的命令（貌似node在阿里云上面是另外一个程序）。无奈只能通过源码编译的方式进行安装

# 建议下载nodejs中文网上面的源码，不然速度太慢了~
wget https://npm.taobao.org/mirrors/node/v8.1.3/node-v8.1.3.tar.gz
# 解压
tar xvf node-v8.1.3.tar.gz
# 切换目录
cd node-v8.1.3

# 配置
./configure 
# 编译，这一步非常漫长，大概一二十分钟，可以玩把游戏
make
# 安装
make install

# 环境变量
cp /usr/local/bin/node /usr/sbin/ 
node -v

终于大功告成了~但是！我发现特么没有npm（不是说好node现在默认安装npm吗啊喂），然后只能使用curl进行安装

# 前面可能需要用PPA
curl http://npmjs.org/install.sh | sudo sh
# 更新npm
npm install -g npm

记得修改npm的镜像地址，不然下载比较坑

npm config set registry https://registry.npm.taobao.org

在阿里云上装环境有点麻烦啊~好吧是我不熟悉。

nginx ​

但是本地服务器运行在3000端口上，因此需要使用反向代理。Apache的反向代理之前没有接触过，因此转向使用nginx做代理

安装

# 安装
sudo apt-get install nginx 

# 修改默认端口号 80->88 ，防止与apache2冲突，这一步不是必须的，反正我们后面还是要关闭apache
sudo vim /etc/nginx/sites-available/default

# 启动nginx
sudo service nginx start
# 查看状态，如果显示not running则可能需要关闭apache
sudo service nginx status

然后在浏览器访问localhost:88就可以看见ngnix欢迎界面了，由于我这边开的是vmware虚拟机，也可以通过ip地址访问虚拟主机

# 获取虚拟主机ip
ifconfig -a

由于需要频繁修改配置，记得在修改之后重新加载配置文件

nginx -s reload

反向代理

nginx的配置方式要比Apache简洁不少，找到nginx的安装目录

cd /etc/nginx/sites-enabled
vim default

然后添加一项server配置即可，这里指定的站点根目录位于/usr/share/nginx/ShyMean

server {
        listen 80;
        server_name www.ssr.com;
        root ShyMean;
        index index.html index.htm;

        location / {
                proxy_pass http://127.0.0.1:3000;
        }
}

转发请求头

由于需要统计访客人数，所以在后台记录用户ip(天地良心我真的不会干啥坏事)，但是测试发现记录的都是127.0.0.1，这就蛋疼了。造成这个问题的原因是没有配置nginx转发请求头，修改上面的location配置

location / {  
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;  
    proxy_set_header X-Real-IP $remote_addr;  
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
}

这样就算完成了，总体来说nginx这里并没有遇见啥特别的问题。

mysql ​

由于之前是连接的远程数据库，部署到线上可能需要修改对应的数据库配置文件（位于server/config/db.json中，github上面的代码只有db.example.json，需要自己新建一个）。

部署 ​

环境搭好后，就可以编译文件然后开启服务器了。我还是先将代码传到github上面然后再克隆到/usr/share/nginx/ShyMean，等到学了shell后再尝试自动化部署。

# 安装时最好使用root，否则node-sass会报错
npm i

# 编译
npm run build

# 启动服务器
npm run start

接下来就可以进行测试了，因为是在虚拟机上运行的，所以需要修改windows的hosts文件

192.168.1.6     www.ssr.com

此时通过浏览器HTTP连接连接虚拟机，就可以看见3000端口的服务器展示的首页了。现在，我们的整个任务基本完成了~

forever ​

但！是！当关闭虚拟机或远程服务器时，整个进程就停止了~返回就会返回502错误，我们需要为nuxt开启守护进程，这里使用的是forever。

# 全局安装
npm install forever -g

官方文档的介绍使用方法是

forever start app.js

由于nuxt的npm run start命令配置了cross-env和NODE_ENV等环境变量，虽然使用--help命令找到了配置环境参数的配置-c，但仍旧不能使用上面的方法，百度查了半天没找到解决办法，最后用谷歌forever start npm scripts第一条搜索结果就找到了答案

forever start -c "npm run start" ./

呃~论科学上网的重要性。这样整个项目才算是正儿八经的完成了。

等等，最后还有一个坑：使用forever stop 0可以关闭守护进程，但是再次启动时整个守护进程不会生效，貌似是因此3000端口仍被占据的缘故

# 查看3000端口运行的进程
lsof -i:3000

果然是之前的node进程没有结束的缘故~找到对应的pid，比如这次是1002

kill 1002

然后重新使用forever start即可

小结 ​

这次部署真的是处处踩坑，庆幸的是每个问题都能找到解决方案。

现在总算是完成了SEO的第一步，也有了继续折腾博客的动力；此外对于Linux终于不那么敬畏了，打心底也比较喜欢命令行的操作模式，打算下半年买台mbp折腾，哈哈~~

#Vue #nuxt

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。