springboot+vue部署方案汇总
springboot与vue.js的前后端分离开发项目,有多种打包部署的方式,不同的打包部署方式适用于不同的应用场景,我在这里做一下详细的汇总,网上很多的博客写的不够清晰或者缺少步骤,而且有的虽然够清晰,但因为springboot或vue.js(vue-cli)等工具的版本升级,造成以前的部署方法是失败也是很常见的事情,所以十分有必要写个亲测成功的部署方案。
文章目录
1. 整合进springboot打包部署
1.1 编译vue前端项目
这是一种很简单的部署方式,就是先在vue项目中执行npm run build命令进行编译,编译完成之后,将dist目录下的所有文件放到springboot项目下的resources\static\下即可,运行springboot项目后,在浏览器中键入http://127.0.0.1:8081/后,就会自动加载出index.html首页。截图如下:
1.2 springboot后端配置及打包
此外,springboot项目中也需要做相应的修改,修改如下:
入口函数中修改如下:
@SpringBootApplication
public class MainApplication extends SpringBootServletInitializer {
public static void main(String[] args) {
SpringApplication.run(MainApplication.class, args);
}
@Override //为了打包springboot项目
protected SpringApplicationBuilder configure(
SpringApplicationBuilder builder) {
return builder.sources(this.getClass());
}
}
pom.xml中增加maven插件配置项,配置入口函数清单,具体配置如下:
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<mainClass>cn.zhousonglin.blogspring.MainApplication</mainClass>
</configuration>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
1.3 部署运行项目
之后执行命令:
nohup java -jar myspringlearn-0.0.1-SNAPSHOT.jar &
2. Nginx反向代理部署
2.1 安装nginx
为了偷懒图个快捷,这里采用yum方式安装Nginx。
# 添加 Nginx 源
rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
# 安装 Nginx
yum install -y nginx
# 启动 Nginx
systemctl start nginx
# 设置开机自启 Nginx
systemctl enable nginx
# 关闭防火墙
systemctl stop firewalld
2.2 编辑部署配置
# 使用 vim 编辑
vim /etc/nginx/conf.d/xxx.conf
server {
listen 8080;
server_name localhost;
location / {
root /www/nginx/html/;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
2.3 解决403问题
# 编辑实际使用用户
# 将nginx.config的user改为和启动用户一致
vim /etc/nginx/nginx.conf
user root;
# 修改SELinux设置为开启状态(enabled)
# 查看当前selinux的状态。
/usr/sbin/sestatus
# 将SELINUX=enforcing,修改为 SELINUX=disabled 状态。
vim /etc/selinux/config
# SELINUX=enforcing
SELINUX=disabled
# 重启系统生效 reboot
2.4 后端服务部署
springboot后端服务部署同1中雷同,不再赘述。