M1 Mac本地部署若依前后端分离版项目介绍官网：http://www.twom.top/ 官方文档地址：http:/

介绍

官网：www.twom.top/
官方文档地址：doc.ruoyi.vip/ruoyi-vue/

环境

OS：MacOS 12.3
芯片：M1 Pro
PC配置：10c16g

准备

容器准备

网桥创建

为方便各容器之间的网络通信，专门创建一个网桥供若依项目使用

docker network create ry

部署MySQL

生产环境不建议将数据库部署到容器（安全性、效率问题，见百度）

部署

本教程采用下面链接中第二种方式创建MySQL容器（配置挂载目录）

Docker安装MySQL - 掘金 (juejin.cn)
网桥配置（如果部署的MySQL容器名称不是MySQL，请自行替换）
```
docker network connect ry mysql
```

开放访问权限

如果已经开放root用户host限制，可借助可视化工具，如Navicat进行

# 进入MySQL容器
docker exec -it mysql /bin/bash
# 登录MySQL（如密码不是123456，请自行修改）
mysql -uroot -p123456
# 新增一个用户专门供若依项目使用

部署Redis

部署

采用下面第三种方式进行部署

Docker安装Redis - 掘金 (juejin.cn)
网桥配置（如果部署的Redis容器名称不是Redis，请自行替换）
```
docker network connect ry redis
```

部署Nginx

部署

Docker安装Nginx - 掘金 (juejin.cn)
网桥配置（如果部署的Nginx容器名称不是Nginx，请自行替换）
```
docker network connect ry nginx
```

修改宿主机挂载目录下的nginx.conf文件

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    gzip on;

    server {
        listen       80;
        server_name  localhost;

        location / {
            # 前端静态文件在容器内的存放路径
            root   /usr/share/nginx/html;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # 由于内网地址或容器IP会随时变更，故用容器名称来代替（需要Web容器同Nginx容器在同一个网桥内）
            # 如果不是用docker来部署后端项目，可配置对应的upstream[踩坑经验：最后面的斜杠不能漏！！！]
            proxy_pass http://ruoyi:8080/;
        }

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

源代码拉取

打开Gitee首页
全站搜索RuoYi-Vue
找到若依/RuoYi-Vue

使用Git拉取代码到本地（需要本地配置好Git）

# 进入自己的工作目录（根据实际选择）
cd ~/dev/workspace

# 拉取源码
git clone git@gitee.com:y_project/RuoYi-Vue.git

数据库初始化

建库

使用可视化工具Navicat连接刚创建好的数据库（需要开放权限）

创建若依项目数据库

-- 创建库
CREATE DATABASE
IF
  NOT EXISTS ry-vue CHARACTER 
  SET utf8 COLLATE utf8_general_ci;

-- 选择库
USE ry-vue;

-- 设定字符集
SET NAMES utf8mb4;

创建一个若依专用用户（可忽略）

-- 选择mysql库
USE mysql;
-- 创建一个用户，拥有`ruoyi`库的所有权限，用户名为ry，密码为123456，任何地址都可以登录
GRANT ALL PRIVILEGES ON ry-vue.* TO 'ry'@'%' identified BY '123456';
-- 刷新权限
FLUSH PRIVILEGES;

导入脚本

方式一：复制SQL脚本，手动执行
1. 打开ruoyi-vue项目，找到sql目录
2. 打开ry_xxxxxxx.sql文件
3. 编辑文件，在文件头加入一行SQL
```
USE ry-vue;
```
4. 复制全文
5. 使用Navicat连接MySQL
6. 点击新建查询
7. 将刚复制的SQL脚本粘贴至脚本窗口
8. 点击执行
9. （可选）同样的步骤执行quartz.sql脚本
方式二：导入SQL文件
1. 使用Navicat连接MySQL
2. 右键刚创建的ry-vue数据库，选择“执行SQL文件”
3. 选择刚克隆的ruoyi-vue项目，sql目录下，名为ry_xxxxxxx.sql的文件，执行
4. （可选）执行同目录下quartz.sql文件

项目调整

后端

数据源配置调整

1.使用IDEA打开RuoYi-Vue项目

找到ruoyi-admin模块下的数据源配置文件：application-druid.yml

编辑application-druid.yml配置文件中的主数据源部分如下

master:
  url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
  # 如前面已经创建ry用户并授权，可以用ry账号，否则使用root账号即可
  username: ry
  password: 123456

日志调整
- 路径调整
  1. 找到ruoyi-admin模块下的日志配置文件：logback.xml
  2. 修改第四行日志存路径
    
    /dev/logs/ruoyi这个是我的电脑上的日志存放路径，大家需要填写自己电脑上的日志存放路径（创建好目录）
```

  <property name="log.path" value="/dev/logs/ruoyi" />
```
- 新增编码格式（解决日志乱码问题）
  1. 还是logback.xml文件
  2. 找到encoder标签（有两处）
  3. 添加charset标签
```
<encoder>
    <pattern>${log.pattern}</pattern>
    <charset>UTF-8</charset>
</encoder>
```

本地启动项目测试

后端

找到ruoyi-admin模块下的SpringBoot入口类：RuoYiApplication
右键Debug启动项目
当在控制台看到“若依启动成功”，就说明我们的后端项目已经启动ok了

前端

终端进入ruoyi-ui前端项目的更目录（这里借助IDEA工具实现）

根据若依官方手册，执行相关命令

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

成功启动后自动在默认浏览器打开若依后台登录页
验证码正确获取，大功告成！！！

部署

配置调整

数据源地址调整
1. 找到ruoyi-admin模块下的数据源配置文件：application-druid.yml
2. 修改MySQL数据源地址
  
  如果MySQL和项目最终不是部署在同一台设备，需要调整为MySQL服务器的地址
  
  我这边最终会部署到Docker容器中，所以将域名调整为MySQL容器名称
3. 修改Redis数据源地址
  1. 找到ruoyi-admin模块下的application.yml文件
  2. 修改redis.host地址

打包

后端
- 打Jar包
  - 方式一：借助IDEA打包
    1. 打开IDEA右侧工具栏的Maven
    2. 执行clean
    3. 执行package（clean执行完后）
    4. 检查
      
      在ruoyi-admin模块下的target目录有生产对应的jar包就说明打包成功
  - 方式二：使用命令打包
    1. 进入ruoyi-vue项目根目录
    2. 打开终端
    3. 执行打包命令
```
mvn clean package
```
前端

参照官网的操作
1. 打包
```
# 在ruoyi-ui根目录下执行

# 打包正式环境
npm run build:prod
```
2. 在ruiyi-ui根目录下自动生成dist文件夹即可

部署

后端

制作Docker镜像
- 创建DockerFile文件
  1. 在自己电脑上找个地方创建dockerfiles文件夹（叫什么不重要，主要要和下面指令中的文件夹名称一致）
  2. 在dockerfiles文件夹下创建文件夹jars
  3. 将上一步打包生成的ruoyi-admin.jar文件复制到jars目录（target文件夹会随着mvn clean执行被清除，为了方便后续复用，将jar复制出来）
  4. 在dockerfiles文件夹下，创建一个名叫ry-DockerFile的文件（无后缀）
  5. 将下面内容写入ry-DockerFile文件后保存
```
# 基础镜像
FROM  openjdk:8-jre
# author
MAINTAINER ruoyi

# 挂载目录
VOLUME /home/ruoyi
# 创建目录
RUN mkdir -p /home/ruoyi
# 指定路径
WORKDIR /home/ruoyi
# 复制jar文件到路径
COPY ./jars/ruoyi-admin.jar /home/ruoyi/ruoyi-admin.jar
# 启动认证服务
ENTRYPOINT ["java","-jar","ruoyi-admin.jar"]
```
  1. 在dockerfiles同目录（注意是同目录！）下新建docker-compose.yml文件
  2. 在docker-compose.yml文件内写入如下内容
```
version : '3.8'
services:
  ruoyi:
    container_name: ruoyi
    build:
      context: ./dockerfiles
      dockerfile: ry-DockerFile
    ports:
      - "8080:8080"
    networks:
      ry:
networks:
  ry:
    external: true
```
  1. 在当前目录下打开终端命令，执行docker-compose指令
```
docker-compose -f docker-compose.yml up ruoyi
```
  1. 创建镜像并启动容器成功

前端

将ruoyi-ui项目下dist目录下的文件，拷贝至Nginx挂载目录的html目录下（不包括dist文件夹本身）
重启Nginx容器
```
docker restart nginx
```

M1 Mac本地部署若依前后端分离版项目

介绍

环境

准备

相关工具

容器准备

网桥创建

部署MySQL

部署Redis

部署Nginx

源代码拉取

数据库初始化

建库

导入脚本

项目调整

后端

本地启动项目测试

后端

前端

部署

配置调整

打包

部署

后端

前端

容器一览