springboot+vue部署方案汇总

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中雷同，不再赘述。