springboot-整合vue，nginx前后端分离部署(多项目部署)

比眉伴天荒 2023-07-20 10:46 24阅读 0赞

[https://blog.csdn.net/yhhyhhyhhyhh/article/details/84574521 查看原文][https_blog.csdn.net_yhhyhhyhhyhh_article_details_84574521]

\-------------------------------------

[https://blog.csdn.net/yhhyhhyhhyhh/article/details/84574521?depth\_1-utm\_source=distribute.pc\_relevant.none-task&utm\_source=distribute.pc\_relevant.none-task][https_blog.csdn.net_yhhyhhyhhyhh_article_details_84574521_depth_1-utm_source_distribute.pc_relevant.none-task_utm_source_distribute.pc_relevant.none-task]

springboot-整合vue，nginx前后端分离部署

springboot-整合vue，nginx前后端分离部署  
原创 SingleOneMan 最后发布于2018-11-27 22:03:29 阅读数 7118 收藏  
展开  
springboot-整合vue，nginx前后端分离部署

文章目录

springboot-整合vue，nginx前后端分离部署  
1.nginx  
1.1nginx的安装  
1.2nginx的基本配置  
1.3nginx配置多个端口，不同端口用于转发到不同项目  
1.4nginx配置1个端口，多个域名区分不同项目（1个后台多个前端）  
1.5nginx做负载均衡  
1.6nginx访问静态资源  
2.测试

完整代码下载链接：

https://github.com/2010yhh/springBoot-demos.git

环境

idea2018，jdk1.8，

springboot版本：springboot1.5.9.RELEASE

nginx version: nginx/1.6.2

chrome浏览器

1.nginx  
1.1nginx的安装

nginx的下载安装见：http://www.runoob.com/linux/nginx-install-setup.html

nginx的详细配置见：

http://www.cnblogs.com/hunttown/p/5759959.html

nginx的作用：  
1）静态服务器  
2）反向代理，转发请求  
3）作为内容服务器的负载均衡器

1  
2  
3  
4

1.2nginx的基本配置

Nginx配置文件主要分成四部分：main（全局设置）、server（主机设置）、upstream（上游服务器设置，主要为反向代理、负载均衡相关配置）和 location（URL匹配特定位置后的设置），每部分包含若干个指令。1）main部分设置的指令将影响其它所有部分的设置，还有一些其他的配置段，如 event等；

2）server部分的指令主要用于指定虚拟主机域名、IP和端口；

3）upstream的指令用于设置一系列的后端服务器，设置反向代理及后端服务器的负载均衡；

4）location部分用于匹配网页位置（比如，根目录"/","/images",等等）。

他们之间的关系式：server继承main，location继承server；upstream既不会继承指令也不会被继承。它有自己的特殊指令，不需要在其他地方的应用。

详细配置见：https://www.jb51.net/article/72527.htm http://www.runoob.com/w3cnote/nginx-install-and-config.html

1.3nginx配置多个端口，不同端口用于转发到不同项目

nginx.conf配置中：设置多个server，每个server监听不同的端口号即可

1.4nginx配置1个端口，多个域名区分不同项目（1个后台多个前端）

nginx.conf配置中：同一个server配置中，配置不同的location实现将不同api的转发到同一个后台服务

1.5nginx做负载均衡

upstream配置项中：指定转发地址：

\#\#\#upstream的负载均衡  
upstream mysite  
\{  
server 192.168.1.139:8090 weight=1;  
server 192.168.1.139:8080 weight=1;  
\}

1  
2  
3  
4  
5  
6

server配置项中设置转发：

\#\#\#对项目名开头的url动态请求就去访问后台服务  
location /springboot-html \{  
\#\#\#设置转发地址  
proxy\_pass http://mysite;  
proxy\_redirect default;  
\#\#\#拦截错误如404  
proxy\_intercept\_errors on;  
root /usr/local/webserver/webapp;\#站点目录,对应项目的地址  
index index.html index.htm index.php;\#首页  
error\_page 404 500 502 503 504 /50x.html;  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11

1.6nginx访问静态资源

nginx.conf配置中：需要指定nginx上存储静态资源的路径，server配置项中设置：

\#\#\#配置Nginx动静分离，定义的静态资源页面直接从Nginx发布目录读取。  
\#\#有两种配置模式，目录匹配或后缀匹配,任选其一或搭配使用  
\# location ~ .\*\\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  
location /webapp1/static/  
\{  
root /usr/local/nginx/html;  
\#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力  
expires 7d;  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9

2.测试

nginx配置好后(nginx.conf的配置见下面)，建立3个web文件夹（以webapp1为例，将前端打包后的index.html和静态文件这里以/static开始的文件夹都放在webapp1下，其他项目类似），如下所示：  
在这里插入图片描述

1）本地web测试：http://localhost:8080/webapp1  
(可以正常访问接口及静态资源)  
在这里插入图片描述

在这里插入图片描述  
2）nginx负载均衡和静态文件的测试：http://192.168.159.142:8060/webapp1（或者直接访问：\* http://192.168.159.142:8060/webapp1/test/static/img/1.jpg）  
在这里插入图片描述

在这里插入图片描述  
在这里插入图片描述

3）测试nginx不同端口，一个端口不同上下文；测试nginx一个端口不同上下文，访问:

\* http://192.168.159.142:8070/webapp2/  
\* http://192.168.159.142:8070/webapp2/test  
\* http://192.168.159.142:8070/webapp3/  
\* http://192.168.159.142:8070/webapp3/test

1  
2  
3  
4

在这里插入图片描述  
在这里插入图片描述  
上述测试nginx.conf的完整配置

user yhh yhh;\#用户组,用户名  
worker\_processes 2; \#设置值和CPU核心数一致  
error\_log /usr/local/nginx/logs/nginx\_error.log crit; \#日志位置和日志级别  
pid /usr/local/nginx/nginx.pid;  
\#Specifies the value for maximum file descriptors that can be opened by this process.  
worker\_rlimit\_nofile 65535;  
events  
\{  
use epoll;  
worker\_connections 65535;  
\}  
http  
\{  
include mime.types;  
default\_type application/octet-stream;  
log\_format main '$remote\_addr - $remote\_user \[$time\_local\] "$request" '  
'$status $body\_bytes\_sent "$http\_referer" '  
'"$http\_user\_agent" $http\_x\_forwarded\_for';  
  
\#charset gb2312;  
  
server\_names\_hash\_bucket\_size 128;  
client\_header\_buffer\_size 32k;  
large\_client\_header\_buffers 4 32k;  
client\_max\_body\_size 8m;  
  
sendfile on;  
tcp\_nopush on;  
keepalive\_timeout 60;  
tcp\_nodelay on;  
fastcgi\_connect\_timeout 300;  
fastcgi\_send\_timeout 300;  
fastcgi\_read\_timeout 300;  
fastcgi\_buffer\_size 64k;  
fastcgi\_buffers 4 64k;  
fastcgi\_busy\_buffers\_size 128k;  
fastcgi\_temp\_file\_write\_size 128k;  
gzip on;  
gzip\_min\_length 1k;  
gzip\_buffers 4 16k;  
gzip\_http\_version 1.0;  
gzip\_comp\_level 2;  
gzip\_types text/plain application/x-javascript text/css application/xml;  
gzip\_vary on;  
  
\#limit\_zone crawler $binary\_remote\_addr 10m;  
\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#server：8060\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
\#\#\#upstream负载均衡  
upstream mysite  
\{  
server 192.168.3.2:8090 weight=1;  
server 192.168.3.2:8080 weight=1;  
\}  
\#server虚拟主机的配置  
server  
\{  
listen 8060;\#监听端口  
server\_name localhost;\#域名  
\#\#\#配置Nginx动静分离，定义的静态资源页面直接从Nginx发布目录读取。  
\#\#有两种配置模式，目录匹配或后缀匹配,任选其一或搭配使用  
\# location ~ .\*\\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  
location /webapp1/static/  
\{  
root /usr/local/nginx/html;  
\#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力  
expires 30d;  
\}  
  
\#\#\#对项目名开头的url动态请求就去访问后台服务  
location /webapp1 \{  
\#\#\#设置转发地址  
proxy\_pass http://mysite;  
proxy\_redirect default;  
\#\#\#拦截错误如404  
proxy\_intercept\_errors on;  
error\_page 404 500 502 503 504 /50x.html;  
\}

\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
error\_page 500 502 503 504 /50x.html;  
location = /50x.html \{  
root html;  
\}  
location ~ .\*\\.(php|php5)?$  
\{  
\#fastcgi\_pass unix:/tmp/php-cgi.sock;  
fastcgi\_pass 127.0.0.1:9000;  
fastcgi\_index index.php;  
include fastcgi.conf;  
\}  
location ~ .\*\\.(gif|jpg|jpeg|png|bmp|swf|ico)$  
\{  
expires 30d;  
\# access\_log off;  
\}  
location ~ .\*\\.(js|css)?$  
\{  
expires 15d;  
\# access\_log off;  
\}  
access\_log off;  
\}  
\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#同一个端口不同的上下文转发不同的项目\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#server：8070\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
\#下面是server虚拟主机的配置  
server  
\{  
listen 8070;\#监听端口  
server\_name localhost;\#域名  
\#\#http://192.168.159.142:8070/webapp2/ http://192.168.159.142:8070/webapp3/  
\#\#\#配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。  
  
\# location ~ .\*\\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  
location /webapp2/static/  
\{  
\#\#\#root指令指定要在其中搜索要提供的静态文件的文件系统路径  
root /usr/local/nginx/html;  
expires 7d;  
\}  
location /webapp2/static  
\{  
root /usr/local/nginx/html/webapp2/static;  
\#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力  
expires 30d;  
\}  
\#\#\#配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取。  
\#location ~ .\*\\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  
location /webapp3/static/  
\{  
\#\#\#root指令指定要在其中搜索要提供的静态文件的文件系统路径  
root /usr/local/nginx/html;  
expires 7d;  
\}  
location /webapp3/static  
\{  
root /usr/local/nginx/html/webapp3/static;  
\#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力  
expires 30d;  
\}  
\#\#\#对项目名开头的url动态请求就去访问后台服务  
location /webapp2 \{  
\#\#\#设置转发地址  
proxy\_pass http://192.168.3.2:8100/webapp2;  
proxy\_redirect default;  
\#\#\#拦截错误如404  
proxy\_intercept\_errors on;  
error\_page 404 500 502 503 504 /50x.html;  
\}  
\#\#\#对项目名开头的url动态请求就去访问后台服务  
location /webapp3 \{  
\#\#\#设置转发地址  
proxy\_pass http://192.168.3.2:8100/webapp2;  
proxy\_redirect default;  
\#\#\#拦截错误如404  
proxy\_intercept\_errors on;  
error\_page 404 500 502 503 504 /50x.html;  
\}  
\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#  
error\_page 500 502 503 504 /50x.html;  
location = /50x.html \{  
root html;  
\}  
location ~ .\*\\.(php|php5)?$  
\{  
\#fastcgi\_pass unix:/tmp/php-cgi.sock;  
fastcgi\_pass 127.0.0.1:9000;  
fastcgi\_index index.php;  
include fastcgi.conf;  
\}  
location ~ .\*\\.(gif|jpg|jpeg|png|bmp|swf|ico)$  
\{  
expires 30d;  
\# access\_log off;  
\}  
location ~ .\*\\.(js|css)?$  
\{  
expires 15d;  
\# access\_log off;  
\}  
access\_log off;  
\}  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
64  
65  
66  
67  
68  
69  
70  
71  
72  
73  
74  
75  
76  
77  
78  
79  
80  
81  
82  
83  
84  
85  
86  
87  
88  
89  
90  
91  
92  
93  
94  
95  
96  
97  
98  
99  
100  
101  
102  
103  
104  
105  
106  
107  
108  
109  
110  
111  
112  
113  
114  
115  
116  
117  
118  
119  
120  
121  
122  
123  
124  
125  
126  
127  
128  
129  
130  
131  
132  
133  
134  
135  
136  
137  
138  
139  
140  
141  
142  
143  
144  
145  
146  
147  
148  
149  
150  
151  
152  
153  
154  
155  
156  
157  
158  
159  
160  
161  
162  
163  
164  
165  
166  
167  
168  
169  
170  
171  
172  
173  
174  
175  
176  
177  
178  
179  
180  
181  
182

点赞 5  
收藏  
分享

————————————————  
版权声明：本文为CSDN博主「SingleOneMan」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/yhhyhhyhhyhh/article/details/84574521

[https_blog.csdn.net_yhhyhhyhhyhh_article_details_84574521]: https://blog.csdn.net/yhhyhhyhhyhh/article/details/84574521
[https_blog.csdn.net_yhhyhhyhhyhh_article_details_84574521_depth_1-utm_source_distribute.pc_relevant.none-task_utm_source_distribute.pc_relevant.none-task]: https://blog.csdn.net/yhhyhhyhhyhh/article/details/84574521?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task