老项目改造记

前言

老项目，React + PHP + nginx

项目情况

PHP端配置

1. PHP运行环境方面：有些人开发环境是wamp（apache + PHP），有些是np（Nginx + PHP）。

2. 操作系统方面：大部分是win环境，少部分是MacOS系统，而服务器却是centOS系统。

目录结构

前端代码是和PHP代码放一起的

问题

这样造成什么情况呢？

1. 有时候PHP开发使用redis做缓存，提交了代码，我拉下来后，发现接口报错，原来是我的PHP没有redis.dll这个文件，跑去问PHP拿dll文件，结果dll的版本和我的PHP版本不匹配，严重影响开发效率。

2. 为了配合运营和推广，服务器上的nginx把线上的链接做了重写，例如：/item_info?id=xxx 变成 /item-info-id-xxx.html，我们前端都要把自己的nginx配置修改一遍，而我们用apache的同学，就要请教运维同学了。

3. 启动np的脚本不是很稳定，有时候默默的自己关闭了，看到接口报错，会甩锅PHP同学，其实是自己的PHP进程崩溃了。

4. 还有一种情况就是，假设周末你在家，需要紧急修改线上代码，你改好jsx文件后发现，自己没装PHP环境！wtf？？？

5. 线上的nginx配置不能完全拿来用，比如nginx会根据你的hostname做处理,比如重写什么的，但是我本地一般都是127.0.0.1，虽然说可以修改hosts文件，把线上域名指向本机，但是改来改去很麻烦。

以我的开发环境为例（nginx1.11 + php5.5 + win10）

老项目的运行，开发时需要先执行一个cmd脚本

@echo off

echo Starting PHP FastCGI...
cd "E:/np/php-5.5.26/"
start /b php-cgi.exe -b 127.0.0.1:9000 -c E:/np/php-5.5.26/php.ini

echo Starting nginx...
cd "E:/np/nginx-1.11.1/"
start /b nginx.exe

========================经历过一次**风波之后================================

做php的人走光啦，但是老项目要继续维护。

现在处在这种尴尬的境地：老项目的不是那么重要，请PHP的开发来呢，成本太高，而且工作量不大，不请呢，遇到PHP端的Bug没办法解决。

最后经过考量，我决定用Nodejs来解决。

使用Nodejs的解决方式

我使用Koa框架来作为Server

接口调用

由于深受本地np环境的折磨我决定使用反向代理，将对/api/的请求转发到线上，这样就可以免去本地运行PHP的烦恼啦。

//反向代理
const proxy = require('koa-proxies');
app.use(proxy('/api', {
    target: isDev ? 'http://test-m.xxx.com:80' : 'http://m.xxx.com:80',
    changeOrigin: true,
    logs: true
}));

这里有个思考，其实如果当时把域名写死，也可以免去反向代理的麻烦，但是想到如果域名一旦发现变动，修改起来就可能容易出错了。。。

rewrite重写

nginx的重写指令如下

 rewrite  ^/groupinfo-(.*)-(.*).html?(.*)$     /groupinfo.html?$1=$2&$3    last;
 rewrite  ^/selection/brand_detail-(.*)-(.*)html?(.*)$          /selection/brand_detail.html?$1=$2&$3   last;

使用koa-rewrite中间件，复制黏贴下就可以用了。

const rewrite = require("koa-rewrite");

app.use(rewrite(new RegExp('^/groupinfo-(.*)-(.*).html?(.*)$'), '/groupinfo.html?$1=$2&$3'));

app.use(rewrite(new RegExp('^/selection/brand_detail-(.*)-(.*)html?(.*)$'), '/selection/brand_detail.html?$1=$2&$3'));

这样就可以一劳永逸啦，一次修改，同时生效，大家再也不需要骚扰运维同学了。

静态文件

nginx还有一个功能就是静态文件服务器，这个也可以使用Koa的中间件完成。

const serv = require('koa-static-server');


app.use(serv({
        rootDir: path.resolve(__dirname, '../../public/'),
    });
);

整个server端代码

/**
 * Created by chenchen on 2017/2/27.
 */
const Koa = require("koa");
let Router = require('koa-better-router');
const serv = require('koa-static-server');
const proxy = require('koa-proxies');
const path = require("path");
var app = new Koa();

const isDev = process.env.NODE_ENV !== 'production';


let router = Router({prefix: '/api'}).loadMethods();
var body = require('koa-better-body');
const rewrite = require("koa-rewrite");


//反向代理
app.use(proxy('/api', {
    target: isDev ? 'http://test-m.xxxx.com:80' : 'http://m.xxxx.com:80',
    changeOrigin: true,
    logs: true
}));

//rewrite
app.use(rewrite(new RegExp('^/groupinfo-(.*)-(.*).html?(.*)$'), '/groupinfo.html?$1=$2&$3'));


app.use(rewrite(new RegExp('^/selection/brand_detail-(.*)-(.*)html?(.*)$'), '/selection/brand_detail.html?$1=$2&$3'));


app.use(body());


app.use(function (ctx, next) {

    console.log(ctx.path);

    return next();
});

app.use(serv({
        rootDir: path.resolve(__dirname, '../../public/'),
        // rootPath: '/',
        // log: true,
        // index: 'noaccess.txt' //避免 路由 / 和 静态文件 /index.html冲突
    })
);


app.listen(8088, _ => {

    console.log('app start at 8088');
});

测试

最后，添加一条npm script

"start-test-server": "nodemon --harmony server/index",

执行

npm run start-test-server

测试下，妥妥的！

编译优化

老项目使用webpack打包，现在看当时的配置文件webpack.config.js，第一反应就是，哪个辣鸡写的？

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 这个插件怎么能在开发的时候使用？

（后来想起来，其实就是我写的）。。。

webpack打包，webpack1升级到webpack2

参考迁移教程

webpack编译优化

这里我就不重复了，可以参考我写的文章

总结

利用现有资源，用Nodejs去配合PHP，优化老项目，同时拓展自己解决问题的思路，我觉得是一次很有趣的经历。

老项目改造其实还有不少坑，等我想起来再慢慢更新。