当前的工作流优化

2016-10-24

开发环境

使用前后端分离开发，前端使用nginx将指定路由指向前端开发目录：

1
2
3

location /gw {
    alias C:\Project\html\web_page_gw;
}

后端使用python开发，web api端口为5000，使用nginx重定向/api的路由：

1
2
3

location /api {
    proxy_pass http://127.0.0.1:5000/api;
}

这样，在前端调用web api时，只需设置/api/xxx即可。

前端

优化之前，前端的主要工具为webpack，如果要实现实时刷新，需要使用webpack-dev-server，因此再开发中需要指明web api的全路径。原先使用全局变量保存web api的地址，像这样：

1	const baseUrl = '127.0.0.1:5000/api/gw';

在发布的时候将地址改回：

1	const baseUrl = '/api/gw';

略微有点繁琐，某天端神问我关于Browsersync的事情，我突然豁然开朗。弃用webpack-dev-server，使用browser-sync-webpack-plugin，配置如下：

    ...
plugins: [        
        new browserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'http://localhost/gw'
        })
    ]
    ...

借助BrowserSync的代理模式，即实现了实时刷新技术，同时保证开发和部署无差异化。

后端

后端使用Flask开发，为了方便部署，使用独立的virtualenv.py文件，将源码分发到远程服务器上，只需要执行

1	python virtualenv.py ENV

1	pip install -r requirements.txt

即可完成安装

远程部署

最近新功能上线，偶尔会遇到一些小bug和小功能调整，一天会更新数次服务端的代码，最开始的时候直接暴力复制粘贴到远程服务器。这个过程需要：复制本地代码->打开远程桌面->粘贴源码，尤其复制python的时候还需要清理pyc文件。为了精简过程，使用Pycharm和Webstorm的Deployment工具，对每个前端和后端项目均做了设置，每次小改动后，只需右键并upload to xxx即可同步远程代码，十分方便。