SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

前言

给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5

有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到。我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成

最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看


提示:以下是本篇文章正文内容,下面案例可供参考

一、Vue 打包的项目如何部署?

1.1 Vue 项目打包

温馨提示:如果你的电脑上没有装 vue 环境的话,请先安装好 node,下面使用 Express(一个 http 框架,提供了快速搭建服务器的功能) 也是基于 node 的。具体安装方法请自行百度,我这里就不介绍如何安装了

我的项目是使用 vue cli4 搭建的,使用脚手架搭建的项目,如果不知道自己的 vue cli 是什么版本的,可以输入如下命令进行查看

vue -V

在这里插入图片描述

使用脚手架搭建好处,就是什么都是可视化的,一键启动项目,一键编译项目,安装依赖也会变的非常非常的方便。效果图如下

在这里插入图片描述

我们 点击 build ,然后运行,等待项目构建完成之后,就可以在项目根路径生成一个dist 文件夹,这个文件就存放着我们 vue 项目打包好的所有内容

在这里插入图片描述

1.2 使用 Express 代理静态资源文件

当然代理静态资源还有很多种方法,这是一种我认为比较轻松的方案,那么要如何来做呢?

提示:无论是 Linux 环境还是 Windows 环境,以下方案是通用的(前提是你已经安装好了 node 以及 npm,我们要用npm 包安装环境)

  • 创建一个新的文件夹比如 :myapp mkdir myapp然后进入该文件夹 :cd myapp
  • 然后初始化 node 环境:npm init
  • 然后它会让你自己选择配置一些 JSON 信息
  • 然后安装 Express 环境:npm install express --save ,-- save 表示仅在当前环境使用。这里也会提示你创建一个 js 文件,你可以忽略,也可以创建
  • 然后创建 app.js 文件:touch app.js ,和 dist 文件夹在同一个目录哦
  • 编写 Express 代理静态资源的代码,windows 环境用文本编辑器,Linux 环境用 vim 编辑器
const express = require('express')
const app = express()

// 代理静态资源
app.use(express.static('./dist'))

// 监听 4000 端口作为资源的访问路径
app.listen(4000, () => {
 console.log('server running at http://127.0.0.1:4000')
})

编辑完毕,保存代码我们使用一个项目管理的工具包 pm2

windows 同理

在这里插入图片描述

安装这个我们可以实时查看项目的情况

在这里插入图片描述

使用这个,我们就不必用 node app.js 运行项目了,这样直接运行的弊端就是当你关闭 shell 或者 Linux shell 项目也会自动关闭。这样项目管理就会非常的方便哦

二、SpringBoot 项目如何部署?

2.1 数据库部署可能出现的问题

  • 首先要确保我们的服务器上安装了 mysql 数据库
  • 然后就是数据库的相关配置,设置远程访问等等
  • 数据库默认是不支持远程连接的,如果需要请放开,设置 % 就代表运行外部用户访问
mysql> update mysql.user set host='%' where user='root' and host='localhost';
mysql> FLUSH PRIVILEGES;

// 如果上面不起效果,请输入这条命令,应该就可以解决远程访问的问题了
mysql> grant all privileges>
<build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>

SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

扫一扫手机访问