ngixn使用

最新推荐文章于 2025-07-01 15:31:34 发布

原创最新推荐文章于 2025-07-01 15:31:34 发布 · 439 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nginx

一、什么是nginx？
Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。
优点：

支持海量高并发：采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接，实际生产环境中可以支撑2-4万并发连接数。
内存消耗少
可商业化
配置文件简单除了这些优点还有很多，比如反向代理功能，灰度发布，负载均衡功能等
二、nginx 部署前端vue项目步骤

2.1 安装nginx

2.1.1 windows环境安装
到nginx官方下载系统相关的nginx版本安装

启动命令：

cd F:\nginx-1.25
start nginx

2.1.2 linux环境安装

通常情况下很少使用windows来作为nginx的服务器，一般使用linux。对于linux安装nginx有两种方式，一种是使用官方已经编译好的包来安装，一种是使用源码构建安装。

第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable

第二种方式参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，这种实际上就是下一个tar.gz包仍到linux服务去自己编译。

在linux服务上和window环境上使用nginx部署vue项目并没有太大差异，把构建好的vue项目dist上传到linux服务上，通用修改nginx服务器中的root来指向dist就ok了，然后使用

# centos 7
systemctl restart nginx.service
# centos 6
service nginx restart
# 或者是平滑重启
service nginx reload

2.1.3 Mac os

通常在测试环境使用，下载安装使用方法同2.1.1windows

2.2 配置nginx

修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

server {
    listen       9999;
    server_name  blog.lsltest.top;

    location / {
        root   C:\Users\Administrator\Desktop\side\admin\dist; # 项目的打包后的dist
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://127.0.0.1:9999; # 后端api地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

}

完成nginx配置后重新加载配置文件