springboot+vue 部署在Tomcat + 域名 Nginx 80端口 部署教程

1.部署在微信公众号上的

一、Nginx +域名+80 配置 （域名配置）

 
#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
  
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
  
  
  
  upstream vue_api{
    server 39.xx.xx.xx:8081;
  }
 
  upstream vue_web{
    server 39.xx.xx.xx:8082;
  }
 
  
 
  server {
    listen       80;
    server_name  www.test1.com;
 
    #charset koi8-r;
 
    #access_log  logs/host.access.log  main;
 
    location / {
        proxy_pass http://vue_api;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 
    #error_page  404              /404.html;
 
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
  }


  server {
    listen       80;
    server_name  www.test2.com;
 
    #charset koi8-r;
 
    #access_log  logs/host.access.log  main;
 
    location / {
        proxy_pass http://vue_web;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 
    #error_page  404              /404.html;
 
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
  }
 
  	
}

二、后台代码部署

备注：后台打包war放在Tomcat的webapp根目录下

 Tomcat 配置

 

三、vue前台代码部署

1.vue打包前配置

 

备注：按照以上图片配置打包编译即可

2.把微信的秘钥新建文件夹ROOT，放在此文件下（这样域名才能配置成功）

 

 3.Tomcat 配置

 

 

 

备注：前台打包放在Tomcat的指定目录下

 

访问地址：http:// ip :端口