亲宝软件园·资讯

展开

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

Gorit 人气:1
想了解SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解的相关内容吗,Gorit在本文为您仔细讲解SpringBoot + Vue 部署Linux 服务器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:SpringBoot,Vue,部署Linux,服务器,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 包安装环境)

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> update mysql.user set host='%' where user='root' and host='localhost';
mysql> FLUSH PRIVILEGES;

// 如果上面不起效果,请输入这条命令,应该就可以解决远程访问的问题了
mysql> grant all privileges on *.* to root@'%' identified by '你的数据库登录密码';

2.2 SpringBoot 项目打包上传

通过在网上查找,我们得知 SpringBoot 项目打包有两种方式。

第二种方案我在 Java EE 阶段使用过,现在使用第一种

打包项目我们要在 maven 的 pom 依赖种添加如下插件

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

打开你的 Idea,点击右边的 package 即可完成打包,生成的文件在 target 目录里面

在这里插入图片描述

然后我们可以通过命令,直接在命令行运行项目。

java -jar xxx.jar 

java -jar xxxx.war

三、服务器配置

3.1 SpringBoot 项目在 Linux 环境启动与停止

在这里将我们打包好的 SpringBoot 项目和 vue 项目上传到服务器中。

vue 项目就按照上面的步骤, windows 平台和 Linux 平台是通用的。

我们知道 java -jar 运行项目很方便,但是同样会遇到一个问题,那就是 Linux Shell 关闭时,服务也关闭了,因此我们要使用脚本保证我们的这个进程(SpringBoot 服务)在后台也能保持运行。

我们编写一段 bash 脚本,我们只需要将 demo-0.0.1-SNAPSHOT 替换成你自己导出的 jar 包即可

#!/bin/sh
nohup java -jar demo-0.0.1-SNAPSHOT.jar &

这里的&不能省略 ,表示守护进程的意思,及这个进程可以运行在后台。

保存,运行脚本

sh startup.sh

ps: 如果这里执行不了命令,需要给这个文件夹赋予读写的权限 chmod 777 *

查看进程是否在运行

ps -ef | grep java

找到项目名称的,第一列就是你的 pid
输入 kill -9 pid 即可停止你的java 项目

3.2 Nginx 反向代理 SpringBoot 服务

鉴于一些业务需要使用 https 服务,所以我们需要将我们的后端服务反向代理成 https 服务。

前提是,我们假设你已经配置好了下面的环境,如果不会请移步Nginx 的安装及 SSL 配置

在 http 里面配置后端服务的代称,SpringBoot 项目的代称不可以使用 ‘_'

upstream tikuApiServer {
 	server 127.0.0.1:9999;
 }

然后在 server 为 443 的服务中这样配置

 server {
 listen 443 ssl http2 default_server;
 listen [::]:443 ssl http2 default_server;
 server_name 你的域名;
 root https 项目的路径;
 index index.html index.htm;
#
 ssl_certificate "证书.crt";
 ssl_certificate_key "证书.key";
 ssl_session_cache shared:SSL:1m;
 ssl_session_timeout 10m;
 ssl_ciphers HIGH:!aNULL:!MD5;
 ssl_prefer_server_ciphers on;

 # Load configuration files for the default server block.
 include /etc/nginx/default.d/*.conf;
 include mime.types;
		default_type application/octet-stream;
		
		// ================== 在这里 =====================
 location /tiku/ {
 	proxy_pass http://tikuApiServer/api/v1/;
 }

 error_page 404 /404.html;
 location = /40x.html {
 }

 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 }
 }

这样我们的后端 API 就可以直接访问 https://域名/tiku/xxxx 就好了

总结

提示:这里对文章进行总结:

  1. 前后端分离 SpirngBoot + Vue 集成部署
  2. bash 脚本编写(守护进程运行项目)
  3. mysql 远程访问

加载全部内容

相关教程
猜你喜欢
用户评论