https://blog.csdn.net/yhhyhhyhhyhh/article/details/84574521 查看原文
-------------------------------------
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
