目录

一、准备工作

二、发布spring boot项目

2.1 在pom.xml 配置插件,让spring boot项目打成jar 包

2.2 在maven里按照顺序执行

2.3 在target 目录里找到jar 包复制到Linux 系统里的opt目录里

2.4 找到这个jar包目录 输入 java -jar wms-app-0.0.1-SNAPSHOT.jar 点击回车即可

三、发布vue3项目

 3.1、在vue项目的package.json文件中将build配置做下面更改,将vue-tsc&&删掉,最终结果如图所示。

3.2、运行npm run build命令进行打包项目

 3.3 为后端配置2个服务器端口分别是8080和8090-》执行命令

 四、配置nginx代理前端项目并实现均衡负载

4.1 编辑 nginx.conf文件 (etc/nginx)

编辑 4.2、在sbin目录下nginx重新加载配置文件

编辑

4.3然后就可以通过linux的ip的默认80端口看到vue项目的首页

5、在linux系统中运行该SpringBoot+Vue前后端分离项目

5.1 首先开启两个页面 分别运行8080和8090 端口同3.3所示。

注意:上面两个打开服务的端口号要和配置nginx均衡负载里面的两个端口号保持一致

5.3、再次打开命令窗口,关闭虚拟机和windows的防火墙

5.4 在windows里cmd 查看 ip 使用 ipconfig

 5.5 将mysql 设置为允许远程连接,navicat设置


一、准备工作

    在虚拟机中安装 openjdk 和 nginx

二、发布spring boot项目

2.1 在pom.xml 配置插件,让spring boot项目打成jar 包

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

2.2 在maven里按照顺序执行

springboot vue3开源框架_nginx

2.3 在target 目录里找到jar 包复制到Linux 系统里的opt目录里

springboot vue3开源框架_后端_02

 

springboot vue3开源框架_linux_03

 

2.4 找到这个jar包目录 输入 java -jar wms-app-0.0.1-SNAPSHOT.jar 点击回车即可

此刻就可以访问打包后的项目 端口是虚拟机的ip

springboot vue3开源框架_springboot vue3开源框架_04

三、发布vue3项目

 3.1、在vue项目的package.json文件中将build配置做下面更改,将vue-tsc&&删掉,最终结果如图所示。

springboot vue3开源框架_nginx_05

3.2、运行npm run build命令进行打包项目

springboot vue3开源框架_springboot vue3开源框架_06

打包成功后 vscode 会出现一个dist 文件夹 将这个文件夹里的文件复制到Linux系统里的nginx 里的html 目录里 让html原有的东西删掉。

springboot vue3开源框架_springboot vue3开源框架_07

 

springboot vue3开源框架_springboot vue3开源框架_08

 3.3 为后端配置2个服务器端口分别是8080和8090-》执行命令

java -jar wms-app-0.0.1-SNAPSHOT.jar --serve.port=8090

springboot vue3开源框架_后端_09

 

springboot vue3开源框架_nginx_10

 四、配置nginx代理前端项目并实现均衡负载

4.1 编辑 nginx.conf文件 (etc/nginx)

springboot vue3开源框架_springboot vue3开源框架_11

springboot vue3开源框架_nginx_12

 4.2、在sbin目录下nginx重新加载配置文件

4.3然后就可以通过linux的ip的默认80端口看到vue项目的首页

springboot vue3开源框架_springboot vue3开源框架_13

5、在linux系统中运行该SpringBoot+Vue前后端分离项目

5.1 首先开启两个页面 分别运行8080和8090 端口同3.3所示。

注意:上面两个打开服务的端口号要和配置nginx均衡负载里面的两个端口号保持一致

5.3、再次打开命令窗口,关闭虚拟机和windows的防火墙

5.4 在windows里cmd 查看 ip 使用 ipconfig

springboot vue3开源框架_nginx_14

 修改 连接数据库的代码 把localhost 换成本机ip

springboot vue3开源框架_spring boot_15

然后重新打包 和 复制到linux 系统里 重新运行8080 和8090 端口

 5.5 将mysql 设置为允许远程连接,navicat设置

springboot vue3开源框架_nginx_16