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

老項(xiàng)目，React + PHP + nginx

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

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

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

這樣造成什么情況呢？

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

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

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

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

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

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

老項(xiàng)目的運(yùn)行，開發(fā)時(shí)需要先執(zhí)行一個(gè)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的人走光啦，但是老項(xiàng)目要繼續(xù)維護(hù)。

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

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

我使用Koa框架來作為Server

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

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

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

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

nginx還有一個(gè)功能就是靜態(tài)文件服務(wù)器，這個(gè)也可以使用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

測試下，妥妥的！

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

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

（后來想起來，其實(shí)就是我寫的）。。。

參考遷移教程

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

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

老項(xiàng)目改造其實(shí)還有不少坑，等我想起來再慢慢更新。