(八)关于滴滴 AgileTC用例平台的前后端分离部署方案

背景

滴滴的AgileTC是个非常优秀的用例平台，但是对于二次开发来说确实有一点不太友好，因为他提供的方案是直接在后端的项目里面打包了前端编译后的代码。这个就导致了，每次前端代码更新了以后还需要编译后提交到后端的项目中去，然后再去打包后端的项目。这个是非常难受的事情的。

改造

AgileTC的前端是采用UMI进行开发的, 在开发环境下是支持内置的dev-server并且进行代理转发的，但是生产环境下是不支持代理的，通过它本身的产物就是一个js的文件，所以我们是需要有个额外的服务端来做转发的情况，这里最实用的就是考虑通过nginx容器来进行转发。

这里我们看下nginx的配置

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
            root /app/public/;
            index  index.html index.htm;
            try_files $uri /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

我们这里将前端的代码打包放置到nginx容器/app/public即可，这个是否请求到nginx后都会返回对应目录下index.html文件

下来就是负载均衡的配置问题了，就是最外层的nginx路由怎么走的情况 我们来看下配置吧，

因为我们的包部署平台已经将nginx的配置做成界面话了，所以可以看到，我们只有请求路径是/api

的情况下才请求到后端服务去，而其他路径都默认转发到前端去请求index.html