当前位置: 首页 > article >正文

基于 SpringBoot 和 Vue.js 的权限管理系统部署教程

大家后,我是 jonssonyan

在上一篇文章我介绍了我的新项目——基于 SpringBoot 和 Vue.js 的权限管理系统,本文主要介绍该系统的部署

部署教程

这里使用 Docker 进行部署,Docker 基于容器技术,它可以占用更少的资源,方便我们管理应用

我这里使用 CentOS Stream release 8 系统的虚拟机进行演示,虚拟机的 IP 为192.168.56.101

部署的步骤是安装 Docker -> 安装 MySQL -> 部署后端 -> 部署前端

安装 Docker、安装 MySQL 可以使用我的另外一个开源项目 install-script 来一键部署,该项目是完全开源的

开源地址如下:

Linux 平台软件一键安装脚本:https://github.com/jonssonyan/install-script

为了让大家印象更深,我这里还写了手动部署的文档,以下命令逐行执行,#为注释

1. 安装 Docker

可以参考 Docker 的官方文档:https://docs.docker.com/engine/install/centos/, 需要注意的是我们要设置国内源

# 安装 yum-utils 软件包
yum install -y yum-utils
# 设置稳定的存储库(使用阿里云镜像)
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# 更新缓存
yum makecache
# 安装最新版本的 Docker Engine
yum install -y docker-ce docker-ce-cli containerd.io
# 启动Docker
systemctl start docker
# 设置Docker国内源
# 创建目录
mkdir -p /etc/docker
# 添加163镜像到配置文件
cat >/etc/docker/daemon.json <<EOF
{
 "registry-mirrors":["https://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"]
}
EOF
# 重新加载文件 重启docker 设置Docker开机自启
systemctl daemon-reload && systemctl restart docker && systemctl enable docker
2. 安装 MySQL
# 拉取 Mysql 5.7.31 镜像
docker pull mysql:5.7.31
# 运行 Mysql 5.7.31
docker run -d --name my-mysql --restart always --network=host -e MYSQL_ROOT_PASSWORD=123456 -e TZ=Asia/Shanghai -v /authority/mysql:/var/lib/mysql mysql:5.7.31

注意:

安装好之后需要开放 3306 端口,可以直接使用命令禁用服务器的防火墙:systemctl stop firewalld && systemctl disable firewalld

MySQL 用户名为 root,密码为 123456,使用数据库连接工具,DataGrip 或者 Navicat,新建数据库:authority,并在数据库中执行初始化 SQL,项目的 SQL 文件为:https://github.com/jonssonyan/authority/blob/master/docs/sql/,选择该文件夹中最新版本的 SQL 执行即可。

3. 部署后端

打包项目,并将编译后的 jar 上传至服务器,使用 IDEA 打包非常方便

这里推荐使用 lrzsz 工具将文件上传至服务器,yum install -y lrzsz

在服务器上新建 Dockerfile 文件

FROM openjdk:8u312-jdk-oracle
WORKDIR /app
COPY authority-0.0.1.jar .
ENTRYPOINT ["java","-jar","authority-0.0.1.jar"]
# 打包镜像
docker build -t authority .
# 运行容器
docker run -d --name my-authority --restart always --network=host authority
4. 部署前端

打包项目,并将编译后的文件夹上传至服务器

执行yarn run build,编译后的文件夹为dist

在服务器上新建 Dockerfile 文件

FROM nginx:1.20-alpine
COPY dist /usr/share/nginx/html/
ENTRYPOINT nginx -g 'daemon off;'
# 新建Nginx配置文件
mkdir -p /authority/nginx/conf.d/
cat >/authority/nginx/conf.d/default.conf <<-EOF
server {
  listen       80;
  server_name  localhost;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  }

  location /api {
    proxy_pass http://127.0.0.1:8888/authority;
  }
}
EOF
# 打包镜像
docker build -t authority-ui .
# 运行容器
docker run -d --name my-authority-ui --restart always --network=host -v /authority/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf authority-ui
5. 部署完成

打开浏览器,访问:192.168.56.101,API 文档地址为192.168.56.101:8888/authority/swagger-ui.html

视频教程

如果你看文字版教程看不懂,可以看我录制的视频教程。

项目介绍:https://www.bilibili.com/video/BV1Fy421h7me/

项目部署:https://www.bilibili.com/video/BV19U421d7CM/

项目开源地址

Spring Boot+Vue.js 权限管理系统前端: https://github.com/jonssonyan/authority-ui

Spring Boot+Vue.js 权限管理系统后端: https://github.com/jonssonyan/authority

欢迎 PR,感谢 Star


http://www.kler.cn/a/233738.html

相关文章:

  • 记录学习react的一些内容
  • 深入理解接口测试:实用指南与最佳实践5.0(二)
  • dapp获取钱包地址,及签名
  • 生成模型——PixelRNN与PixelCNN
  • XML Schema 字符串数据类型
  • PHP爬虫快速获取京东商品详情(代码示例)
  • 备战蓝桥杯---动态规划之背包问题引入
  • 基于opencv-python模板匹配的银行卡号识别(附源码)
  • 基于tomcat运行jenkins常见的报错处理
  • Linux---线程
  • uv机器电机方向极性
  • Go 语言 for 的用法
  • 《剑指 Offer》专项突破版 - 面试题 36 : 详解后缀表达式(C++ 实现)
  • 计算机毕业设计 | SSM超市进销存管理系统(附源码)
  • 鸿蒙原生应用再添新丁!央视新闻 入局鸿蒙
  • 24 SEMC相关
  • VSTO打包Word插件WPS也支持
  • Go语言每日一练——链表篇(四)
  • 自动化测试工具
  • WifiConfigStore初始化读取-Android13
  • 8868体育助力西甲皇家马德里俱乐部 帮助球队把握榜首大战
  • Days 27 ElfBoard 板 AltiumDesigner 相同电路快速布局布线
  • 【EEG信号处理】对信号进行模拟生成
  • C++自定义函数详解
  • ChatGLM2-6B模型的win10测试笔记
  • 设计模式-装饰模式 Decorator