基于umi框架进行ssr 改造

项目背景：为了支持seo ,对项目进行ssr改造
项目现状：本项目基于antd pro 进行开发，后台服务一般不考虑呢seo,所以不支持服务端 渲染，需要进行 改造：
1.删除全局引用的插件 ，改造使用方式，Word-cloud，Use common，qkMessage
2.删掉初始化 使用window对象的方法 authHeaderInterceptor
3.修改and pro 全局方法 删除app.ts文件，删除config的配置：Layout
4.改造 initialState的使用方式，换别的方式全局存储数据

部署：
Yarn build 生成文件，会多一个umi.server.js文件
部署node 服务，使用koa 框架
引用umi.server.js 文件，指定 静态文件路径，umi.css
访问node服务，就是服务端渲染的页面了
http://Localhost:7001
const Koa = require(“koa”);
const compress = require(“koa-compress”);
const mount = require(“koa-mount”);
const { join, extname } = require(“path”);
// const { staticPath } = require(“./conf/webConf”);
const root = join(__dirname, ‘./‘);

const app = new Koa();
app.use(
compress({
threshold: 2048,
gzip: {
flush: require(“zlib”).constants.Z_SYNC_FLUSH,
},
deflate: {
flush: require(“zlib”).constants.Z_SYNC_FLUSH,
},
br: false, // 禁用br解决https gzip不生效加载缓慢问题
})
);

let render;
app.use(async (ctx, next) => {
const ext = extname(ctx.request.path);
// 符合要求的路由才进行服务端渲染，否则走静态文件逻辑
if (!ext) {
if (!render) {
render = require(./dist/umi.server); // 上文中生产的umi.server.js 入口文件的位置
}
// 这里默认是字符串渲染
ctx.type = “text/html”;
ctx.status = 200;
const { html, error } = await render({
path: ctx.request.url,
});
if (error) {
console.log(“————————服务端报错—————————“, error);
ctx.throw(500, error);
}
ctx.body = html;
} else {
await next();
}
});

App.use(mount(“/“, require(“koa-static”)(root))); // 静态资源位置 注意此处，要与访问的url相匹配，比如现在配置的， 就是以/base开头的静态资源重定向到 root指代到目录

app.listen(7001); // 服务监听端口
module.exports = app.callback();
访问 http://localhost:7001就是我们的页面了