nginx简介
参照百度百科
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。
其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011年6月1日，html" class="superseo">nginx 1.0.4发布。
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
优点
Nginx 可以在大多数 Unix Linux OS 上编译运行，并有 Windows 移植版。 Nginx 的1.19.2稳定版已经于2020年8月11日发布，一般情况下，对于新建站点，建议使用最新稳定版作为生产版本，已有站点的升级急迫性不高。Nginx 的源代码使用 2-clause BSD-like license。
Nginx 是一个很强大的高性能Web和反向代理服务，它具有很多非常优越的特性：
在连接高并发的情况下，Nginx是Apache服务不错的替代品：Nginx在美国是做虚拟主机生意的老板们经常选择的软件平台之一。能够支持高达 50,000 个并发连接数的响应，感谢Nginx为我们选择了 epoll and kqueue作为开发模型。
服务器
Nginx作为负载均衡服务：Nginx 既可以在内部直接支持 Rails 和 PHP 程序对外进行服务，也可以支持作为 HTTP代理服务对外进行服务。Nginx采用C进行编写，不论是系统资源开销还是CPU使用效率都比 Perlbal 要好很多。
处理静态文件，索引文件以及自动索引;打开文件描述符缓冲。
无缓存的反向代理加速，简单的负载均衡和容错。
FastCGI，简单的负载均衡和容错。
模块化的结构。包括 gzipping, byte ranges, chunked responses,以及 SSI-filter 等 filter。如果由 FastCG或其它代理服务器处理单页中存在的多个 SSI，则这项处理可以并行运行，而不需要相互等待。
支持 SSL 和 TLSSNI。 [2]
代码
Nginx代码完全用C语言从头写成，已经移植到许多体系结构和操作系统，包括：Linux、FreeBSD、Solaris、Mac OS X、AIX以及Microsoft Windows。Nginx有自己的函数库，并且除了zlib、PCRE和OpenSSL之外，标准模块只使用系统C库函数。而且，如果不需要或者考虑到潜在的授权冲突，可以不使用这些第三方库。
代理服务器
作为邮件代理服务：Nginx 同时也是一个非常优秀的邮件代理服务（最早开发这个产品的目的之一也是作为邮件代理服务器），Last.fm 描述了成功并且美妙的使用经验。
Nginx 是一个安装非常的简单、配置文件非常简洁（还能够支持perl语法）、Bug非常少的服务。Nginx 启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。你还能够不间断服务的情况下进行软件版本的升级。
功能
支持操作系统
- FreeBSD 3— 10 / i386; FreeBSD 5— 10 / amd64;
- Linux 2.2— 4 / i386; Linux 2.6— 4 / amd64; Linux 3— 4 / armv6l, armv7l, aarch64;
- Solaris 9 / i386, sun4u; Solaris 10 / i386, amd64, sun4v;
- AIX 7.1 / powerpc;
- HP-UX 11.31 / ia64;
- Mac OS X / ppc, i386;
- Windows XP, Windows Server 2003,Windows 10
可见，nginx功能还是很强大的，下文讲述的部署方法，支持多系统服务器(如: linux、windows、mac等)，同时也可以部署多种框架的前端项目(如: vue、react、jq等)
看到这里，相信大家对nginx有了一定了解～
接下来小编以Linux为例，来说说nginx如何部署前端页面
nginx安装
可参考
Linux系统nginx安装说明（在线/离线安装）_小慌慌的博客
检查nginx是否安装成功
访问：http://ip/，默认端口80，成功打开nginx默认页面，说明nginx启动成功。如下图所示：
nginx部署前端页面
1. 安装路径：/usr/local/nginx
2. 在/usr/local/nginx目录下有个 html文件夹，这个html文件夹就是放置要部署的前端项目的地方。（同理，其他系统的服务器也找到这个路径，MAC的是在 usr/local/var/www /下，把要部署的前端项目放入即可。）
html 文件夹里面的 index.html 和 50x.html 是 nginx 自带的。index.html 就是 nginx 的欢迎页面，一般用来判断 nginx 是否启动成功。50x.html 页面就是报错页面。
3. 修改配置 /usr/local/nginx/nginx.conf 文件（介绍多种方法）
3.1 配置 /dist/index.html。这种配置是访问的81端口下的子目录dist，记得修改vue项目里面的 assetsPublicPath 和 router的 base 为 dist。
3.1.1 dist 文件夹是一个打包之后的 vue 项目。把dist文件夹放到/usr/local/nginx/html下。浏览器访问：http://ip:81/dist/
#dist文件配置
#浏览器访问：http://ip:81/dist/
server {
listen 81;
server_name localhost;
location /dist {
root html;
index /dist/index.html;
}
}3.1.2 配置 /dist/。这种配置是访问的82端口下dist项目。把dist文件夹放到/usr/local/nginx/下。浏览器访问：http://ip:82/
#浏览器访问：http://ip:82/
server {
listen 82;
server_name localhost;
location / {
root /usr/local/nginx/dist;
index index.html index.htm;
}
}3.2 其他框架项目配置也类似，如配置 /test/web.html。
#法1：浏览器访问 http://ip:83/
server {
listen 83;
server_name localhost;
location / {
root /usr/local/nginx/html/test;
index web.html;
}
}
#法2：浏览器访问 http://ip:83/
server {
listen 83;
server_name localhost;
root /usr/local/nginx/html/test;
}
#---------------------------------------
#法3:浏览器访问 http://ip:84/test
server {
listen 84;
server_name localhost;
location /test {
root html;
index /test/web.html;
}
}4. 修改完nginx配置，可以先检查nginx的配置，再重启nginx即可。
测试命令
/usr/local/nginx/sbin/nginx -t
重启命令
/usr/local/nginx/sbin/nginx -s reload
以上就是linux系统下nginx部署前端页面的多种方法介绍
补充，Mac系统下nginx部署前端页面
如果服务器是mac系统，前端项目如果没有放在nginx的/var/www/目录下的话，访问时可能会报错，如果nginx配置是没错的话，报错的日志就可能是没有权限，如下：
[error] 37614#0: *13 "/Users/admin/Desktop/test/web.html" is forbidden (13: Permission denied), client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", host: "localhost:85"
2个解决方案:
1. 重新安装 homebrew
2. 修改mac系统的权限配置
【建议】Mac系统下最好把被部署的项目直接放到 /var/www/ 目录下即可。因为这个目录就是nginx默认的，就不会有权限问题。