Nginx前端项目部署

一、nginx使用

下载地址
https://nginx.org/en/download.html

解压到英文地址下，注意一定不要解压到中文路径下，不听老人言，吃亏在眼前，路径有中文，一定坑死人

二、启动 nginx 服务器

直接双击该目录下的"nginx.exe"，即可启动nginx服务器；
命令行进入该文件夹，执行start nginx命令，也会直接启动nginx服务器
记得在任务管理器中查看nginx.exe的状态哟！！

	在cmd中执行命令
	start nginx          // 启动nginx
	nginx –s stop        // 关闭nginx进程
	nginx –s reload      // 修改完配置文件后重新加载
	nginx –s reopen      // 打开日志文件
	nginx –s quit        // 处理完当前请求后关闭

监测是否开启

在浏览器中输入 localhost:80 监测服务是否开启（默认服务器在localhost:80端口）

三、配置nginx

• 将打包好的dist文件夹放到nginx文件夹下或者html文件夹下(路径不同的话配置中的路径需要修改) 我的nginx文件加路径如下：

nginx-1.20.0
  |__conf
  |__contrib
  |__dist
  |__docs
  |__html
  |__logs
  |__temp
  |__nginx.exe

四、使用vscode 打开 nginx

打开 /conf/nginx.conf

我的配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;    // 项目打开服务的端口
        server_name  localhost;  // 项目打开的域名，这里我使用localhost

        location / {
            root   dist;    // 这是你打包文件的文件夹，我这里直接放到nginx文件夹下了，所以写了dist，如果你把dist文件夹放在了html文件夹下，则需要写成html/dist
            index  index.html index.htm;   // 打包文件中的index.html
        }

        location /api2/ {  // api2是 vue.config.js 中你设置的代理的名称，注意后面也要加斜杠
           proxy_pass   http://192.168.1.111:1080/;  // 转发路径，这里一定要注意，端口后面要加斜杠
           proxy_set_header 请求头 '这里是请求头的值';  // 请求头没有引号，值又引号，中间为空格，注意结尾分号
           proxy_set_header 请求头 '这里也是请求头的值';
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

五、补充一点

• 一定要注意那些分号空格，我之前因为在 location /api2后面少加了个/，在 proxy_pass http://192.168.1.111:1080; 端口后面少加了个/，导致项目代理失效，还找不到问题在哪里，浪费了很久的时间，大家写的时候一定要注意这些书写问题