服务端渲染(ssr)项目及nuxt项目部署过程

导言

去年有写一篇关于构建nuxt项目的博客,其中有提到ssr项目部署问题,关于这个实在是可讲的太多,因此单独写了一篇,就是本文。

csr与ssr部署

传统的客户端渲染(csr)项目的部署,即是把webpack打包后生成的静态文件(dist)上传到服务器上,通过配置网关及nginx转发,使外网客户端可以访问到这些html文件。

而服务端渲染(ssr)项目,依赖web服务器动态构建html文件,因此之前的csr方法肯定不得行。从这个思路出发,ssr项目需要在服务器在将web服务器(web server)跑起来,并且使外网客户端可以访问到web服务器(这里与csr部署思路一致,方法略有不同),再根据不同的条件生成不同的首屏html并返回给客户端。

本文主要讲两种部署方法:基础ssr的部署方法(按照vue官网的ssr指南构建的项目)和使用nuxt.js框架的部署方法。

ssr部署方法

以下使用到的命令建议梳理记录,后续可以将这些命令列成一个启动脚本,实现自动化启动。

【p1】web server的部署

想要将web server部署在服务器上,服务器上必须要有node.js环境,才能在web server跑起来之后提供一个node上下文环境,只是硬性要求。测试方法很简单,node命令有效即可,如下:

node -v

如果没有,就需要在服务器上安装一下node.js了。

然后需要将对应的server启动文件(server.js)上传到服务器上,这里大家应该都有自家的文件上传服务器的脚本,不加赘述。

在服务器上试着跑一下web服务器

node ./server.js

发现报错,会提示module not found,原因是server.js文件里可能依赖(require)了其他依赖项,它在本地找不到这些依赖项,一些可能是node.js自身的一些模块,比如fs,path这种,这些依赖并不需要额外引入,因为node环境中已经包含,另一些就是外部的js库,比如koa.js这类web server框架,需要额外引入,该怎么办呢?

// server.js头部引用
let fs = require('fs');  // node模块
const path = require('path');  // node模块
const Koa = require('koa');  // 外部依赖
const Router = require('koa-router');  //外部依赖

答案就是需要把依赖项也同时上传到服务器上,这里有两种方法:一种是直接将依赖下载到项目内,并且通过脚本与server.js文件一同上传至服务器上;另一种是将这些需要额外引入的依赖清单列成一个package.json,跑server.js之前先通过npm install把这些依赖下载下来。

这些依赖需要存放到node_modules文件夹中,并且按照文件夹层级逐级索引,当本文件夹内不存在时则向上一级文件夹索引,而且由于我们的服务器依赖基本上是很少改变的,可以做到不用每次都下载这些体积不算小的依赖,具体的处理方法因人而异,这里只是提出一点思路,希望这点小细节可以帮助你方便处理服务器的依赖项。

当依赖下载完成,再次尝试跑起来web服务器,检查web服务器运行的端口,如果可以响应,这就表示我们完成了第一步。

# 就绪检查命令可以这么写
curl http://host:port/你的检查服务器的路由

# 例如我的server.js是这么写的:
// 就绪检查
router.get('/heart-beat', ctx => {
  ctx.response.code = 200;
  ctx.response.body = 'ok';
});

const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 8090;

app.listen(port, host);
console.log(`Server listening on http://${host}:${port}, now is ${new Date().toLocaleString()}`);

# 那么检查就绪的命令就可以这么写
curl http://127.0.0.1:8090/heart-beat
# web server响应:
'ok'
# 这就表示完成了

 

 【p2】静态资源文件的上传

静态资源文件即是指webpack打包后生成的文件,无论是server bundle还是client bundle都应该和server.js一起上传到服务器上,在通过web服务器按条件进行处理,返回给客户端。

在生成server bundle和client bundle方面,这里详述起来会比较复杂,以后会再起一篇文章,讲一下按照vue官方的ssr指南如何构建一个ssr项目。

server bundle交付给web服务器,服务器在处理拼接html时,可能也会用到一些外部依赖,比如vue、axios这类。这些很容易理解:因为它实际上是将你的bundle文件执行了一遍,执行过程中遇到引用的其他依赖,当然需要在当前的环境也有这些依赖。

这里总结一下ssr项目需要在服务器上用到的依赖:

1、server.js require的依赖(node模块除外)

2、src内源码文件在头部import的依赖

3、src内院吗文件在头部import的项目文件内用到的依赖(比如你引用了自己的util/tool.js,在tool.js内import的依赖也需要安装)

当然这些依赖都不会超出你的package.json内依赖的范围,如果你觉得麻烦,也可以直接将package.json内的依赖全部安装到服务器上。

静态资源文件上传完毕以后,就可以按照上面检查web server就绪的方法,检查是否可以完成html文件的组装

curl http://host:port/你的ssr路由

如果web服务器响应并且返回一个html文件,那么恭喜你已经完成了80%的工作。

【p3】node进程的维护管理

完成以上两步,基本上表示你的项目可以正常运行,还差最后一步:如何维护你的node进程正常运行,假设遇到了意外问题,服务崩溃了,如何维护web服务器重启?

pm2应运而生。

在你的服务器上安装pm2,参考pm2官方文档

pm2是一个用于维护node进程的管理工具,通过配置一个简单的文件,即可帮你维护你的node进程,并且可以做到地址端口复用,多实例分流,异常重启等,十分强大。

配置文件如下:

// ecosystem.config.js
module.exports = { apps: [{ name: 'my-ssr-app', script: './build/server.js',  // 你的web server入口文件 args: 'start', // 应用启动的路径 cwd: './', // 应用启动模式,支持fork和cluster,cluster支持地址端口复用 // 若服务器环境变量数据过大,cluster模式需要复制环境变量会导致pm2无法运行,只能选用fork模式,或者选用网上的解决方案 exec_mode: 'fork', // 应用启动实例个数 // fork模式下不能起多个实例 会报错 instances: 1, // instances: "max", // 最大内存限制数,超出自动重启 max_memory_restart: '1G', // 监听重启,文件夹变化自动重启 watch: ['dist', 'build'], // 应用运行少于该时间认为启动异常 min_uptime: '3s', // 发生异常的情况下自动重启 autorestart: true, // 最大异常重启次数,即小于min_uptime运行时间重启次数 max_restarts: 3, // 异常重启情况下,延时重启时间 restart_delay: 3000, error_file: './pm2-log/err.log', out_file: './pm2-log/out.log', combine_logs: true, env_production: { 'NODE_ENV': 'production' }, env_release: { 'NODE_ENV': 'release' } }] };

配置完成后,需要通过pm2启动你的web服务器:

// package.json的启动命令
"scripts": {
"pm2:release": "pm2 start ecosystem.config.js --name my-ssr-app --env release"
}

在通过pm2命令检查你的服务器是否已经启动完成

pm2 ls

 

常用的pm2命令,如重启实例、删除实例等你可以在网上查询资料。

请注意你登录服务器的用户身份,最好是管理员,如果不是,可能会导致一些功能异常。

另外由于pm2会将项目内在node运行期间的日志(console.log)记录下来,生成日志,日志文件保存在配置文件内指定的地方,如果长期没有清理这些日志,则会累积导致内存或者磁盘占用。当然现在的服务器环境在每次启动时都会删除之前的文件夹生成新的文件夹,日志文件也会随之清理。但是如果长期没有重启也会有这个问题,所以建议使用pm2的一个日志管理模块pm2-logrotate,你可以在网上查询到如何配置、使用它。

还有一些问题需要注意:

比如说运行的环境变量(NODE_ENV),这是一个很重要的变量,用于区分当前运行环境是开发、测试还是线上环境,这个变量不再由node直接注入,而是pm2,这就牵扯到配置文件内,配置环境的问题了:

    env_release: {
      'NODE_ENV': 'release'
    }

像这样在配置文件内规定了env_release环境内注入的NODE_ENV,再在启动命令加上--env release,pm2就知道我们需要注入什么环境变量了。

【p4】nginx配置

// todo

推荐这些文章:

Nuxt服务端部署(CentOS7+nginx+pm2)

一、环境准备
部署Nuxt用到最少的环境依赖包括:node,pm2,所以这里先依次安装
CentOS下安装Node.js

# 1、获取资源
cd /usr/local/src
wget https://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0.tar.gz
# 2、解压
tar xvf node-v10.13.0.tar.gz
# 3、进入解压后node文件夹开始编译
cd node-v10.13.0/
./configure
make

# 4、安装Node
make install
# 5、验证是否正确安装
node -v
...

nuxt,js中关于服务端不能使用localStorage和cookie的解决方案

参考链接:https://www.npmjs.com/package/cookie-universal-nuxt
1、安装下载
  npm i --save cookie-universal-nuxt
2、nuxt.config.js进行配置
  modules:[
    'cookie-universal-nuxt'
  ]
3、常用方法
  this.$cookies,set()
  this.$cookies.get()

...

手动为 SAP Spartacus 添加 SSR 即服务器端渲染的步骤

ng add @spartacus/schematics --ssr
在用 SAP Spartacus 开发的 store 里,能看到 devDependencies 里具有 @spartacus/schematics 的依赖:

这是 SAP Spartacus Schematics 的一部分:https://sap.github.io/spartacus-docs/schematics.

Spartacus schematics allow you to install Spartacus libraries in your project.

Spartacus Schematics...

服务端渲染和客户端渲染

渲染:把完整的html结构完善并展示
服务端渲染:将完善html结构这一块放在了服务端
客户端渲染:将完善html结构这块放在客户端(或者说浏览器中)
 
简单的理解:

//填充前
<div id="main"></div>

<?php
//...操作div,对div进行填充
php>

//填充后
<div id="main">Jacky</div>

在服务端渲染中,对div填充这一块是是在服务端,也是常说的后端进行渲染的,返回到客户端的是填充好、完善好的html结构,完整的DOM树;

//填充前
&l...

nodejs服务部署到服务器上

1.服务器端安装node,
2.全局安装pm2(npm install pm2 -g 或者 cnpm install pm2 -g)
3.cmd 进入nodejs项目所在目录  输入命令 pm2 start server.js
备注: pm2 restart server.js   // 重新启动
       pm2 stop server.js   // 关闭
       pm2 delete server.js   // 删除
 
本机...

服务端渲染(SSR)vs 客户端渲染

服务端渲染:当浏览器输入http://www.aaa.com时,向服务器发起请求,服务器收到请求后,(1.寻找对应的html文件;2.并执行里面的ajax请求;3.将请求后的数据渲染到html文件里面;4.将渲染后的完整的html文件传到客户端),客户端收到html文件,直接渲染页面(客户端只发起了一次请求)
客户端渲染:当浏览器输入http://www.aaa.com时,向服务器发起请求,服务器收到请求后,直接将对应的html文件返回到客户端,客户端渲染html文件,在文件里面遇到请求时,再次发起请求,获取数据,获取到数据后,将数据写入到html文件中,客户端再渲染。(客户端发送了不止一次...

nodemon自动重启工具使用方法

平时我们修改服务端代码,都需要手动在终端重启server.js服务来更改页面响应.
使用以下代码:

node server.js

而nodemon工具可以简化操作,帮我们自动重启服务.
1.安装

npm install -g nodemon

如果报错就在开头加上sudo:

sudo npm install -g nodemon

2.运行
和之前运行node方法一样:

nodemon server.js

 
重点!!!
之后每次修改服务端代码就可以直接command+s保存,不需要再手动重启了.

...

服务器渲染 SSR

1、什么是 ssr(服务端渲染):https://www.jianshu.com/p/7f06022a8ddd
   ssr 也不是万能的, 需要 node 服务器, 很耗费性能, 需要做好缓存和优化, 相当于空间换时间.。全站 ssr 明显不可取, 现在流行较多的是 首屏 ssr ,甚至 首屏部分 ssr。
2、vue 服务端渲染:https://ssr.vuejs.org/zh/#什么是服务器端渲染-ssr-?(vue官网)
3、重点:ssr(服务端渲染)渲染的单页面应用,不能是hash模式,即 只能  使用 history 路由模式。因为&nbs...

umi框架应用服务端SSR,实现数据预渲染

当我们的应用使用服务端渲染的方式时,可能需要把初始化加载的数据例如推荐等不需要用户输入的内容直接渲染获取,也有利于SEO。
上一篇已经实现服务端渲染,本次实现服务端获取数据后在做渲染。
利用getInitialProps静态方法向组件注入数据

import { IGetInitialProps } from 'umi'; // 数据预获取

// 服务端渲染时候到数据预获取
IndexPage.getInitialProps = (async (ctx) => {
const auth = await APIFunction.getAuth();
return Promise.re...

node 后台运行程序pm2

1、 pm2需要全局安装
npm install -g pm2

2、进入项目根目录
2.1 启动进程/应用
pm2 start bin/www 或 pm2 start app.js

2.2 重命名进程/应用
pm2 start app.js --name wb123

2.3 添加进程/应用
watch pm2 start bin/www --watch

2.4 结束进程/应用
pm2 stop www

2.5 结束所有进程/应用
pm2 stop all

2.6 删除进程/应用
pm2 delete www

2.7 删除所有进程/应用
pm2 delete all

2.8 列...

文章标题:服务端渲染(ssr)项目及nuxt项目部署过程
文章链接:https://www.dianjilingqu.com/51406.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>