nginx部署vue项目全过程

超、凢脫俗 2021-07-26 23:29 622阅读 0赞

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

**项目结构： 前端使用vue   后端使用springboot**

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

### **前端打包：** ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

### java springboot项目打包 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 3][]

### 启动java项目（nohup后台运行，并指定日志文件） ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 4][]

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问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 5][]

### 重启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;
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/1b3c2612628a4caea0d8761c0e4a1cfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 1]: /images/20210726/e99a0867d8844a50bc8eeb947273735d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 2]: /images/20210726/c2c1fef375b74951a50c485b12d3903a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 3]: /images/20210726/b42da24697ca443aa4cdbe0f530a9cd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 4]: /images/20210726/6478e046bccc4b9b9e0c914b9cd0acfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 5]: /images/20210726/67909456ce464dbdba83308a56639b6a.png