简介

nginx 是最常用的「反向代理」服务器，对于web开发而言是必备的基本技能。

nginx nginx 的网站

简陋，很实用。

安装 nginx 选择 如图所示的 install 。

创建前端 vue 打包文件

前端开发人员讲开发的 vue 代码，通过 

npm run build

打包，会在开发目录下生成一个独立的目录 dist ，存放打包好的文件。

NGINX

macOS安装或升级 nginx 通过 brew 命令

brew install nginx

查看 nginx 的信息

brew info nginx

安装打包文件的路径，已经看到了

Docroot is: /usr/local/var/www

启动 nginx 服务

To start nginx now and restart at login:
  brew services start nginx

启动

brew services start nginx
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)

会提示在 macOS 后台创建了一个运行。

提示： 身份不明的开发者，是因为没有从macOS的appstore下载给的提示。

补充，重启 nginx 的命令

brew services restart nginx

VUE 打包并部署

/usr/local/var/www

这个文件夹是 macOS 隐含的文件夹，打开要通过 find 下

command + shift + G 出现弹窗，直接 拷贝 粘贴 目录地址即可打开 www 目录

粘贴 dist 的文件到 www 下，需要重启 nginx 

否则不会生效的。

配置文件

nginx 的配置文件，在 

/usr/local/etc/nginx/nginx.conf

备注：某种macOS的原因 nginx.conf配置文件的路径可能有所差异；根据macOS版本确定路径准确地址。

关于 nginx 的解释如下 

# Nginx worker 进程个数：其数量直接影响性能。
# 推荐设置：cpu的个数 * 核心数(几核CPU)
worker_processes  1;

events {
    # 配置每个工作进程支持的最大连接数(一个进程的并发量)
    worker_connections  1024;
}

http {
    # 嵌入其他配置文件
    include       mime.types;
    
    # 响应文件类型
    default_type  application/octet-stream;
    
    # 日志格式
    # 语法：log_format 格式名称 格式样式(可以多个)
    # log_format 与 access_log 既可以配置在 http{ ... }里面，也可以配置在虚拟主机 server{ ... } 里面
    #log_format  main  '$remote_addr - $remote_user - $http_user_agent';
    
    # 日志文件的存放路径、格式、缓存大小
    # log_format 与 access_log 既可以配置在 http{ ... }里面，也可以配置在虚拟主机 server{ ... } 里面
    #access_log  logs/access.log  main;
    
    # 是否使用 sendfile 系统调用来传输文件
    sendfile        on;
    
    # 超时时间
    keepalive_timeout  65;
    
    # 每一个 server 就是一个虚拟主机，当需要多站点的时候多配置几个 server 即可
    server {
    
        # 监听的端口号
        listen       8080;
        
        # 主机名称，如果是本地电脑测试，记得在 hosts 文件中做好域名解析
        server_name  localhost;
        
        # 当浏览器输入地址访问服务器的时候，就会进入到这个里面来匹配，这个配置看文章底部
        location / {
        
            # 匹配的根目录，只写文件名默认在 /nginx 文件夹下
            # 也可以写成绝对路径 root /usr/local/var/dzm;
            root   html;
            
            # 设置默认首页，按先后顺序匹配首页
            index  index.html index.htm;
        }
        
        # 当报错 500 502 503 504 的时候走这个指定页面
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    # 嵌入其他配置文件
    # 语法：include /path/file 绝对路径，指定目录下的指定文件
    # 语法：include path/file 相对路径，指定目录下的指定文件
    # 语法：include path/* 指定目录下的所有文件
    # 语法：include file 当前 nginx.conf 同文件夹下的指定文件
    # 参数既可以是绝对路径也可以是相对路径（相对于 nginx 的配置目录，即 nginx.conf 所在的目录
    # 本文下面有使用示例 —— nginx.conf 多个虚拟主机使用
    include servers/*;
}

这就完成了 nginx 的 vue 文件打包和发布；对于后续的工作，直接访问 

http://localhost:8080/index.html （8080端口，为nginx.conf配置的）