目录
一、Nginx是什么？
二、下载nginx
三、Nginx配置
四、发布SPA项目以及虚拟域名设置
五、Tomcat集群配置
六、nginx动静分离
一、Nginx是什么？
代理服务器 --> Tomcat
HTML服务器
二、下载nginx
下载链接：http://nginx.org/download/nginx-1.17.10.ziphttp://nginx.org/download/nginx-1.17.10.zip
注1：此版本为window版本
linux版本
三、Nginx配置
解压软件至指定目录，例如：D:\tools\nginx-1.17.10
打开cmd容器，切换到nginx安装根目录，即可执行相关命令进行操作
| start nginx.exe | //启动nginx |
| nginx.exe -s stop | //快速停止nginx |
| nginx.exe -s reload | //重新加载nginx |
| nginx.exe -s quit | //完整停止nginx |
注1：nginx默认使用80端口，这就是绝大多数网站对外的端口，网站其它端口应该都在防火墙的保护之下
注2：windows下nginx启动一闪而过且nginx启动失败，原因：有可能是80端口被占用的缘故，修改nginx端口即可
注3：如何修改nginx的端口号?
找到配置文件nginx_home/conf/nginx.conf
server {
#listen 80; #默认端口
listen 8088; #自定义端口
...
...
}
注4：nginx.conf文件中，#号为注解，代码必须以;号结尾重要~~~~~~~~重要~~~~~~~~重要~~~~~~~~
四、发布SPA项目以及虚拟域名设置
1. 打包SPA项目，将打包后的dist目录复制到D:\tools\nginx-1.17.10\html，并更名为crm，最终SPA项目根目录为
D:\tools\nginx-1.17.10\html\crm
2. 修改server节点
server { listen 80; #监听80端口，可以改成其他端口 #server_name localhost; #当前服务的域名(虚拟域名也可以) server_name www.zking.com; #当前服务的域名(虚拟域名也可以) root html/crm; #将要访问的网站的根目录，nginx节点会自动继承父节点的配置 #charset koi8-r; #access_log logs/host.access.log main; location / { #root html/crm; #将要访问的网站的根目录 #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍 try_files $uri $uri/ /index.html; } }注1：通过虚拟域名访问，还要修改window的hosts文件添加虚拟域名映射。
文件位置如下：
C:\Windows\System32\drivers\etc\hosts
另外，此文件有可能出现由于当前用户权限不够，出现无法修改的情况？解决方案
将此文件复制到d硬盘任一目录，修改后，再复制替换 C:\Windows\System32\drivers\etc\hosts原文件
五、Tomcat集群配置
upstream tomcat_list{ #服务器集群名字 server 127.0.0.1:8080 weight=1; #服务器1 weight是权重的意思，权重越大，分配的概率越大。 #server 172.17.0.4:8080 weight=2; #服务器2 weight是权重的意思，权重越大，分配的概率越大 }注1：upstream节点是http节点的儿子，与server节点是兄弟关系，不要搞错了
六、nginx动静分离
1.修改spa项目的api/actions的server将其修改为生产阶段，并添加一个/api前缀
export default { //服务器 //'SERVER': 'http://localhost:8080/crm',//开发阶段 'SERVER': 'http://www.zking.com/api/crm',//生产阶段改为服务器的域名,并添加/api前缀 ..... }
2.前缀“/api”的作用
location ^~/api/ { #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api proxy_pass http://tomcat_list/; }http://www.zking.com/api/crm/sys/userLogin.action?username=zs&password=123
127.0.0.1:8080/crm/sys/userLogin.action?username=zs&password=123
172.17.0.2:8080/crm/sys/userLogin.action?username=zs&password=123
附录一：hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件build: { // assetsPublicPath: '/',//修改前 assetsPublicPath: './',//修改后 }
附录二：hbuilderX打包vue项目，element-ui的icon图标无法正常显示问题
问题：使用vue-cli3脚手架搭建的项目，在打包文件上服务器的时候，其他的css，js样式都能正确加载出路径，但是element的icon图标却不能正常加载出来。问题分析：
加载的路径https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
本应该加载的路径https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff
打包的路径
事实上是打包时候读取的文件路径多了两层；
找到build文件的utils.js 中有打包的路径，看看generateLoaders();
Extract CSS when that option is specified, 指定该选项时提取CSS
发现少了个公共路径，加上pubilcPath文章来源：https://www.toymoban.com/news/detail-518865.htmlif (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', // 解决icon路径加载错误 publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) }
附录二：win10系统端口被占用怎解决
1. 开始---->运行---->cmd，以<<<管理员>>>身份调出命令窗口
2. 查看被占用端口对应的PID(即进程ID)，输入命令：netstat -aon|findstr "端口号"，回车，记下最后一位数字，即PID，
示例如下：
#查看端口8005的使用情况
netstat -aon|findstr "8005"
#命令窗口显示的数据格式如下：
TCP 127.0.0.1:8005 0.0.0.0:0 LISTENING 14700注1：netstat -ano命令可以用来查看所有端口使用情况，netstat -ano | findstr "8005" 查看指定端口号的使用情况
注2：cls命令可以用来清屏文章来源地址https://www.toymoban.com/news/detail-518865.html3. 根据PID查找进程
继续输入tasklist|findstr "14700"，回车，查看是哪个进程或者程序占用了8005端口，结果是： javaw.exe
javaw.exe 14700 Console 1 313,864 K4. 此时结果已经很明白了，接下来我们可以到控制面板中的服务区查看此进程，手动关掉它。也可以在cmd中通过命令来关闭它，输入：
taskkill /f /t /im javaw.exe
Thanks！
到了这里，关于第十章：Nginx配置详细讲解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
