一、nginx简介

• 高性能的http和反向代理服务器（一款轻量级的Web服务器、反向代理服务器）
• 占有内存小，并发能力强
• 专门为性能优化开发的

这里我就不过多赘述

二、服务器前期准备（个人使用的是ubuntu）

1. 安装nginx:

使用语句： apt install nginx 安装结束后使用nginx -v查看版本号：

或者直接在浏览访问ip地址出现以下页面： 安装成功

错误分析：

（1）如果出现以下问题，只需使用“apt-get update”更新apt即可 更新apt: （2）如果浏览器访问ip地址显示无法访问：

但是使用nginx -v查看nginx已经安装成功了并且使用 ps -ef | grep nginx查看nginx也已经启动但是使用nginx -v查看nginx已经安装成功了并且使用 ps -ef | grep nginx查看nginx也已经启动

此时应该怀疑是安全组配置或者防火墙打开导致端口号未被允许的原因 （补充："ps"命令:查看进程；ps -e:查看所有进程；grep命令是一种强大的文本搜索工具，它能[使用正则表达式]搜索文本，并把匹 配的行打印出来。）

• 查看服务器安全组配置是否配置了80端口：

• 使用“sudo ufw status”查看防火墙状态：

  可以看出防火墙已经被打开了但是并没有允许任何端口，此时相当于所有端口都是被禁止的

以下介绍两种暴露80端口方法：

a. 关闭防火墙：sudo ufw disable：(补充：启用防火墙命令为：sudo ufw enable) 此时再查看防火墙状态可以看到防火墙已经被关闭：

	如果担心防火墙开机自启使用“systemctl stop firewalld.service”永久关闭防火墙
	(补充、如果是centos系统：

b. 单独暴露80端口：sudo ufw allow 80/tcp（补充：禁用80端口：sudo ufw delete allow 80/tcp） 此时查看服务器状态可以看到防火墙是打开的但是80端口已经被单独开放

	注：当然其实还可以专门设置某一个指定的ip地址允许访问本机的所有端口或指定端口

2. 安装npm

apt install npm

全局安装n来管理node(可选)： npm -g install n

三、使用nginx发布前端vue项目

1.配置nginx.conf:

错误分析： （1）如果没写try_files $uri$uri/ /index.html;这句跳转路由会报404： 这是因为router设置的模式是mode: 'history'，即部署到服务器上后如当跳转路由/login时服务器会该目录下去找login文件，而我们的vue项目下面并没有该文件，自然就报404了；

而我们需要的是服务器依旧返回index.html文件给我们，此时就需要用到try_files：

try_files指令作用：按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
第一个$uri: 只设置内部URI的指向; 第二个$uri:回退URI(如果没有会出现500错误)
大意就是它会按照try_files后面的参数依次去匹配root中对应的文件或文件夹。如果匹配到的是一个文件，那么将返回这个文件；如果匹配到的是一个文件夹，那么将返回这个文件夹中index指令指定的文件。最后一个uri参数将作为前面没有匹配到的fallback。

（2）如果没写对try_files $uri$uri/ /index.html;这句的话网站会报500：

（3）报403错误： 可能性如下： a. 权限问题，如果nginx没有该目录的操作权限，也会出现403错误。比如将vue项目发布在/root目录下，但是默认的nginx并没有访问root文件的权限 解决：在nginx.conf中将user改为有权限的用户名:

b. 不存在nginx中配置文件中代理的指定文件

(4) 打开nginx.conf文件报以下错误： 原因：上次操作未正确关闭nginx.conf文件（使用vim编辑某文件的时候，会产生一个swp文件 .FILENAME.swp；在正常编辑结束退出的时候，该文件会被自动删除） 解决：删掉该文件再重新打开即可：