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

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

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