正文
使用Node搭建reactSSR服务端渲染架构
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如题；本文所讲架构主要用到技术栈有：Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, scss，echarts，ant desige
使用Express初始化Node服务
开始本项目首先你的电脑要安装有node，npm这个没什么好说的。其次本次Node服务用的框架是express；所以要安装：express-generator
然后使用express your-project初始化你的express项目
npm install express-generator -g //执行这条命令全局安装express-generator，如果你不想全局安装把-g去掉即可
初始化express项目之后我们开始把react，webpack整合到这个node服务上。
初始化React项目并整合webpack
这里整合webpack使用的是webpack4的版本，如果你熟悉vue-cli(vue-cli3之前的版本)的话你应该会知道webpack配置有多少个文件，这里参考了vue-cli生成的webpack配置。
添加src文件夹
src文件夹下的内容都是整个react的一些核心配置，如请求处理，css样式，公共组件，路由，页面，stores全局状态数据。
配置.babelrc
因为用到ES6，ES7语法所以要配置.babelrc文件。这个文件东西不多下面直接贴出代码
{
"presets": [["es2015", { "modules": false }], "react", "stage-0"],
"plugins": [
"transform-decorators-legacy",
["import", { "libraryName": "antd", "style": "css" }],
"transform-runtime"
]
}
修改Node服务app.js
其实主要是加上这句：app.use('/', reactSSR); 其就是为了项目启动的时候开启热更新并渲染views中reactSSR.ejs这个模板引擎文件从而达到服务端渲染的目的。
项目结构
这里把项目主要的文件夹结构放到最后。
项目GitHub地址：https://github.com/Uwah/node-react
后期部署上服务器之后会找个时间更新博客，主要是用到pm2
