目录
前言
现在流行spa单页面前台端分离开发，这样的话，前端的应用就需要单独在服务器上面部署了，Nginx非常适合前端应用的部署
Nginx简介
Nginx是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP代理服务器。
Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器，并在一个BSD-like协议下发行。由俄罗斯的程序设计师lgor Sysoev所开发，供俄国大型的入口网站及搜索引擎Rambler使用。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好。
Nginx相较于Apache\lighttpd具有占有内存少，稳定性高等优势，并且依靠并发能力强，丰富的模块库以及友好灵活的配置而闻名。在Linux操作系统下，nginx使用epoll事件模型,得益于此，nginx在Linux操作系统下效率相当高。同时Nginx在OpenBSD或FreeBSD操作系统上采用类似于Epoll的高效事件模型kqueue.
Nginx配置详解
########### 每个指令必须有分号结束。################# #user administrator administrators;#配置用户或者组，默认为nobody nobody。 #worker_processes 2;#允许生成的进程数，默认为1 #pid /nginx/pid/nginx.pid; #指定nginx进程运行文件存放地址 error_log log/error.log debug;#制定日志路径，级别。这个设置可以放入全局块，http块，server块，级别以此为：debug|info|notice|warn|error|crit|alert|emerg events { accept_mutex on; #设置网路连接序列化，防止惊群现象发生，默认为on multi_accept on;#设置一个进程是否同时接受多个网络连接，默认为off #use epoll;#事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport worker_connections1024;#最大连接数，默认为512 } http { include mime.types; #文件扩展名与文件类型映射表 default_typeapplication/octet-stream; #默认文件类型，默认为text/plain #access_log off; #取消服务日志 log_format myFormat $remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for; #自定义格式 access_log log/access.log myFormat;#combined为日志格式的默认值 sendfile on; #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。 sendfile_max_chunk 100k;#每个进程每次调用传输数量不能大于设定的值，默认为0，即不设上限。 keepalive_timeout 65;#连接超时时间，默认为75s，可以在http，server，location块。 upstream mysvr { server 127.0.0.1:7878; server 192.168.10.121:3333 backup;#热备 } error_page 404 ; #错误页 server { keepalive_requests 120; #单连接请求上限次数。 listen 4545; #监听端口 server_name127.0.0.1; #监听地址 location~*^.+$ { #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。 #root path;#根目录 #index vv.txt;#设置默认页 proxy_pass;#请求转向mysvr 定义的服务器列表 deny 127.0.0.1;#拒绝的ip allow 172.18.5.54; #允许的ip } } }上面是nginx的基本配置，需要注意的有以下几点：
1.$remote_addr 与 $http_x_forwarded_for 用以记录客户端的ip地址；2.$remote_user ：用来记录客户端用户名称；3.$time_local ： 用来记录访问时间与时区；4.$request ： 用来记录请求的url与http协议；5.$status ： 用来记录请求状态；成功是200；6.$body_bytes_s ent ：记录发送给客户端文件主体内容大小；7.$http_referer ：用来记录从那个页面链接访问过来的；8.$http_user_agent ：记录客户端浏览器的相关信息；前端Spa应用部署
打包vue项目
npm run build通过上面命令后打包好的静态资源将输出到dist目录中。如图所示
修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段
server { listen 80;#默认端口是80，如果端口没被占用可以不用修改 server_namemy.web.com; #charset koi8-r; #access_loglogs/host.access.logmain; root/web/dist;#vue项目的打包后的dist location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 indexindex.html index.htm; } #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件 #因此需要rewrite到index.html中，然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } #.......其他部分省略 }完成nginx配置后重新加载配置文件，命令如下（ps:需要在安装的根路径下执行）：
nginx -s reload浏览器中访问：http://my.web.com
通常情况下ngxin是安装到单独的服务器上，因此一般是把vue打包后的dist仍到服务上的具体位置，然后修改nginx.conf的root路径来指向我们的dist。
觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧