Nginx简易使用

Nginx是一款十分轻量级的 HTTP 服务器，其主要功能有Web服务开启、反向代理、Web缓存等，前端主要借助它开启一个本地服务和接口反向代理功能，这里也就简单讲解一下它的这两个使用方法。

一、文件下载

前端使用直接把Nginx下载到本地就行了，到官网 Nginx (opens new window) 找一个版本下载，然后解压到本地就可以使用了。

打开查看其目录结构如下，nginx.conf为配置文件，不论开启本地服务还是配置反向代理都在此文件中进行配置，html为开启本地服务指定的文件夹，部署时把静态文件放进去，nginx.exe就是开启服务的应用的程序，可以直接点击运行也可以使用命令。

├── conf
│   ├── nginx.conf       # 配置文件
│   └── ...
├── contrib              # 环境配置文件
├── docs                 #
├── html                 # web文件
├── logs                 # 日志文件
├── temp                 # 
└── nginx.exe            # nginx应用程序

二、开启本地服务

我们可以把Vue项目打包生成的dist文件或者静态文件部署到nginx上开启本地服务进行查看，开启服务主要有以下步骤。

1、指定静态文件

指定静态文件就是Nginx服务要启动的前端页面，默认直接把静态文件放到html文件夹中就可以了，或者和在服务器上部署一样，在nginx.conf文件中指定root为某个静态文件目录。

2、配置nginx.conf

要启动服务需要在nginx.conf文件的http模块中指定server的监听端口、地址、和启动目录，我们打开nginx.conf文件查看有一个默认监听模块server，这个server监听的就是html中的静态文件开启http://localhost:80服务。

# http块 可以嵌套多个server
http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        listen       80; #监听端口
        server_name  localhost; # 监听服务地址
        location / { # 指定静态文件
            root   html; # 默认html文件夹，也可以指定其他本地目录
            index  index.html index.htm; # 首页文件
        }

        # 反向代理
        #location /api {
        #    proxy_pass   http://127.0.0.1;
        #}
    }
}

3、开启服务

配置好配置文件后，不要直接双击nginx.exe程序，双击开启会导致无法更新和停止，需要手动结束进程才行，我们使用命令来开启服务，回到nginx.exe文件夹下打开终端执行下面命令就开启了，然后打开网页访问http://localhost:80就可以看到启动的页面了。

# 开启服务
start nginx
# 或者
./nginx.exe

三、监听多个服务

nginx可以同时开启多个服务，只要在http模块中添加多个server 就行，listen和server_name都可以配置不同的端口和地址，root中也可以指定不同的静态文件目录，可以是html中的子文件，也可以是电脑本地的其他文件，root指定的路径最好不要包含中文和空格或者特殊符号。

# http块 可以嵌套多个server
http {
    include       mime.types;
    default_type  application/octet-stream;

    # 监听80端口
    server {
        listen       8000;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
    }
    # 监听3000端口
    server {
        listen       3000;
        server_name  localhost;
        location / {
            root   D:/GitProjects/blog; # 本地文件
            index  index.html index.htm;
        }
        location ~ ^/(\w+/\blog)/ {
            try_files $uri $uri/ /$1/index.html;
        }
        location /shop-api {
            proxy_pass  http://xxx.com/shop-api; 
        }
    }
}

四、反向代理

Vue项目中出现跨域我们可以在vue.config.js中配置proxy代理进行解决，如果不是Vue项目或者多个测试项目都需要指定代理地址，我们就可以借助nginx的proxy_pass进行全局反向代理，只要在你电脑上监听到请求某个地址就可以进行反向代理。

server中的端口和地址可以是你开启nginx本地服务，也可以指定你Vue项目启动的服务，都可以进行监听和代理到某个地址，代理的地址不在一个局域网下也可以进行反向代理。

# http块
http {
    include       mime.types;
    default_type  application/octet-stream;
    # 监听80端口
    server {
        listen       8000;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        # 反向代理
        location /content {
            proxy_pass   http://shimo.com;
        }
    }
    
    server {
        listen       8080; #监听端口
        server_name  192.168.1.229; # 监听服务地址

        # 反向代理
        location /api {
            proxy_pass   http://baidu.com;
        }
    }
}

五、常见命令

# 开启服务
start nginx
# 重新加载
nginx -s reload
# 快速停止nginx
nginx -s stop
# 平稳停止nginx
nginx -s quit
# 测试配置文件是否有语法错误
nginx -t

# 如果提示报错使用 ./nginx
./nginx -s reload
./nginx -s quit
./nginx -s quit