spring boot ，vue的war包部署到tomcat

本次部署是通过阿里云的负载均衡转发到tomcat的8088端口。

1. vue打包

   • config/index.js的build{}修改，打包文件位置 dist/

     build: {
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),
   
   // Paths
   assetsRoot: path.resolve(__dirname, '../dist'),  //打包后文件存放路径
   assetsSubDirectory: 'static',   // 打包后index.html之外的静态文件存放路径
   assetsPublicPath: '/', // 打包后，index.html引用资源的相对地址
   
   
   /**
   * Source Maps
   */
   
   productionSourceMap: true,
   // https://webpack.js.org/configuration/devtool/#production
   devtool: '#source-map',
   
   // Gzip off by default as many popular static hosts such as
   // Surge or Netlify already gzip all static assets for you.
   // Before setting to `true`, make sure to:
   // npm install --save-dev compression-webpack-plugin
   productionGzip: false,
   productionGzipExtensions: ['js', 'css'],
   
   // Run the build command with an extra argument to
   // View the bundle analyzer report after build finishes:
   // `npm run build --report`
   // Set to `true` or `false` to always turn it on or off
   bundleAnalyzerReport: process.env.npm_config_report }
   

   • config/index.js修改proxyTable{}，配置代理到接口的

    proxyTable: {
      '/': {
        target: 'http://localhost:8080',  //目标接口域名，与后端服务的访问端口一致8080
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/': ''  // 重写接口
        }
      }
    },

• 打包 在Terminal中执行npm run build

2. spring boot打包

• 构建成war包的配置
  pom.xml

<packaging>war</packaging>

        <!--覆盖默认的tomcat，用于服务器部署 start-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <!--end-->

TestServerApplication

public class TestServerApplication extends SpringBootServletInitializer {

    /**
     * 打包成war包部署在tomcat中
     * 1. extends SpringBootServletInitializer
     * 2. SpringApplicationBuilder configure(SpringApplicationBuilder builder) 重写
     * @param builder
     * @return
     */
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder){
        return builder.sources(TestServerApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(TestServerApplication.class, args);
    }

}

• 将vue打包的build下的文件复制到spring boot项目中的resources/static下。spring boot的默认静态资源目录有，在src/main/resources/目录下创建META-INF/resources文件夹，resources文件夹，static文件夹，public文件夹，资源的优先顺序/META-INF/resources>resources>static>public。本例子中选择放在static文件夹。
  image.png

• Maven打包 执行 clean , package
  image.png

3. 负载均衡配置（转发服务）

• 阿里云申请，设置转发策略，也可以在服务器上使用nginx代理转发
  image.png
  配置https时，需上传已为域名申请的SSL证书
  image.png
  域名需配置到tomcat的server.xml中，域名解析时，把记录值指到负载均衡的IP。

PS: 添加了转发策略后，后端服务器的端口配置为虚拟服务器组里面的端口号，而不是监听列表中的端口。如本例：监听中是8088，而虚拟服务器中配置的8080，后端则是配置服务器端口为8080。

image.png

4. tomcat的server.xml配置
   自己的主机不要配置到默认 defaultHost，参考：从一个8088端口配置多个应用，域名和负载均衡的域名一致，发送带

      // A域名
       <Host name="A.com"  appBase="webapps"
           unpackWARs="true" autoDeploy="true">
 
        <Context path="" docBase="/opt/tomcat/webapps/项目目录"/>
       </Host>
     // B域名
       <Host name="B.com"  appBase="webapps"
           unpackWARs="true" autoDeploy="true">
 
        <Context path="" docBase="/opt/tomcat/webapps/项目目录"/>
       </Host>

5.访问 A.com/index.html就可访问vue后台，spring boot的接口数据也可以通过A.com/具体路径访问。