vue ssr服务端渲染环境搭建

更新日期: 2019-10-12阅读: 2.6k标签: 环境

前言

网上有关ssr开发环境搭建的文章不算多,就算找到也是比较高级的,不太适合新手入坑;这篇内容只抽取了其中最重要的部分,实现最基础的开发环境搭建;所谓开发环境无非两件事:自动打包·自动刷新页面,叫法比较土,也可以叫热更新,热加载。


自动更新renderer

先看目录结构

没啥东西,新增了一个hot.config.js文件,用来放置热加载的配置;
先看下server.js

//server.js
const express = require('express');
const chalk = require('chalk');

const server = express();

let   renderer;
const hotServer = require('./webpack.hot.config.js')
//我们希望通过不停的执行下面这样一个函数的回调,从新实例化renderer,已达到自动更新的目的;
hotServer(server,({serverBundle,clientManifest})=>{
  console.log('hot***************************************************')
  renderer = require('vue-server-renderer').createBundleRenderer(serverBundle,{
    runInNewContext: false, // 推荐
    template: require('fs').readFileSync('./index.html', 'utf-8'),
    clientManifest // (可选)客户端构建 manifest
  })
})
server.use('/',express.static('./dist')) // 设置访问静态文件路径
server.get('*', (req, res) => {
    res.set('content-type', "text/html");
    const context = {
        url:req.url
      }

        renderer.renderToString(context, (err, html) => {
          if (err) {
            res.status(500).end('Internal Server Error')
            return
          } else {
            res.end(html)
          }
        })

  })

server.listen(8080,function(){
    let ip = getIPAdress();
    console.log(`服务器开在:http://${chalk.green(ip)}:${chalk.yellow(8080)}`)
})

function getIPAdress(){//node下的os模块可以拿到启动该文件的服务端的部分信息,细节自己去node上面查
    var interfaces = require('os').networkInterfaces();
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
}

跟自动化有关的代码只有和hotServer有关的几行代码,其实也是经过分析,对于这个server服务,有用的文件只有服务端配置vue-ssr-server-bundle.json和客户端配置vue-ssr-client-manifest.json,我们只要在这两个文件打包之后从新实例化renderer就可以了,应为renderer实例化是通过加载静态文件而生产的一个不再变化的实例;

webpack.hot.config.js也可以写在server.js里面,不过看上去就不太好看,也不符合模块开发的原则;


自动打包

webpack自动打包有watch,或者使用webpack-dev-serve,dev-server会自己启一个服务,然而我们有自己的server,他们之间通信不是不可以,只是比较困难,不适用;watch也是一样,比较独立;
webpack可以独立使用,然而它也只是node中的一个模块,可以作为插件使用,而且可以通过其他插件和express结合使用;

webpack-dev-middleware

webpack-dev-middleware是实现热加载的核心组件,看一下webpack.hot.config.js的内容

//webpack.hot.config.js
const webpack = require('webpack');
//新增webpack-dev-middleware插件
const webpackDevMiddleware = require('webpack-dev-middleware');
const path=require('path')
const clientConfig=require('./webpack.client.config.js')
const serverConfig=require('./webpack.server.config.js')
//输出一个函数给server使用
module.exports = function(server,callBack){
    
    
    let b,c;
    //这里先定义一个run方法,保证vue-ssr-server-bundle.json和vue-ssr-client-manifest.json都有的情况才去执行回调;
    function run(){
        console.log('run');
        if(b && c){
            console.log('runend ')
            callBack({serverBundle:JSON.parse(b),clientManifest:JSON.parse(c)})
        }
    }
    //生成vue-ssr-server-bundle.json
    //实例化webpack
    const serverComplier = webpack(serverConfig);
    middleware = webpackDevMiddleware(serverComplier)
    server.use(middleware);
    //serverComplier是webpack返回的实例,plugin方法可以捕获事件,done表示打包完成
    serverComplier.plugin('done',complation => {
        console.log('serverdown')
        //核心内容,middleware.fileSystem.readFileSync是webpack-dev-middleware提供的读取内存中文件的方法;
        //不过拿到的是二进制,可以用JSON.parse格式化;
        let serverBundle=middleware.fileSystem.readFileSync(path.join(serverConfig.output.path, 'vue-ssr-server-bundle.json'))
        //把拿到的文件复制给b
        b=serverBundle;
        run();
    })
    //生成vue-ssr-client-manifest.json,方法和上面一模一样
    const clientComplier = webpack(clientConfig)
    clientMiddleware = webpackDevMiddleware(clientComplier),{
        noInfo: true,
        stats: {
            colors: true
        }
    }
    server.use(clientMiddleware)
    clientComplier.plugin('done',complation=>{
        console.log('clientdown')
        let clientBundle=clientMiddleware.fileSystem.readFileSync(path.join(clientConfig.output.path, 'vue-ssr-client-manifest.json'))
        c=clientBundle;
        run()
    })

}

webpack-dev-middleware最大的特点就是把打包好的文件放到内存中自己玩,不生成文件,对于大部分项目没有问题,然而ssr需要读取静态文件才能继续玩,webpack-dev-middleware也确实提供了读取文件的方法middleware.fileSystem.readFileSync,类似fs插件;

简单说明下webpack流程,webpack是单线程,在打包的过程中会广播不同的事件告诉大家webpack现在干到哪一步了,webpack()会返回一个实例compalier,通过compalier.plugin('done',()=>{})方式监听webpack的情况,这也是自己编写webpack 插件的核心内容;done就表示打包完了,我们就这这个时候去拿我们想要的文件就对了;


页面自动刷新

默认上面的代码没有bug,下面这个插件没什么讲的,知道怎么用就行了;

webpack-hot-middleware

直接上最终版的代码,server,js没有动,修改下webpack.hot.config.js:

//webpack.hot.config.js
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
//新增webpack-hot-middleware插件
const webpackHotMiddleware = require('webpack-hot-middleware');
const path=require('path')
const clientConfig=require('./webpack.client.config.js')
const serverConfig=require('./webpack.server.config.js')

module.exports = function(server,callBack){

   
    let b,c;
    function run(){
        console.log('run');
        if(b && c){
            console.log('runend ')
            callBack({serverBundle:JSON.parse(b),clientManifest:JSON.parse(c)})
        }
    }
    const serverComplier = webpack(serverConfig) ;
    middleware = webpackDevMiddleware(serverComplier)
    server.use(middleware);
    serverComplier.plugin('done',complation => {
        console.log('serverdown')
        let serverBundle=middleware.fileSystem.readFileSync(path.join(serverConfig.output.path, 'vue-ssr-server-bundle.json'))
        b=serverBundle;
        run();
    })
    //修改入口文件,固定写法
    clientConfig.entry=['./entry-client.js','webpack-hot-middleware/client?reload=true'];
    //新增自动更新插件,固定写法
    clientConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
    //上面两条要写在下面这个实例化之前,很好理解
    const clientComplier = webpack(clientConfig)
    clientMiddleware = webpackDevMiddleware(clientComplier),{
        noInfo: true,
        stats: {
            colors: true
        }
    }
    server.use(clientMiddleware)
    clientComplier.plugin('done',complation=>{
        console.log('clientdown')
        let clientBundle=clientMiddleware.fileSystem.readFileSync(path.join(clientConfig.output.path, 'vue-ssr-client-manifest.json'))
        c=clientBundle;
        run()
    })
    //只需要加载这一个就行了
    server.use(webpackHotMiddleware(clientComplier));

}

node server.js 试一下。讲道理没有问题0.0

上面代码优化的点其实非常多,除了随意的变量名,就是生成两个文件的方式,一样的代码很多,而且vue-ssr-server-bundle.json是不是可以不用webpack-dev-middleware拿。这只是一个简单的例子,能用,但还不够。


总结

实现express+webpack的开发模式就是利用早期的dev-middleware插件,dev-serve只适合纯前端,这里的难点就是怎么从内存中拿到真实的文件,拿到后怎么处理;虽然只是几行代码,理解起来却不太容易;还有就是webpack的打包原理,还是要学一下;


链接: https://fly63.com/article/detial/6392

Webpack配置区分开发环境和生产环境

在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境;

vue 全局环境切换

前端开发经常碰到切换环境的情况,测试环境,开发环境,正式环境,我们在utils中创建一个global.js文件main.js中使用

配置TypeScript工作环境

首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记,可能不会太深入的解读一些原理方面的东西。但尽可能的把基础的入门使用解析清楚,毕竟使用TypeScript来实现的项目一般是比较复杂的项目,不仅仅只是简单的语法使用

typescript开发环境搭建

ts为typescript的缩写,是javascript的超集。由于 Node 的官方模块仓库网速太慢,模块仓库需要切换到阿里的源。执行下面的命令,确认是否切换成功。如果输出为 taobao字样,则表示切换成功

Mac配置PHP开发环境

众所周知,Mac对开发者非常友好,内置了很多开发语言的环境,比如Ruby、Python、PHP,本文主要给大家说一下小明 PHP环境的配置。我们编写好的PHP文件需要在Apache下运行,但Apache服务在Mac种默认是关闭的

vue需要nodejs环境吗?

vue需要nodejs环境,vue是一个js,但是安装它却有点与众不同。安装vue一般是通过npm进行安装,node.js中包括了这个npm,所以安装完node.js就可以使用npm了。使用vue-cli搭建项目时也需要nodejs。

JavaScript运行时环境和标准

JavaScript 主要运行在浏览器端,随着技术不断发展出现很多服务端 JavaScript 运行时,甚至可以做硬件相关的嵌入式开发。

dependencies和devDependencies有区分意义吗?

其实我们并不会去关心哪些是生产环境所需依赖,哪些是开发环境所需依赖,但是这也正常,因为其实在SPA项目中,这两个东西并不需要区分!所以我们平时没有过多了解也正常!

又出新JS运行时了!JS运行时大盘点

在前端技术日新月异的今天,新的 JavaScript 运行时环境不断涌现,它们为开发者提供了更多的选择和可能性。近期,诸如 LLRT 和 WinterJS 等新运行时环境的发布

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!