Windows下安装Nginx

叁歲伎倆 2023-01-07 08:54 162阅读 0赞

### 前言 ###

Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站　点（俄文：Рамблер）开发的  
　　  
它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。

### 安装步骤 ###

1、下载Nginx

下载地址：[http://nginx.org/en/download.html][http_nginx.org_en_download.html] （Nginx官网）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]

2、下载之后，解压到指定的目录，就可以看到以下的目录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]  
3、控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 2]  
4、nginx命令介绍

（1）start nginx 开启nginx服务

（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息

（3）nginx.exe -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息

(4) nginx.exe -s reload 重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx  
(5) 使用 `taskkill /F /IM nginx.exe > nul`命令强关nginx服务器

### 访问自己的项目 ###

### hash模式 ###

1.  打包

npm run build

1.  把生成的dist目录，放到`html`目录下。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 3]
2.  浏览器访问：localhost/dist/index.html就可以看到页面了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 4]

### history模式 ###

> 当你使用 history 模式时，url就像正常的url，例如  
> “http://yoursite.com/mapp/”，不过这种模式还需要后台配置支持。因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器直接访问 "http://yoursite.com/mapp/home"就会返回 404。

location / {
      try_files $uri $uri/ /index.html;
    }

##### 子目录部署 #####

若项目没有直接部署在Nginx主目录下,而是在其子目录，如：  
Nginx配置root路径为:`/usr/local/nginx/html`，子目录路径为：`/usr/local/nginx/html/dist`,此时Nginx应该这样配置:

location / {
      try_files $uri $uri/ /dist/index.html;
    }

### Nginx 转发时Header中信息丢失 ###

通过Nginx转发后, Header中access\_token信息丢失，经查，发现Nginx在转发时，header中带下划线\_的属性默认不转发，需要增加配置：

underscores_in_headers on;

如下所示

location / {
    root   html/dist/;
    try_files $uri $uri/ /dist/index.html;  
    index index.html;
            }

[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]: /images/20221119/361016fe65de4cc894f4c5e8d83996f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]: /images/20221119/06fdda4bdfd448d6ab258297dd64ba3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 2]: /images/20221119/541c847d86fa47c6b142f62d18cd77f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 3]: /images/20221119/d4f32c2d8c4c4e7db5f90d92753f448a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 4]: /images/20221119/5b1caa1e9d614c5e9e8f30d23d107ba2.png