摘要：前言老項目，項目情況端配置運行環(huán)境方面有些人開發(fā)環(huán)境是，有些是。以我的開發(fā)環(huán)境為例老項目的運行，開發(fā)時需要先執(zhí)行一個腳本經(jīng)歷過一次風(fēng)波之后做的人走光啦，但是老項目要繼續(xù)維護。老項目改造其實還有不少坑，等我想起來再慢慢更新。

老項目，React + PHP + nginx

PHP運行環(huán)境方面：有些人開發(fā)環(huán)境是wamp（apache + PHP），有些是np（Nginx + PHP）。

操作系統(tǒng)方面：大部分是win環(huán)境，少部分是MacOS系統(tǒng)，而服務(wù)器卻是centOS系統(tǒng)。

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

這樣造成什么情況呢？

有時候PHP開發(fā)使用redis做緩存，提交了代碼，我拉下來后，發(fā)現(xiàn)接口報錯，原來是我的PHP沒有redis.dll這個文件，跑去問PHP拿dll文件，結(jié)果dll的版本和我的PHP版本不匹配，嚴(yán)重影響開發(fā)效率。

為了配合運營和推廣，服務(wù)器上的nginx把線上的鏈接做了重寫，例如：/item_info?id=xxx 變成 /item-info-id-xxx.html，我們前端都要把自己的nginx配置修改一遍，而我們用apache的同學(xué)，就要請教運維同學(xué)了。

啟動np的腳本不是很穩(wěn)定，有時候默默的自己關(guān)閉了，看到接口報錯，會甩鍋PHP同學(xué)，其實是自己的PHP進程崩潰了。

還有一種情況就是，假設(shè)周末你在家，需要緊急修改線上代碼，你改好jsx文件后發(fā)現(xiàn)，自己沒裝PHP環(huán)境！wtf？？？

線上的nginx配置不能完全拿來用，比如nginx會根據(jù)你的hostname做處理,比如重寫什么的，但是我本地一般都是127.0.0.1，雖然說可以修改hosts文件，把線上域名指向本機，但是改來改去很麻煩。

以我的開發(fā)環(huán)境為例（nginx1.11 + php5.5 + win10）

老項目的運行，開發(fā)時需要先執(zhí)行一個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

========================經(jīng)歷過一次**風(fēng)波之后================================

做php的人走光啦，但是老項目要繼續(xù)維護。

現(xiàn)在處在這種尷尬的境地：老項目的不是那么重要，請PHP的開發(fā)來呢，成本太高，而且工作量不大，不請呢，遇到PHP端的Bug沒辦法解決。

最后經(jīng)過考量，我決定用Nodejs來解決。

我使用Koa框架來作為Server

由于深受本地np環(huán)境的折磨我決定使用反向代理，將對/api/的請求轉(zhuǎn)發(fā)到線上，這樣就可以免去本地運行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
}));

這里有個思考，其實如果當(dāng)時把域名寫死，也可以免去反向代理的麻煩，但是想到如果域名一旦發(fā)現(xiàn)變動，修改起來就可能容易出錯了。。。

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中間件，復(fù)制黏貼下就可以用了。

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"));

這樣就可以一勞永逸啦，一次修改，同時生效，大家再也不需要騷擾運維同學(xué)了。

nginx還有一個功能就是靜態(tài)文件服務(wù)器，這個也可以使用Koa的中間件完成。

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


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

/**
 * 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" //避免 路由 / 和 靜態(tài)文件 /index.html沖突
    })
);


app.listen(8088, _ => {

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

最后，添加一條npm script

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

執(zhí)行

npm run start-test-server

測試下，妥妥的！

老項目使用webpack打包，現(xiàn)在看當(dāng)時的配置文件webpack.config.js，第一反應(yīng)就是，哪個辣雞寫的？

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 這個插件怎么能在開發(fā)的時候使用？

（后來想起來，其實就是我寫的）。。。

參考遷移教程

這里我就不重復(fù)了，可以參考我寫的文章

利用現(xiàn)有資源，用Nodejs去配合PHP，優(yōu)化老項目，同時拓展自己解決問題的思路，我覺得是一次很有趣的經(jīng)歷。

老項目改造其實還有不少坑，等我想起來再慢慢更新。