SpringBoot+Vue项目打包部署

最新推荐文章于 2025-04-03 14:44:03 发布

蜗牛小传

最新推荐文章于 2025-04-03 14:44:03 发布

阅读量1.8k

点赞数 1

分类专栏： SpringBoot java

本文链接：https://blog.youkuaiyun.com/zhen4xi4fei/article/details/106737336

版权

java 同时被 2 个专栏收录

7 篇文章

订阅专栏

SpringBoot

5 篇文章

订阅专栏

演示项目是SpringBoot+VUE前后端分离的。需要分别部署前端、后端项目，做集群的话需要将后端项目部署到多台服务器中。

使用的技术及服务器：
– Linux系统：Centos7
– 前端：VUE+Nginx
– 后端：SpringBoot+JDK1.8+Redis+Tomcat+MySQL+Maven

部署前的准备工作

0.安装环境及相关软件工具
1.MySQL中创建数据库、数据表、导入初始数据
2.修改项目的数据库相关配置（url，username，password等）
3.修改Redis相关配置（host，port，password等）
4.日志相关配置（日志路径、输出字符集UTF-8等）

前端部署

1.将项目源码打包为zip格式（有隐藏文件，不打包可能不完整），上传到对应的服务器中指定目录下。

#解压文件
unzip XXX.zip

2.打包项目

cd XXX/

安装依赖

#使用淘宝的镜像源
npm install --unsafe-perm --registry=https://registry.npm.taobao.org

打包

npm run build:prod

3.打包完成后，会在当前目录下生成/dist目录

4.配置nginx

cd /usr/local/nginx/conf

修改nginx.conf文件

#第一处改动
#user  nobody
修改为
user  root # 防止权限问题，生产上可以根据实际用户设置

#第二处改动
    server {
        listen      80;
        server_name localhost;

        location / {
            root  /**/**/***/****/dist;#修改此处目录为打包后的/dist
            index index.html index.htm;
        }
        
        #第三处改动
        # /***api/ 表示的是转发路径
        location /***api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://ip:port/; #此处为实际的后端IP和Port
        }
    }

如果是集群配置，则除了上面的第一处、第二处改动外，第三处如下改动

#第一处改动
#user  nobody
修改为
user  root # 防止权限问题，生产上可以根据实际用户设置

# 第三处 第一部分改动
# 配置集群
<upstream ruosys{
    server ip1:port1 weight=5
    server ip2:port2 weight=3
}

#第二处改动
    server {
        listen      80;
        server_name localhost;

        location / {
            root  /**/**/***/****/dist;#修改此处目录为打包后的/dist
            index index.html index.htm;
        }
        
        #第三处 第二部分改动
        # /***api/ 表示的是转发路径
        location /***api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://ruosys/; #此处为指定的集群名称
        }
    }

重新加载配置

/usr/local/nginx/sbin/nginx  -s reload

cd /usr/local/nginx/sbin/
./nginx

后端部署

1.将项目源码打包为zip格式（有隐藏文件，不打包可能不完整），上传到对应的服务器中指定目录下。

#解压文件
unzip XXX.zip

两种打包方式：

1.打包项目（jar包）
- 进入解压后的目录
```
cd XXX/
```
- 打包
```
mvn package
```
- 打包完成后，在当前目录下生成target目录，进入该目录就可以看到打包完成的jar包
- 备份打包完成的jar包到上一级目录
```
cp ./xxx.jar  ../xxx.jar
```
- 执行jar包启动项目
```
nohup java -jar xxx.jar &
```

2.打包项目（war包）

在项目中修改pom.xml

<!--打包方式改为war-->
<packaging>war</packaging

<!-- 将SpringBoot自带的Tomcat排除 -->
<dependency>
    <groupId>org.springframeword.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <scope>provided</scope>
</dependency>

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

public class SpringBootStartApplication extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        //指向原来的启动类XXX.class
        return builder.sources(XXX.class);
    }
}

将修改后的文件上传到服务器项目下对应的目录中替换原来文件。
到项目的目录下
- 执行清理（处理之前打jar包生成的文件）
```
mvn clean
```
打包

mvn package

打包完成后，在当前目录下生成target目录，进入该目录就可以看到打包完成的war包
备份打包完成的war包到上一级目录

cp ./xxx.jar  ../xxx.war

将war包放置在tomcat的webapps目录下

cp ..../xxx.war ./

修改tomcat的配置文件server.xml,使tomcat根目录指向当前部署的项目而不是tomcat主页

        <Host name="localhost" appBase="webapps"
          unpackWARs="true" autoDeploy="true">
            #添加下面配置，使得访问根目录时直接访问项目而不是tomcat首页
            <Context path="/" docBase="/usr/local/tomcat/apache-tomcat-8.5.55/webapps/ruosys" reloadable="false" </Context>

启动tomcat

service tomcat start