#前端#项目#nginx部署

在这里插入图片描述

代理的编码



	server {
	         listen 80;
	
	         server_name localhost;
	          
	        
	         location / {
				 root   html;
				 index  index.html index.htm;
	             try_files   $uri $uri/ /index.html;
	         }
	
	}

windows bat脚本快速杀死nginx进程

在这里插入图片描述
写成bat脚本
在这里插入图片描述
这样就方便修改了

代理后端服务部分:


	 
	server {
		listen  80;
		server_name 127.0.0.1;
		location / {
			#root html;
			proxy_pass http://localhost:8080;
			#index  index.html;
		}
		
		
		
	}
	 



复用80端口作为转发请求

在这里插入图片描述
在这里插入图片描述
服务器配置

//查看开放的端口号
firewall-cmd --list -all
设置开放端口号
firewall-cmd --add-service=http -permanent
sudo firewall-cmd --add-port=80/tcp --permanent
//重启防火墙
firewall-cmd -reload

linux下nginx常用命令
./nginx
./nginx -s stop
./nginx -s reload

nginx 全局块的配置
在这里插入图片描述
work_processes 值越大,可以处理并发量越多,但是会有硬件的制约

在这里插入图片描述
每个 worker_process可以同时支持的最大连接数

server块的配置

1、= :用于不含正则表达式的 uri 前,要求请求字符串与 uri 严格匹配,如果匹配 成功,就停止继续向下搜索并立即处理该请求。
2、~:用于表示 uri 包含正则表达式,并且区分大小写。 3、~:用于表示 uri 包含正则表达式,并且不区分大小写。
4、^~:用于不含正则表达式的 uri 前,要求 Nginx 服务器找到标识 uri 和请求字 符串匹配度最高的 location
后,立即使用此 location 处理请求,而不再使用 location 块中的正则 uri 和请求字符串做匹配。 注意:如果 uri
包含正则表达式,则必须要有 ~ 或者 ~
标识。

在这里插入图片描述这里我使用 = 进行严格匹配


假如我要搞二级目录来访问,那么就要麻烦一点

vue部署二级目录

我有参考这位大神的博客

vue二级目录
因为是个管理系统,通常只是用子目录

假如我要访问的 是 http://localhost/admin/login 这个页面

那么 admin 就是个目录,要在 vue 的 config中配置

在这里插入图片描述
将 dev 和 build 的这个位置都改成自己想要的目录

打包,然后改成自己的配置


server {
		listen  80;
		server_name 127.0.0.1;
		 
		location ^~/admin/ {
		  proxy_redirect off;
		  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://127.0.0.1:8821/;
		}
		location = /api/ {
			proxy_pass http://localhost:8080;
		}
		
		
		
		
		
	}
	
	server {
		listen 8821;
		server_name 127.0.0.1;
		 
		location / {
			# vue h5 history mode 时配置
			try_files $uri $uri/ /index.html;
	
			root html/admin;
			index index.html index.htm;
		}
	 
		 
		
	
	}

8821 为后台管理的端口, 访问 localhost/admin/ 就能转发到8821端口了.
在这里插入图片描述
项目运行成功

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页