前后端分离 获取客户端ip_单机前后端分离部署方案初探

背景

一台云服务器，前端项目和后端项目单独部署。好处是前后端修改发布独立，不会相互影响。前后端分离是一个大话题，这次只是记录下手动部署的初级方案。

方案

概览

前端项目包括的资源是 html，js，css。后端提供 api 接口。使用 nginx 充当前置服务，如果客户端请求前端资源，则充当静态服务器返回 html，js，css。如果客户端请求 api 接口，则转发到后端 web server。

实施

后端

由于是实验性质的，所以选取 eggjs 作为后端 api 服务。按照教程写一个 api 接口 GET：/api/v1/meta/coutries 获取国家列表。（安装 eggjs 详见官网）启动服务默认绑定到端口 7001，这个时候访问 http://127.0.0.1:7001/api/v1/meta/countries 测试下接口是否通。

前端

把编译好的前端文件放到 /data/www 目录下（假设是 index.html，index.js）。安装 Nginx，修改其配置文件 /etc/nginx/nginx.conf 将默认的 root /usr/share/nginx/html; 修改为: root /data/www;

# other code ...
server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
-   root         /usr/share/nginx/html;
+   root         /data/www;
    # other code
}
# other code

启动 Nginx。假设我们云服务对外IP地址为 172.16.10.199，那么访问下 http://172.16.10.199/index.html 可以访问到网页。

前后端串联

如果我在页面上发起一个 ajax 请求 /api/v1/meta/coutries，实际上页面请求的是 http://172.16.10.199/api/v1/meta/coutries，而我们提供服务的是绑定在 7001 端口的 web 服务。那么我们就在修改下配置把 http://172.16.10.199/api/v1/meta/coutries 转发给 http://127.0.0.1:7001/api/v1/meta/countries。这里因为我们是同一台机器，所以 web 服务请求 127.0.0.1 就可以了。

# other code ...
server {
    # other code
    location /api {
        proxy_pass http://127.0.0.1:7001/api;
    }
}
# other code

这里我只是为了跑通下流程，所以没有配置 location 下其他参数。我们重启 Nginx，然后再访问下 http://172.16.10.199/index.html api 请求也正常返回了。这样我们如果前端修改就不用重新发后端的服务，后端修改也不影响前端。

扩展

这里只是一个最最初级的方案，成熟的方案包括但不限于：

1. 自动化编译部署。
2. CDN。
3. 静态资源按版本号发布。
4. 负载均衡。
5. 微服务。
6. 集群。