前端nginx 本地配置代理测试项目部署上线nginx配置

前端Nginx 本地配置代理测试项目部署上线nginx配置.md

前言！！！

本文章主要讲解如何安装nginx和nginx各个配置含义，让你了解nginx配置文件里各个配置项及如何配置代理

[1.安装brew](# 一、安装brew)

[2.安装nginx](# nginx配置)

[3.nginx启动、停止、重启命令](# 三、nginx启动、停止、重启命令)

[4.！！！重点来了 mac 修改下的nginx配置文件、安装路径、以及配置文件的各个含义！！！](# nginx )

一、安装brew

• 复制下面命令安装brew

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

• 安装成功的样子

  

二、安装nginx

• 先确定本地是否安装nginx，查看本地nginx版本命令

  nginx -v
  

• 如果本地没有执行以下命令安装nginx

  sudo brew install nginx
  

• 如果之前安装过可以卸载

  sudo brew uninstall nginx
  
  

三、nginx启动、停止、重启命令

• 启动nginx

  sudo brew services restart nginx
  

• 重启nginx命令※※ 重点命令！更改nginx配置文件都需要用此命令重启nginx

  sudo nginx -s reload
  

• 关闭nginx服务

  sudo brew services stop nginx
  

• 停止nginx服务器

  sudo nginx -s stop
  

四、nginx路径解释

• 经过以上步骤后本地已经安装成功nginx了

• mac电脑查看本地的nginx安装路径，打开访达找到左上的小房子

• /usr/local/etc/nginx，这个文件夹下面装的就是你的配置文件

  ​

• 可以用vsCode编辑器打开也可以用记事本打开来修改配追

• /usr/local/var/www, 这个文件夹下面就是前端打包后需要放入的dist文件了

  

• index.html就是生成的nginx文件

五、nginx配置文件含义及如何修改配置本地代理

下面配置文件为常用配置文件讲解

# 只启动一级个进程，nginx是多进程单线程模型，但是使用了epoll sendfile 非阻塞io
worker_processes  1;
# 下方主要是网络连接部分香瓜配置
events {
  # 每个worker 能连接1024个链接
    worker_connections  1024;
  # use epoll 事件驱动模型select|poll|kqueue|epoll|resig
}
http {
  # 文件扩展名与文件类型映射表
    include       mime.types;
  # 默认的返回类型，剋一在server location 里面改 也可以改为text/html文本返回格式
    default_type  application/octet-stream;
  # 开启sendfile系统调用
    sendfile        on;
  # 连接超时事件65s
    keepalive_timeout  65;
    server {
        listen       8898; # 此为端口号配置追要不与已有端口冲突即可
        server_name  localhost; # 此为名字可修改
        location / {
  # 这里可以写入自己的绝对路径，也可以用默认的html，如果使用默认的需要把打包的文件拖拽到www这个目录把原有html文件删除掉即可
            root  /usr/local/var/www/dist;   
            index   index.html ; # 如果不输入文件名他会转到那个文件
        }
	 # 此为优先级想要具体了解优先级问题可以自行关注学习一下，这里为默认常用写法
        location /api {
   #此为需要代理的服务器，如果接口前缀api的就会代理到下面配置的服务器地址
            proxy_pass http://11.11.11.111:1111;
        }
	#下面配置为如果为 500 502 503 504 这几个状态码会去往50x这个html这个文件
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root    /50x.html;
        }
    }
    include servers/*;
}

如果想了解更多nginx配置项，可移步大佬github 地址： https://gist.github.com/sunwu51/bf6bd40ec8e9457bad8edd50aa06881a