第十章：Nginx配置详细讲解

素颜马尾好姑娘i 2024-03-17 13:02 87阅读 0赞

**目录**

一、Nginx是什么？

二、下载nginx

三、Nginx配置

四、发布SPA项目以及虚拟域名设置

五、Tomcat集群配置

六、nginx动静分离

--------------------

## 一、Nginx是什么？ ##

> 代理服务器 --> Tomcat  
> HTML服务器

## ![87d1631b40a449979b3d726181f1fcc1.png][] ##

## 二、下载nginx ##

> 下载链接：[http://nginx.org/download/nginx-1.17.10.zip![icon-default.png_t_N5K3][]http://nginx.org/download/nginx-1.17.10.zip][http_nginx.org_download_nginx-1.17.10.zip_icon-default.png_t_N5K3_http_nginx.org_download_nginx-1.17.10.zip]

> **注1：此版本为window版本  
> linux版本**

## 三、Nginx配置 ##

> **解压软件至指定目录，例如：D:\\tools\\nginx-1.17.10**

> **打开cmd容器，切换到nginx安装根目录，即可执行相关命令进行操作**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:234px;"><strong>start nginx.exe&nbsp;</strong></td> 
   <td style="width:264px;"><strong>//启动nginx</strong></td> 
  </tr> 
  <tr> 
   <td style="width:234px;"><strong>&nbsp;nginx.exe -s stop</strong></td> 
   <td style="width:264px;"><strong>//快速停止nginx</strong></td> 
  </tr> 
  <tr> 
   <td style="width:234px;"><strong>nginx.exe -s reload</strong></td> 
   <td style="width:264px;"><strong>//重新加载nginx</strong></td> 
  </tr> 
  <tr> 
   <td style="width:234px;"><strong>nginx.exe -s quit</strong></td> 
   <td style="width:264px;"><strong>//完整停止nginx</strong></td> 
  </tr> 
 </tbody> 
</table>

> **注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
> 
>     if (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命令可以用来清屏**
> 
> #### 3. 根据PID查找进程   继续输入tasklist|findstr "14700"，回车，查看是哪个进程或者程序占用了8005端口，结果是： javaw.exe   javaw.exe 14700 Console 1 313,864 K ####
> 
> #### 4. 此时结果已经很明白了，接下来我们可以到控制面板中的服务区查看此进程，手动关掉它。也可以在cmd中通过命令来关闭它，输入：   taskkill /f /t /im javaw.exe ####

## **Thanks！** ##

[87d1631b40a449979b3d726181f1fcc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/916d7ba29d6d4691a75f09f1575ce358.png
[icon-default.png_t_N5K3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/43d94a1723b5483898a838ddc4269d38.png
[http_nginx.org_download_nginx-1.17.10.zip_icon-default.png_t_N5K3_http_nginx.org_download_nginx-1.17.10.zip]: http://nginx.org/download/nginx-1.17.10.zip