前端测试 api 使用 nginx
使用 Nginx 部署项目是很简单的操作,但是在在前端开发过程中有时需要进行 api 的测试,若直接使用前端框架所提供的服务器来访问后端 api 会出现跨域问题(而这在部署时一般不会出现)。
虽然可以通过后端允许CORS来解决,但是这种解决方法很显然是不优雅的。
而通过 Nginx 的反向代理,可以在不修改前后端的情况下实现:
假设前端服务的访问端口为http://localhost:3000
配置/etc/nginx/nginx.conf:将 80 端口的/目录映射到前端的服务端口,而前端所调用/api/**路径下的的 api 可以通过 Nginx 代理到后端,从而解决跨域问题。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| server {
listen 80;
server_name your_domain_or_ip;
location / {
proxy_pass http://localhost:3000;
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_set_header X-Forwarded-Proto $scheme;
}
location /api/ {
proxy_pass http://your_backend_api;
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_set_header X-Forwarded-Proto $scheme;
}
}
|
其他技巧
Nginx 是一个功能强大的 web 服务器和反向代理服务器,具备许多高级功能和使用技巧。以下是一些常见且实用的 Nginx 使用技巧:
1. 负载均衡
Nginx 可以将请求分配到多个后端服务器,从而实现负载均衡。配置如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| http {
upstream backend {
server backend1.example.com;
server backend2.example.com;
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://backend;
}
}
}
|
2. 缓存静态内容
使用 Nginx 缓存静态内容以提高性能:
1
2
3
4
5
6
| server {
location / {
root /path/to/static/files;
expires 30d;
}
}
|
3. Gzip 压缩
启用 Gzip 压缩以减少传输数据量:
1
2
3
4
5
| http {
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 256;
}
|
4. 安全配置
1
2
3
| http {
server_tokens off;
}
|
1
2
3
4
5
6
7
8
9
| http {
limit_req_zone $binary_remote_addr zone=mylimit:10m rate=1r/s;
server {
location /login/ {
limit_req zone=mylimit burst=5;
}
}
}
|
5. SSL/TLS 配置
启用 HTTPS 并使用强加密:
1
2
3
4
5
6
7
8
9
10
| server {
listen 443 ssl;
server_name example.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/cert.key;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
}
|
6. 重定向和 URL 重写
1
2
3
4
5
6
| server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
|
1
2
3
4
5
| server {
location /oldpath/ {
rewrite ^/oldpath/(.*)$ /newpath/$1 permanent;
}
}
|
7. 访问控制
1
2
3
4
5
6
| server {
location /admin/ {
allow 192.168.1.0/24;
deny all;
}
}
|
1
2
3
4
5
6
| server {
location /admin/ {
auth_basic "Restricted Content";
auth_basic_user_file /etc/nginx/.htpasswd;
}
}
|
8. 日志管理
1
2
3
4
5
6
7
| http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
| logrotate -d /var/log/nginx/*.log {
daily
missingok
rotate 14
compress
notifempty
create 0640 www-data www-data
sharedscripts
postrotate
[ -f /var/run/nginx.pid ] && kill -USR1 `cat /var/run/nginx.pid`
endscript
}
|
9. 动静分离
将静态文件和动态请求分离处理:
1
2
3
4
5
6
7
8
9
| server {
location / {
proxy_pass http://backend;
}
location /static/ {
root /path/to/static/files;
}
}
|
10. 优化连接管理
1
2
3
| events {
worker_connections 1024;
}
|
1
2
3
4
| http {
keepalive_timeout 65;
client_max_body_size 100M;
}
|
11. 配置文件包含
使用包含指令简化配置文件管理:
1
2
3
| http {
include /etc/nginx/conf.d/*.conf;
}
|