什么是Nginx
Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。
前端使用Nginx的业务场景
- 单页面应用的开发与部署
- 传统页面的本地开发
- 前端直接调用三方接口
运行原理
graph LR
访问-->nginx服务
nginx服务-->前端服务
nginx服务-->接口服务
nginx服务-->第三方服务
配置文件详解
http{
server {
# 端口号
listen 80;
# 监听443
listen 443;
# https 开启
ssl on;
# https 证书
ssl_certificate /root/ssl/SSL.crt;
ssl_certificate_key /root/ssl/private.key;
# 服务地址ip或者域名
server_name www.ahh5.com;
# 默认请求文件(可忽略)
index index.html index.php
# 本地文件存放目录(例如html,css,js,img)
root /www/wwwroot/测试;
# http强制转换https
if ($server_port !~ 443){
rewrite ^(/.*)$ https://$host$1 permanent;
}
# 日志路劲设置
access_log /var/log/nginx/nginx.vhost.access.log;
error_log /var/log/nginx/nginx.vhost.error.log;
#错误页配置
error_page 404 /404.html;
error_page 502 /502.html;
# = 开头表示精确匹配
location = / {
}
# ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可。nginx不对url做编码,
location ^~ /static/ {
}
# ~ 开头表示区分大小写的正则匹配
location ~ \.(gif|jpg|png|js|css)$ {
}
# ~*开头表示不区分大小写的正则匹配
location ~* \.png$ {
}
# !~ 区分大小写不匹配
location !~ \.xhtml$ {
}
# !~* 不区分大小写不匹配
location !~* \.xhtml$ {
}
# / 通用匹配,任何请求都会匹配到。
location / {
}
# location 详解
location /home{
# 设置默认文件
index index.html;
# 设置静态目录
root /webroot/static/;
# 端口转发
proxy_pass http://www.ahh5.com:8080/index
# header 设置host
proxy_set_header Host $host;
# header 设置 ip 1
proxy_set_header X-Real-IP $remote_addr;
# header 发出请求的客户机的完整的域名
proxy_set_header REMOTE-HOST $remote_addr;
# X-Forwarded-For 代理信息内容
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}
匹配顺序
首先匹配 =,其次匹配^~, 其次是按文件中顺序的正则匹配,最后是交给 / 通用匹配。当有匹配成功时候,停止匹配,按当前匹配规则处理请求。
匹配及转发规则
Location block 的基本语法形式是:
location [=|~|~*|^~] pattern { ... }
[=|~|~*|^~] 被称作 location modifier ,这会定义 Nginx 如何去匹配其后的 pattern ,以及该 pattern 的最基本的属性(简单字符串或正则表达式)
实际应用
开发环境(spa)
http{
server {
#配置端口号
listen 9999;
#配置server_name
server_name 127.0.0.1;
#设置默认页面 地址为webpack-devserver地址
location = / {
proxy_pass http://127.0.0.1:8888/#/home;
}
#这里因为我的的vue-router 所以将带#号的请求转发到本地服务器
location ~ .*#.*$ {
proxy_pass http://127.0.0.1:8888;
}
#请求网页 图片 icon 等都会转发到本地服务器上
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
proxy_pass http://127.0.0.1:8888;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://10.10.1.135:8080;
}
}
}
测试环境(spa)
http{
server {
#配置端口号
listen 9999;
#配置server_name
server_name 127.0.0.1;
#设置默认页面 root 为静态文件目录
location = / {
index index.html;
root /html;
}
#这里因为我的的vue-router 所以将带#号的请求转发到静态目录
location ~ .*#.*$ {
root /html;
}
#请求网页 图片 icon 等都会转发到nginx静态目录下
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
root /html;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://10.10.1.135:8080;
}
}
}
生产环境搭建(spa)
http{
server {
#配置端口号
listen 80;
#配置server_name
server_name www.xxx.com;
#设置默认页面 root 为静态文件目录
location = / {
index index.html;
root /html;
}
#这里因为我的的vue-router 所以将带#号的请求转发到静态目录
location ~ .*#.*$ {
root /html;
}
#请求网页 图片 icon 等都会转发到nginx静态目录下
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
root /html;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://api.xxx.com;
}
}
}
开发环境搭建(传统页面)
http{
server {
#配置端口号
listen 80;
#配置server_name
server_name www.xxx.com;
#设置默认页面 root 为静态文件目录
location = / {
index index.html;
root /html;
}
#请求网页 图片 icon 等都会转发到nginx静态目录下
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
root /html;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://api.xxx.com;
}
}
}