springboot vue部署架构图 vue springboot项目部署

转载

编程小天匠 2023-09-04 17:14:42

文章标签 springboot vue部署架构图 vue spring boot tomcat jar 文章分类 架构后端开发

Vue项目部署

1、压缩项目
压缩好后传到服务器上并解压，传输压缩包防止文件损坏。
2、安装前端项目依赖

npm install --unsafe-perm --registry=https://registry.npm.taobao.org

3、打包项目

npm run build

同时也可以打生产环境包以及运行环境包，如果报错的话，看下自己的package.json文件中是不是没有配置该打包方式。
打包完成后会产生一个dist文件夹，将文件夹复制到上层目录一份，防止丢失。
4、配置nginx
nginx代理默认是自带的index.html,也就是nginx的访问页面，我们配置它的nginx.conf文件，首先将第一行用户改为root

user root;

再配置 / 地址
将原来地址切换为dist目录

location / {
            root   /workespace/my_blog/dist/;
            index  index.html index.htm;
        }

5、测试访问
这时通过浏览器访问服务器ip就可以进入到你的前端Vue主页面。

springboot项目部署

jar包部署

1、更改配置文件
在pom.xml里设置以jar包打包方式，同时设置自己的服务器的mysql和redis等相关信息，如果有配置文件地址也记得改一下。
2、打包后端项目

mvn package

打包过后会生成一个target文件夹，同样的，拷贝该文件夹中的jar包的上一层目录备份。
3、在后台运行

nohup java -jar xxx.jar &

后台运行，可以使当我们退出命令行以后也可以访问。
运行成功后我们可以通过浏览器直接访问该项目的接口，如果无法访问，运行过后会生成一个nohup.out日志文件，我们打开日志文件看看出了什么错误，有可能是端口被占用导致无法运行，我们可以netstat -ntpl查看端口信息，找到该进程并杀死它，再次运行。
4、测试
这时我们的前端后端项目都已经部署完成了，网页的数据交互也都没问题了，下面讲下war包部署。

war包部署

1、更改配置
将打包方式改为war包，同时加上坐标去掉springboot默认自带的tomcat

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
 </dependency>

2、剥离自带的tomcat
在xxxxApplication.java同级目录下创建另外一个主文件并继承相关类，返回值为xxxApplication.class;

public class SpringBlogApplication extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(BlogApplication.class);
    }
}

然后将修改以及新建的文件发送到服务器。
3、清理target
切到后端项目部地址