本次部署是通过阿里云的负载均衡转发到tomcat的8088端口。
-
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
- 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
- 负载均衡配置（转发服务）
- 阿里云申请，设置转发策略，也可以在服务器上使用nginx代理转发
image.png
配置https时，需上传已为域名申请的SSL证书
image.png
域名需配置到tomcat的server.xml中，域名解析时，把记录值指到负载均衡的IP。
PS: 添加了转发策略后，后端服务器的端口配置为虚拟服务器组里面的端口号，而不是监听列表中的端口。如本例：监听中是8088，而虚拟服务器中配置的8080，后端则是配置服务器端口为8080。
image.png
- 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/具体路径访问。
