分析

○Apollo项目中前端代码位于“Apollo\apollo-portal\src\main\resources\static”目录下。

○前端使用的框架和库是jQuery+bootstrap+早期AngularJS，没有webpack配置和前端开发服务器。然后其中的API请求使用的都是相对路径，没有统一配置API请求前缀的地方。另外存在非ajax方式的API请求，也存在服务器API返回值是html页面相对路径的情况，所以它并未实现完全的前后端分离。

○为实现前后端分离开发，需要开发环境下的http服务器，它做两个事情：（1）前端代码的http访问（2）代码中访问服务器API相对地址的转发。

环境搭建

●开发环境http服务器使用nginx完成，nginx的安装与基础配置此处略。

●为Apollo创建一份nginx配置，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
    listen       80; #注意端口占用，可以使用其他端口
    expires      -1; #防止缓存

    location ~* \.(html|js|css) {
      root "H:\\Project_work\\apollo\\apollo-portal\\src\\main\\resources\\static"; #Apollo前端代码路径
    }
    location / {
        proxy_set_header HOST $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://172.16.1.119:8088; #要连接的测试Apollo服务器地址
    }
}

●启用nginx并应用如上配置，访问地址 http://本地IP 就可以开始Apollo前端的本地调试开发了。