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

绝地灬酷狼 2022-04-13 06:25 624阅读 0赞

# 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][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][http_www.runoob.com_linux_nginx-install-setup.html]

> nginx的详细配置见：
> 
> [http://www.cnblogs.com/hunttown/p/5759959.html][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][https_www.jb51.net_article_72527.htm] [http://www.runoob.com/w3cnote/nginx-install-and-config.html][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下，其他项目类似），如下所示：  
![在这里插入图片描述][20181127220201562.JPG]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 6]  
**上述测试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;
      }
    }

[https_github.com_2010yhh_springBoot-demos.git]: https://github.com/2010yhh/springBoot-demos.git
[http_www.runoob.com_linux_nginx-install-setup.html]: http://www.runoob.com/linux/nginx-install-setup.html
[http_www.cnblogs.com_hunttown_p_5759959.html]: http://www.cnblogs.com/hunttown/p/5759959.html
[https_www.jb51.net_article_72527.htm]: https://www.jb51.net/article/72527.htm
[http_www.runoob.com_w3cnote_nginx-install-and-config.html]: http://www.runoob.com/w3cnote/nginx-install-and-config.html
[20181127220201562.JPG]: /images/20220413/15464ec6275e49bbaccae8d915612515.png
[http_localhost_8080_webapp1]: http://localhost:8080/webapp1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70]: /images/20220413/f440c680d906424a9f356dba6c5dbb01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 1]: /images/20220413/ff7e81948d65401ba63c2a422744d1af.png
[http_192.168.159.142_8060_webapp1]: http://192.168.159.142:8060/webapp1%EF%BC%88%E6%88%96%E8%80%85%E7%9B%B4%E6%8E%A5%E8%AE%BF%E9%97%AE%EF%BC%9A*
[http_192.168.159.142_8060_webapp1_test_static_img_1.jpg]: http://192.168.159.142:8060/webapp1/test/static/img/1.jpg%EF%BC%89
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 2]: /images/20220413/acf2d15789614cdbac8f3fcf1175ede4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 3]: /images/20220413/65a6de0481d74aa1b719401bf95f8309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 4]: /images/20220413/3d7e4b3690a2422eb9e4910e207e47f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 5]: /images/20220413/9ce531ef95ed4ee498480e5fd855a1d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 6]: /images/20220413/eba70c7fa6344540aad2990350a924b4.png