springboot-整合vue，nginx前后端分离部署
springboot-整合vue，nginx前后端分离部署文章目录springboot-整合vue，nginx前后端分离部署1.nginx1.1nginx的安装1.2nginx的基本配置1.3nginx配置多个端口，不同端口用于转发到不同项目1.4nginx配置1个端口，多个域名区分不同项目（1个后台多个前端）1.5nginx做负载均衡1.6nginx访问静态资源2.测试完整代码下载链接：h...
springboot-整合vue，nginx前后端分离部署
文章目录
完整代码下载链接：
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.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; }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.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;
}
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
上述测试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;
}
}
前往低代码交流专区
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)