nginx部署vue项目全过程

前提:在linux上安装好nginx服务器

项目结构: 前端使用vue   后端使用springboot

在linux下新建文件夹www/website   (website是我的项目名)

前端打包:

npm run build:prod :前端打包vue项目,使用xftp上传到linux服务器

nginx部署vue项目全过程_第1张图片

java springboot项目打包

nginx部署vue项目全过程_第2张图片

nginx部署vue项目全过程_第3张图片

然后把website.jar文件上传到linux服务器上

nginx部署vue项目全过程_第4张图片

启动java项目(nohup后台运行,并指定日志文件)

 nohup java -jar website.jar >/opt/website.log 2>&1 &

配置linux反向代理跨域和vue项目路径

nginx部署vue项目全过程_第5张图片

server {
	listen       80;
	server_name  localhost;

	#charset koi8-r;
	#access_log  logs/host.access.log  main;
	proxy_set_header X-Forwarded-Host $host;
	proxy_set_header X-Forwarded-Server $host;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

   location / {
		root   /www/website/;
		index  index.html index.htm;
		try_files $uri $uri/ /index.html; #如果当前URL($uri)存在就显示,如果不存在就跳转到index.html($uri/ /index.html)
	} 

   location /prod-api/ {
		proxy_pass http://localhost:8090/;
		proxy_pass_request_headers on;
		proxy_set_header Connection "";       
		client_max_body_size    30m;
		client_body_buffer_size 128k; 
		proxy_redirect off;
		proxy_connect_timeout   300;
		proxy_send_timeout      300;
		proxy_read_timeout      300;
		proxy_buffer_size       4k;
		proxy_buffers           4 32k;
		proxy_busy_buffers_size 64k;
		proxy_temp_file_write_size 64k;
		proxy_next_upstream http_502 http_504 error invalid_header; 
	}
}

注意:try_files $uri $uri/ /index.html;

#如果当前URL($uri)存在就显示,如果不存在就跳转到index.html($uri/ /index.html),解决vue项目部署后再刷新404问题

nginx部署vue项目全过程_第6张图片

重启nginx服务

切换到安装目录

cd /usr/local/nginx/sbin

重启nginx

./nginx -s reload

补充:vue History路由模式下反向代理配置

server {
	listen  80;
	server_name  somename  alias  another.alias;

	location / {
		root   /www/website/dist;
		index  index.html index.htm;
		try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
	}
	location /api {
		 proxy_pass http://127.0.0.1:8090;
		 index  index.html index.htm index.jsp;
	 }

	location @router {
		rewrite ^.*$ /index.html last; #history路由模式下防止刷新404 nginx配置
	}	

	error_page  405 =200 @405;
	location @405 {
		 proxy_method GET;
		 proxy_pass http://127.0.0.1:80;
	}
}

你可能感兴趣的:(#,nginx,#,Linux,#,vue,nginx,vue.js,java)