Windows系统使用Nginx部署Vue

Nginx是什么？

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。

优点

速度更快、并发更高
配置简单，扩展性强
高可靠性
热部署
成本低、BSD许可证

安装

下载地址:http://nginx.org/en/download.html

解压后目录如下：

启动

双击nginx.exe,会有黑窗闪过。
用cmd命令窗口，cd 到nginx解压目录，./nginx启动。
在浏览器中访问http://localhost:80,出现以下界面说明启动成功(由于笔者电脑80端口被占用，所以更改为8080，nginx默认为80端口)。

部署Vue项目

将build后的文件夹放到nginx目录下的html文件夹当中。

修改nginx.conf配置文件。

配置访问地址。

其他常用配置

跨域配置

代码：

location /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_pass http://192.168.8.216:10000/api;
		proxy_redirect default;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers X-Requested-With;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		}

文件上传大小配置

代码：

client_max_body_size     50m;  # 限制请求体的大小，若超过所设定的大小，返回413错误，默认1m
client_header_timeout    1m;  # 读取请求头的超时时间，若超过所设定的大小，返回408错误
client_body_timeout      1m; # 读取请求实体的超时时间，若超过所设定的大小，返回413错误
proxy_connect_timeout     60s; # http请求无法立即被容器(tomcat, netty等)处理，被放在nginx的待处理池中等待被处理。此参数为等待的最长时间，默认为60秒，官方推荐最长不要超过75秒
proxy_read_timeout      1m;  # http请求被容器(tomcat, netty等)处理后，nginx会等待处理结果，也就是容器返回的response。此参数即为服务器响应时间，默认60秒
proxy_send_timeout      1m; # http请求被服务器处理完后，把数据传返回给Nginx的用时，默认60秒

Nginx部署Vue项目刷新404问题

代码：

     location / {
            root   html/dist;
            index  index.html index.htm;
            try_files  $uri $uri/ /index.html =404;
            autoindex  on;
        }

多项目部署（不同端口）


worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       10800;
        server_name  192.168.8.216;

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

		location /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_pass http://192.168.8.216:9999/DataDisplay;
		proxy_redirect default;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers X-Requested-With;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		}

        # error_page  404              /404.html;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    server {
        listen       10001;
        server_name  192.168.8.216;

        location / {
            root   html/dist;
            index  index.html index.htm;
            try_files  $uri $uri/ /index.html =404;
            autoindex  on;
        }
        
		location /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_pass http://192.168.8.216:10000/api;
		proxy_redirect default;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers X-Requested-With;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		}

        # error_page  404              /404.html;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }		

    }
}

常用命令

序号	命令	功能
1	taskkill /im nginx.exe /f	关闭所有nginx进程
2	tasklist \| find /i “nginx.exe” \|\| exit	查看nginx的进程使用情况
3	taskkill /pid 1234 /f	关闭指定进程
4	./nginx	启动
5	./nginx -s stop	停止
6	./nginx -s quit	安全退出
7	./nginx -s reload	重新加载配置文件

完整配置


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    client_max_body_size     400m;
    client_header_timeout    5m;
    client_body_timeout      5m;
    proxy_connect_timeout   6000s;
    proxy_read_timeout      5m;
    proxy_send_timeout      5m;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       10800;
        server_name  192.168.8.216;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

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

		location /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_pass http://192.168.8.216:9999/DataDisplay;
		proxy_redirect default;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers X-Requested-With;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		}
        error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    server {
        listen       10001;
        server_name  192.168.8.216;

        location / {
            root   html/dist;
            index  index.html index.htm;
            try_files  $uri $uri/ /index.html =404;
            autoindex  on;
        }
        
		location /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_pass http://192.168.8.216:10000/api;
		proxy_redirect default;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers X-Requested-With;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		}

        error_page  404              /404.html;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }		

    }
}

Nginx开机自启

原理

通过 Windows Service Wrapper 工具，将Nginx转换为Windows服务，Windows系统重启后会自动启动Nginx服务。

实现方法

下载Windows Service Wrapper工具，地址：https://github.com/winsw/winsw/releases，根据系统版本下载对应工具。

百度云：https://pan.baidu.com/s/1_olg0NN4lvhC5bmnZIoZ5w 提取码：polf

将工具放到Nginx安装目录并命名为nginx-service.exe。
在Nginx目录新建服务日志文件夹server-logs文件夹。
新建nginx-service.xml文件，写入配置文件。

整体目录如下:

配置文件如下：主要包含日志位置、启动和关闭，目录根据自己安装位置调整（不要有中文）。

<!-- nginx-service.xml -->
<service>
	<id>nginx</id>
	<name>nginx</name>
	<description>nginx</description>
	<logpath>E:\nginx-1.25.1\server-logs\</logpath>
	<logmode>roll</logmode>
	<depend></depend>
	<executable>E:\nginx-1.25.1\nginx.exe</executable>
	<stopexecutable>E:\nginx-1.25.1\nginx.exe -s stop</stopexecutable>
</service>

将nginx加载到Windows服务中。在nginx安装目录以管理员身份启用CMD输入：.\nginx-service.exe install

在Windows服务中找到nginx服务，将启动方式改成自动并将其启动。

通过浏览器访问项目地址，检查是否启动成功。

Windows Service Wtapper 命令

命令	功能
nginx-service.exe install	注册系统服务
nginx-service.exe uninstall	删除已注册系统服务
nginx-service.exe stop	关闭服务
nginx-service.exe start	启动服务

posted @ 2023-07-12 15:56 故人与猫阅读(837) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

故人与猫

✎ 希望你眼眸有星辰，心中有山海。。。