vue ssrサービス側レンダリング-初学開発環境構築

vue ssrサービス側レンダリング-初心者の開発環境構築
前言
デフォルトでは、ssrの基本的な内容と実装が理解されています.よく知らない人は、vue ssrサービス側が白をレンダリングして惑わすことができます.
ネット上で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、私たちはこの2つのファイルをパッケージ化した後に新しいインスタンス化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もファイルを読み取る方法を提供しています.fileSystem.readFileSync、fsプラグインに似ています.
簡単にwebpackの流れを説明して、webpackは単一のスレッドで、パッケージの過程の中で異なる事件を放送してみんなにwebpackが今どこまでやったかを教えて、webpack()は1つの実例のcompalierを返して、compalierを通じて.plugin('done',()=>{})方式でwebpackを傍受する場合、これも自分でwebpackプラグインを作成する核心内容である.doneは梱包が終わったことを示しています.私たちはこの時に私たちが欲しい書類を取りに行きます.
ページの自動更新
デフォルトの上のコードにはバグがありません.下のプラグインは何も言っていません.使い方を知っていればいいです.
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
上のコードの最適化の点は実はとても多くて、勝手な変数名を除いて、2つのファイルを生成する方式で、同じコードが多くて、しかもvue-ssr-server-bundle.jsonはwebpack-dev-middlewareを使わずに持ってもいいですか.これはただの簡単な例で、使えますが、まだ足りません.
まとめ
express+webpackを実現する開発モデルは初期のdev-middlewareプラグインを利用することであり、dev-serveは純粋なフロントエンドにしか適していない.ここの難点はメモリから実際のファイルをどのように手に入れ、手に入れた後にどのように処理するかである.数行のコードですが、理解するのは容易ではありません.あとはwebpackのパッケージの原理ですが、やはり勉強しなければなりません.Nodeの前後端で一緒に開発した開発環境の構築について私のところにも入門した文章があります:手動でvue+node単ページを構築します(一)