个人项目中使用的nginx.conf解读
一、开篇介绍一下项目背景:
我这个项目需要用到的哪些nginx代理,如果你跟我的情况一致,你可以直接复制粘贴使用了,其他情况下就需要做些修改了:
(约定:隐私需要,代表服务器域名ip的我全部使用 127.0.0.1 代替)
1、前端框架+cli:项目使用react-create-app自动化构建的,且没有做eject释放项目webpack配置,标准的单页面应用;
2、前端资源部署:使用 build 打包出来的前端项目资源部署到服务器之后,使用nginx配置代理到 127.0.0.1 的http默认80端口上,关于该配置可参考本人此前的一篇随笔;
3、http请求代理:所有http的接口访问的都是 127.0.0.1:3000/... 的,例如,前端接口访问 ‘api/login’,通过nginx配置之后的实际访问地址为 127.0.0.1:3000/login;
4、webSocket请求代理:项目中使用到了通过socket.io框架包装的webSocket网络请求,通过nginx代理配置所有的webSocket请求到 127.0.0.1:5000 上。
二、完整的nginx.conf配置:
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
#127.0.0.1/api/... 相关的请求代理设置
upstream api {
#将 /api 替换为 127.0.0.1:3000
server 127.0.0.1:3000;
keepalive 2000;
}
server {
#代理端口
listen 80;
#代理ip(需要替换成实际的服务器ip!)
server_name 127.0.0.1;
#80端口根路径代理设置
location /{
#根路径文件夹设置
root /usr/local/webServe/build/;
#默认访问文件设置
index index.html;
#单页面应用,所有请求重定向到index.html上
try_files $uri /index.html;
}
#127.0.0.1/api/... 相关的请求代理设置
location /api/ {
proxy_pass http://api/;
proxy_set_header Host $host:$server_port;
}
#webSocket请求的代理设置
location ^~/socket.io {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
#代理到5000端口上
proxy_pass http://127.0.0.1:5000;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
本来想写个第三点的各配置的分析,想了一下,直接在完整配置文件上注释也挺好。各位需要哪一部分也可以单独复制粘贴。
需要额外说明的一点是:因为使用到了socket.io框架(这个框架包含两个独立部分,node服务端和client客户端部分),所以项目中的webSocket请求url有独特的socket.io标识。