美文网首页
手动部署RuoYi前后端分离项目

手动部署RuoYi前后端分离项目

作者: simplehych | 来源:发表于2022-10-10 16:00 被阅读0次

    RuoYi文档地址:http://doc.ruoyi.vip
    前后端不分离项目地址:https://gitee.com/y_project/RuoYi(前端代码位于 src/main/resources/templates
    前后端分离项目地址:https://gitee.com/y_project/RuoYi-Vue (此前端代码位于 /ruoyi-ui 为vue2版本,vue3版本前端地址:https://github.com/yangzongzhuan/RuoYi-Vue3

    1. 后端项目

    1.1 环境准备

    JDK、MySQL、Redis、Maven

    1.2 运行

    1. 创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql,quartz.sql
    2. 打开项目运行com.ruoyi.RuoYiApplication.java,出现 (♥◠‿◠)ノ゙ 若依启动成功 ლ(´ڡლ)゙ ` 表示启动成功。
    3. 验证 http://localhost:8080

    配置文件位于:src/main/resources/application.yml (application-druid.yml)

    其中如下地址需要注意:

    # src/main/resources/application.yml
    # 文件路径 示例( Windows配置D:/ruoyi/uploadPath,Linux配置 /home/ruoyi/uploadPath)
      profile: /home/ruoyi/uploadPath
    
    # src/main/resources/logback.xml
    <!-- 日志存放路径 -->
    <property name="log.path" value="/home/ruoyi/logs" />
    

    1.3 打包

    1. 执行 /bin/package.bat 脚本 或 mvn clean package -Dmaven.test.skip=true 命令
    2. 生成包位置 /ruoyi-admin/target/ruoyi-admin.jar

    主模块 ruoyi-admin,依赖其他模块,如ruoyi-frameworkruoyi-common等,打包时其他模块同理打出jar包供主模块依赖

    可修改打包方式为 war/jar,位置 /ruoyi-admin/pom.xml文件中的 <packaging>jar</packaging>

    1.4 部署运行

    1. 上传至服务器目标位置
    2. 执行命令运行 java -jar ruoyi-admin.jar
    3. 验证,服务器终端 curl 127.0.0.1:8080 或 浏览器打开服务器对应地址+端口验证,注意端口占用,默认是8080端口

    2. 前端项目

    2.1 环境准备

    Node、Nginx(部署使用)

    2.2 运行

    yarn install
    yarn dev
    

    根据执行日志提示对应的网址打开验证,默认地址是http://localhost:80,默认账户/密码 admin/admin123

    2.3 打包

    1. yarn build:prod
    2. 生成位置 /dist 文件夹,里面就是构建打包好的文件,通常是 .js 、.css、index.html 等静态文件。

    打包配置位于 /vite.config.js/vue.config.js,依赖打包工具不同
    其中如下配置需要注意:

    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
        base: VITE_APP_ENV === 'production' ? '/' : '/',
    

    2.4 部署

    放置服务器上,请求地址的端口和后端项目端口不一致,导致接口请求失败

    使用Nginx 服务器转发

    1. 配置/usr/local/etc/nginx/nginx.conf
    http {
        
        server {
            listen     80; # 1 设置 Nginx 监听的端口
            #root /your_custom_directory; # 2 此处定义Nginx的根路径,或下方也可
    
            location / {
                root   /your_custom_directory; # 2 同上
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
            
            location /prod-api/ { # 3 对 域名+/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;
                proxy_pass http://localhost:8080/; # 4 转发到目标地址
            }
        }
    
        # 其他监听配置
        server {
            listen 8080;
            ...
        }
    }
    
    1. 将打包生成的 dist 文件夹放到配置的 /your_custom_directory 的目录下(可额外新建子目录)
    2. 验证,注意请求Nginx的端口,在请求接口 /prod-api 就会转到目标地址,否则会请求不到

    java 项目 8080
    前端项目用 Nginx 的目录下 然后转发到8080端口
    本地可以修改 Nginx 的 location 的根目录
    前端访问地址统一用 Nginx 的端口,这样 vue项目请求接口就能请求到java项目了

    自动部署

    使用Jenkins实现打包、发布、部署
    同时使用docker镜像+Registry(harbor)
    k8s 编排容器
    https://blog.csdn.net/weixin_54202028/article/details/125989942

    Springboot整合MongoDB的Docker开发,其它应用也类似

    微软Docker微服务开发流程
    『中级篇』 Docker Bridge详解(26)
    『中级篇』 docker容器之间的Link(27)

    相关文章

      网友评论

          本文标题:手动部署RuoYi前后端分离项目

          本文链接:https://www.haomeiwen.com/subject/mgfzartx.html