nginx 快速入门教程 - 写给前端的你

闲云一鹤
0 阅读9分钟

经常做 To G 项目的朋友都知道，项目通常是在内网环境进行开发和调试。甚至会通过好几层跳板机进行访问，所以就无法进行 CI/CD 自动化部署。莫得办法，只能手动打包复制文件进行部署。自然而然就得学点 nginx 技能傍身

就算你公司有专业运维，有自动化部署，哪怕都没有，那也有后端，你问我你作为一个前端学 nginx 干啥？

不为啥，不蒸馒头争口气，吃技术这碗饭，有些东西你可以不用，但不能不会，给我学，卷起来！

接下来就教大家如何通过 nginx 部署项目，以及一些 nginx 常用配置的修改

1. nginx 下载

nginx 官网下载链接: nginx.org/en/download…

1.png

选择一个稳定版本（Stable version）和对应的系统进行下载

我是 windows 系统，所以选择 nginx/Windows-1.28.2，单击即可下载

nginx 是绿色免安装的，下载的内容是一个 zip 压缩包，大小也就 2.61 MB，解压后长这样

2.png

把解压后的文件夹移动到自己想要摆放的目录下，我这里放到了电脑 D 盘

2. nginx 目录解析

一般只会用到 nginx 下面的 conf 和 html 文件夹

2.1 conf 文件夹

conf 文件夹下的 nginx.conf 是 nginx 的配置文件，我们通过编辑 nginx.conf 文件修改 nginx 的配置

3.png

打开 nginx.conf 文件，里面是默认的配置内容，#号后面是注释，可删除

3.1.png

由图可见，nginx.conf 配置监听了 80 端口，并指向了 html 文件夹，并且 80 端口对应的默认启动页面为 index.html，打开 80 端口后就会自动运行此 index.html 文件

nginx.conf 层级关系：

`main` （全局设置，影响 nginx 的整体运行（如运行用户、进程数、错误日志））
├── `events` （设置网络连接处理参数（如最大并发连接数））
└── `http` （处理网页请求的核心模块（缓存、代理、日志等））
├── `upstream`（负载均衡组）
├── `server`（虚拟主机配置，一台服务器可以运行多个网站，每个网站对应一个 server 块）
│ ├── `server_name`（域名）`listen`（监听端口）
│ └── `location`（路由匹配，决定请求如何转发（如静态资源、反向代理到后端））
│ ├── `root、alias、proxy_pass`等
└──`server`（另一个虚拟主机）

2.2 html 文件夹

html 文件夹用于存放我们的打包后的需要部署的文件，像前端的 vue 项目，通过 npm run build 打包后得到的 dist 文件夹里的内容直接放到这里即可

4.png

nginx 也给我们提供了一个默认 index.html，打开后看到内容是一个欢迎页面

3. 运行 nginx 部署的项目

使用 nginx 部署项目，通常需要做两部分工作：

一是将前端项目进行打包，并放到 html 文件夹下面

二是修改 nginx 配置（端口号和对应文件夹，以及后端接口的代理）

既然 nginx 默认把基础的配置写好了，index.html 文件也给我们准备好了，那我们就来运行 nginx，看看效果

双击 nginx.exe 启动 nginx

5.png

点击更多信息 -> 选择仍要运行

6.png

点击允许

7.png

通过任务管理器搜索 nginx，如果在运行中就代表启动成功

通过 ipconfig 命令查看在局域网上的本地 ip

8.png

在浏览器输入自己的 ip + 端口即可访问部署的项目

这里没加端口是因为 80 是 http 协议默认的端口，加不加都是一样的

项目访问地址 = 当前 nginx 所在机器的 ip 地址加上项目所配置的端口号

所以我们的访问地址就是：http://192.168.20.69

9.png

👏 成功访问到了欢迎页面 index.html，撒花！🎉🎉🎉

另外值得一提的是，本地 ip = localhost = 127.0.0.1，所以这里的

http://192.168.20.69/ 和 http://localhost/ 以及 http://127.0.0.1/ 其实是一个东西

9.1.png

成功访问到同一个服务

4. 查看端口占用情况

列出所有端口的使用情况

netstat -ano

如果端口冲突就需要将端口修改为一个未被占用的值

查看指定端口号是否被占用

netstat -ano|findstr 80

查看指定端口号被什么程序占用

tasklist|findstr 80

5. 修改端口

我把默认的 80 端口改为 8881

10.png

编辑 nginx.conf 文件后需要重启 nginx 才能生效

nginx 重启方式：在任务管理器直接关闭，然后重新运行即可。注意进程有两个，应该先关闭下面一个，再关闭上面一个（下面一个是守护进程，如果你先关闭了上面的他自己还会重新打开）

在任务管理器搜索 nginx -> 单击鼠标右键 -> 点击结束任务

11.png

我刚才试过了，点击外层的这个进行关闭也是可以的

11.1.png

关闭之后，nginx 服务就无法访问了

双击 nginx.exe 重新启动 nginx

⚠️ 注意！如果 nginx 无法启动，说明 nginx.conf 配置文件有问题，需要查看并修改配置文件

12.png

之前的 80 端口无法访问了，而修改后的 8881 端口可以成功访问

13.png

6. 新增端口

编辑 nginx.conf 文件，复制粘贴整个 8881 端口对应的 server，删掉注释，新增一个 8882 端口，指向 test 文件夹

这里的文件夹名字是可以随便取的，你也可以不叫 test，叫 xiaokeai 也可以，只要跟 nginx 根目录下新增的文件夹保持名字一致即可

14.png

在 html 同级目录下新增 test 文件夹

15.png

修改 index.html 文件的内容

16.png

关闭 nginx 进程后重启，然后浏览器输入 8882 端口

17.png

👏 8881 和 8882 能同时访问，互不影响，配置成功，撒花！🎉🎉🎉

7. 同一端口下运行两个项目

正常情况下，一个端口就是对应的一个项目

可是世事无常，总有一个奇葩需求会让你碰到

在下就曾领教过，甲方要求在同一端口下运行两个项目

如何操作？看我演示！

这一次不需要修改配置文件，直接在 test 目录下新增两个文件夹即可

新增的两个文件夹为 project1 和 project2

18.png

两个文件夹内分别新增一个 index.html 文件，内容如下

19.png

既然没有修改配置文件，那么就无需重启 nginx，直接在端口后跟上文件名即可

20.png

看明白了吗？你项目想取什么名字，就把文件夹的名字改成它就行了

8. nginx 配置后端接口

8.1 HTTP 反向代理

还记得刚入行做前端时，那道经典的面试题吗？如何解决跨域问题？那个背得滚瓜烂熟的答案 - 用 nginx 做反向代理，反向代理就是使用 proxy_pass 来配置

8.1.1 vite.config.ts

这是 vite.config.ts 文件，用于 vue 项目开发时的代理配置

proxy: {
    '/api': {
        target: 'http://192.168.10.70:9876', // 后端接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
    },
    '/videoURL': {
        target: 'http://192.168.10.70:9877', // 视频代理
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/videoURL/, ''),
    },
},

8.1.2 nginx.conf

这是 nginx.conf 文件，用于 nginx 项目部署时的反向代理配置

server {
    listen 8881;
    server_name localhost;

    location / {
        root html;
        index index.html index.htm;
    }

    location /api/ {
        # 反向代理：将 “api” 开头的请求转发到 “http://192.168.10.160:9876” 后端服务
        # 注意：末尾加 “/” 代表剥离匹配到的 “/api/”（即请求 /api/user 会变成 http://...:9876/user），不加 “/” 则保留（即请求 /api/user 会变成 http://...:9876/api/user）
        proxy_pass http://192.168.10.160:9876/;
        # 传递真实客户端信息：把客户端的真实身份（域名、IP、协议）告诉后端
        proxy_set_header Host $host;                # 传递客户端真实域名
        proxy_set_header X-Real-IP $remote_addr;    # 传递客户端真实IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递代理链路IP
        proxy_set_header X-Forwarded-Proto $scheme; # 传递协议（http或https）
    }
    location /videoURL/ {
        # 反向代理：将 “videoURL” 开头的请求转发到 “http://192.168.10.160:9877 后端服务
        # 注意：末尾加 “/” 代表剥离匹配到的 “/videoURL/”（即请求 /videoURL/actionMovie 会变成 http://...:9876/actionMovie），不加 “/” 则保留（即请求 /videoURL/actionMovie 会变成 http://...:9876/videoURL/actionMovie）
        proxy_pass http://192.168.10.160:9877/;
        # 传递真实客户端信息：把客户端的真实身份（域名、IP、协议）告诉后端
        proxy_set_header Host $host;                # 传递客户端真实域名
        proxy_set_header X-Real-IP $remote_addr;    # 传递客户端真实IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递代理链路IP
        proxy_set_header X-Forwarded-Proto $scheme; # 传递协议（http或https）
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}
  • proxy_pass：定义后端服务器的地址，注意区分末尾斜杠的作用
  • proxy_set_header：重新定义或添加发往后端服务器的请求头
  • Host $host：把浏览器访问的真实域名传给后端
  • X-Real-IP：把浏览器访问的真实用户 IP 传给后端，不加的话全部变成 Nginx 的 IP
  • X-Forwarded-For：记录一个完整的 IP 链（用户 IP -> 代理1 -> 代理2）
  • X-Forwarded-Proto：告诉后端原始协议是 http 还是 https，避免在 HTTPS 下生成非安全的 HTTP 链接

注意！一个端口下运行两个项目的话， nginx 配置反向代理，需要在接口前面加上对应的项目名；假如项目名为 project1 和 project2，配置示例：

location /project1/api/ {
    proxy_pass http://192.168.10.160:9877/;
}
location /project2/api/ {
    proxy_pass http://192.168.10.160:9877/;
}

8.2 WebSocket 配置

WebSocket 接口配置稍有不同

8.2.1 vite.config.ts

proxy: {
  	'/ws': {
        target: 'ws://192.168.10.70:9878', // WebSocket
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ws/, ''),
    },
},

8.2.2 nginx.conf

   location /alarmWs/ {
        proxy_pass http://192.168.10.7:8882/; # 转发到后端

        # 关键配置：允许协议升级为 WebSocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # 身份信息透传：把客户端的真实身份（域名、IP、协议）告诉后端
        proxy_set_header Host $host; # 传递客户端真实域名
        proxy_set_header X-Real-IP $remote_addr; # 传递客户端真实IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递代理链路IP
        proxy_set_header X-Forwarded-Proto $scheme; # 传递客户端真实协议

        # 超时设置：如果 300 秒（时间根据业务需求调整）内没有数据传输，Nginx 会主动断开连接
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
        proxy_connect_timeout 10s;

    }

  • proxy_http_version 1.1

      Nginx 默认代理时用的是 HTTP/1.0（老协议）。
  WebSocket 协议升级（Upgrade）必须基于 HTTP/1.1。
  这一句代码表示强制把代理请求升级到 1.1。

  • Upgrade $http_upgrade

      把客户端发来的 Upgrade: websocket 原样转发给后端。
  $http_upgrade 是 Nginx 变量，自动取客户端的 Upgrade 头。

  • Connection "upgrade"

      告诉后端：“请把连接从普通 HTTP 升级 成 WebSocket 长连接”。

  • Host $host

    把浏览器访问的真实域名传给后端

  • X-Real-IP

    把浏览器访问的真实用户 IP 传给后端，不加的话全部变成 Nginx 的 IP

  • X-Forwarded-For

    记录一个完整的 IP 链（用户 IP -> 代理1 -> 代理2）

  • X-Forwarded-Proto

    告诉后端原始协议是 http 还是 https，避免在 HTTPS 下生成非安全的 HTTP 链接

  • proxy_read_timeout

    Nginx 从后端读取响应的最长等待时间（默认 60s）

    允许连接长时间保持开启。这对于 WebSocket 聊天、大文件上传/下载、复杂的 AI 计算接口是必须的，否则连接会频繁闪断

  • proxy_send_timeout

    Nginx 向后端发送数据的最长等待时间

  • proxy_connect_timeout

    Nginx 连接后端服务器的最长等待时间

9. nginx.conf 文件高亮与保存自动格式化

  • 安装 vscode 插件实现语法高亮：NGINX Configuration Language Suppor

  • 保存自动格式化

    在 settings.json 文件新增配置

    "[nginx]": {
    "editor.defaultFormatter": "ahmadalli.vscode-nginx-conf"
}

    tip：在 vscode 打开文件，点击鼠标右键，然后点击格式化文档，vscode 工具会自动添加 settings.json 配置文件

10. nginx 相关报错

  • 接口报这个错误：net::ERR_INCOMPLETE_CHUNKE

    改 nginx 缓冲区大小就可以了

avatar
文章
阅读
粉丝