openstfの前端开发环境部署1

openstf是什么,服务器端环境如何安装配置此处就不表了,参见: https://testerhome.com/topics/2988

最近需要在openstf上进行二次开发,前端团队这块主要针对界面的程序界面上进行功能调整,由于电脑不是mac,不能在本地私有部署stf环境,所以想依托公共的stf服务端环境 10.0.2.124:7100, 在本地开发调试其前端的js代码.

首选肯定是 nginx,原因参见前端测试环境构建小讲

首先在hosts文件新增一行

127.0.0.1 stf.local

其次在nginx配置文件中新增如下行:

server {
    listen 80;
    server_name stf.local;

    default_type 'text/html; charset=UTF-8';

    location /static/app/build/ {
        alias C:/work/space/stf/res/build/;
    }

    location / {
        proxy_pass http://10.0.2.124:7100/;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_pass_header Server;

        proxy_redirect http://10.0.2.124:7100/ http://stf.local/;
        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        
    }
}
#server stf.local end}

因为 stf会在响应头中大量使用重定向到服务端地址,故使用 proxy_redirect 将响应头中的location 里的http://10.0.2.124:7100/ 转换成 http://stf.local/. 再将 /static/app/build/ 的路径指到本地的代码路径C:/work/space/stf/res/build/,此目录是使用webpack生成的压缩代码.

现在我们就可以在本地访问 http://stf.local 会打开一个登录页,输入用户名和邮箱之后,点击提交按钮,接着会跳到:

http://10.0.2.124:7100/?jwt=eyJhbGciOiJIUzI1NiIsImV4cCI6MTQ4ODE5MDA1NzEyOH0.eyJlbWFpbCI6Inh4QHFxLmNvbSIsIm5hbWUiOiJ4eCJ9.DOOT1yZx6MXtCGzUWoPFxYuJYCw_wIHLslCJxEh5sp8

但这并不是我想要的结果,我想它变成:

http://stf.local/?jwt=eyJhbGciOiJIUzI1NiIsImV4cCI6MTQ4ODE5MDA1NzEyOH0.eyJlbWFpbCI6Inh4QHFxLmNvbSIsIm5hbWUiOiJ4eCJ9.DOOT1yZx6MXtCGzUWoPFxYuJYCw_wIHLslCJxEh5sp8

通过分析代码发现,在

C:\work\space\stf\res\build\5.72bd91b15fb1f9d91db5.chunk.js:32557
因为重定向的页面地址是服务端json串中返回的,所以nginx的proxy_redirect设置并不能防治,所以需要手动将其进行如下修改:
$http.post('/auth/api/v1/mock', data)
          .success(function (response) {
            $scope.error = null;
            console.log(response);
            var redirect = response.redirect.replace('10.0.2.124:7100', 'stf.local');
            location.replace(redirect);
            //return ;
            //location.replace(response.redirect);
          })

此时,就可以完整进行登录,上传,安装等操作.

至此实现了第一个目标,能在本地修改代码并使用本地的前端代码跑起来了.但是缺点是只能修改webpack生成的合并后的代码,开发仍然是很麻烦,下一个目标就是解决此问题