Nginx 是前端工程师的好帮手

Nginx [engine x] 是俄罗斯的 Igor Sysoev 编写的一个 强大的 HTTP 和反向代理服务器,而且也推出了 Windows 版本。Windows 版本使用 select 模型,仅供测试,不推荐在生产环境中使用。

Nginx 强大的反向代理能力,使它成为前端工程师不折不扣的好帮手,关于 Nginx 助力前端开发上的一些使用,可以看看这篇文章,这里说说我的一些使用。

我的前端开发环境是这样的:

1. 我们正式的网站在最外层是一个反向代理,可以代理访问后端部署的一个个子网站。
2. 数据是通过接口提供的,接口与子网站是分开部署的,端口或IP是不同的。
3. 开发的时候,网站是在本机发布和调试的。
4. 请求数据需要通过 ajax 调用接口,接口是部署在另外一台服务器上的。

很明显,我这里遇到的就是跨越的问题 (关于跨域,请看看这里)。 由于最外层反向代理的存在,子网站与接口对外是表现为一个网站,因此没有跨域问题。但是在我的开发机这里,就存在跨域问题了。为了解决它,可以引入一个反向代理,让我开发机上的网站和接口表现为一个网站,就跟我们最外层的反向代理是一样的。

在 Nginx 中可以这么配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
listen *:5000;
access_log logs/mysite_access.log;
error_log logs/mysite_error.log;
# 为了调试方便,我不缓存
expires 0;
# 开启 gzip,跟真实环境一样
gzip on;
# 网站的路径
location / {
root "D:/path/to/mysite/html";
index index.html index.htm;
}
# 静态文件的路径
location /static {
alias "D:/path/to/mysite/static";
}
# 我们的 api 接口会使用特殊前缀 @ 来区分
# 把所有 uri 以 /@api_some_data 开头的转发到接口服务器
location /@api_some_data {
# 看情况,是否需要重写 uri
# rewrite /@api_some_data/(.*) /$1 break;
# 转发到接口服务器的地址
proxy_pass http://192.168.1.2:8000;
proxy_set_header Cookie $http_cookie;
}
}

在 js 中 就可以这么写 ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
url: '/@api_some_data/get_data/',
type: 'POST',
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(post_data),
success: function (response) {
// handle success
},
error: function () {
// handle error
}
});

就这样,借助 Nginx 强大的反向代理功能,我就在开发机上轻松的模拟出了真实环境,并且可以愉快的开发和调试了。