1. Vue

  2. Node.js

  3. 路由

  4. 接口请求

  5. 状态管理

  6. web 代理

  7. 服务器系统

什么是 Nginx ?

Nginx 是一个开源、轻量级、高性能的反向代理服务器。

Nginx 的常用作用有以下:

  • 反向代理
  • 负载均衡

上手 Nginx

安装 Nginx

Windows

Nginx 的下载页面下载 Windows 的文件,解压后即可运行,无需安装。将 nginx 的目录添加进环境变量下的 path 变量。

Mac OS

brew install nginx

配置文件

nginx 的运行全由 conf 文件夹下的 nginx.conf 控制,针对 nginx 的学习主要就是如何配置 nginx.conf 文件。

首先安装 NGINX Configuration Language Support 这个 VSCode 插件。

nginx 目录下 conf 文件夹用 VSCode 打开。将默认的 nginx.conf 复制一份保留备份,接着修改文件为以下配置。

events {
    worker_connections 1024; # 单个进程最大连接数
}

http {
    include mime.types; # 引入 MIME types 与文件后缀的对应表
    default_type application/octet-stream; # 设置默认的 MIME type

    server {
        listen 80; # 监听的端口
        root C:/Users/l/Desktop/vue-bbs/dist; # vue 构建的文件目录

        location / {
            index index.html index.htm; # 目录路径默认指向 index.html index.htm 文件
            try_files $uri $uri/ /index.html; # 未知的路径都指向 index.html,配合 VueRouter History 模式
        }
    }
}

以下为官方的文档。

启动 Nginx

Windows

start nginx

Mac OS

nginx

常用命令

命令 描述
nginx -s stop 终结
nginx -s quit 退出
nginx -s reload 重新应用配置文件
nginx -t 测试配置文件

$$warning

Windows 下有时 nginx -s stop 不能退出 nginx,可以使用 taskkill /f /t /im nginx.exe 命令强行结束进程。

$$