news 2026/3/1 21:32:46

【流程】——若依项目前后端打包发布到服务器

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【流程】——若依项目前后端打包发布到服务器

打包发布

后端项目的打包发布

  1. 修改端口

    在admin模块的application.yml中修改后端端口

    还是这个文件,把redis配置页改一下

    1. 修改数据库连接

      在application-druid.yml中修改数据库连接

  • 打包后端文件

    双击生命周期的package

    生成目录的jar路径,会在打包时会在控制台打印出来

    在这个目录下运行java -jar jia-admin.jar,下面有RY的图标就代表打包的jar包能做出运行

  • 发布后端项目

    1. 上传项目

      将项目上传到宝塔文件的/www/wwwroot/xxx文件下面

    2. 创建项目

      创建为java项目并添加jdk信息(你可以下载宝塔里面的jdk,而可以上传自己的jdk)

    3. 解决日志路径不匹配问题

      然后项目报错如图,分析了一下大概是说我服务器没有若依配置中的日志存储路径

      就是我们在admin模块的logback.xml的日志存放路径设置,你可以在服务器创建/home/ruoyi/logs这个路径,或者改为服务器已经存在的路径

      <!--日志存放路径--><property name="log.path" value="/home/ruoyi/logs" />

      重新启动项目,并能启动成功,并能访问服务器的swagger文档http://your-sever:8002/swagger-ui/index.html,就代表后端项目发布成功(在开发阶段可以开发测试文档的访问,正式部署记得关闭)

前端项目的打包发布

  • 修改测试环境的后端服务路径

    在前端根目录下的vite.config.js文件,将your-server改为你的后端服务器地址(如果端口部署8002),的话,也可以改,但是前面也说了,这是这个配置只有在测试环境生效

    server:{port:80,host:true,open:true,proxy:{// https://cn.vitejs.dev/config/#server-proxy'/dev-api':{target:'http://your-server:8002',// target: 'https://api.wzs.pub/mock/13',changeOrigin:true,rewrite:(p)=>p.replace(/^\/dev-api/,'')}}},
  • 不同的环境

    在前端项目根目录下,有如下环境配置文件

    其中.env.development内容如图,开发环境的地址为/dev-api,被我们上面的vite.config.js代理转发了

    # 页面标题 VITE_APP_TITLE = 气Π的demo # 开发环境配置 VITE_APP_ENV = 'development' # 若依管理系统/开发环境 VITE_APP_BASE_API = '/dev-api'
    • 生产环境和预发布 / 测试的区别

      对比维度.env.production(生产环境).env.staging(预发布 / 测试环境)
      环境标识VITE_APP_ENV = ‘production’VITE_APP_ENV = ‘staging’
      API 基础路径VITE_APP_BASE_API = ‘/prod-api’VITE_APP_BASE_API = ‘/stage-api’
      构建命令npm run build(默认加载该配置)npm run build:stage(通过 --mode staging 加载)
      核心作用场景正式部署上线,面向最终用户使用预发布测试、功能验证、环境适配测试
      配置应用范围生产环境 API 连接、正式部署 URL 路径配置预发布环境 API 连接、测试环境 URL 路径配置
  • 修改测试环境的后端服务路径

    我们这里就直接用生产环境打包了,配置.env.production,将下面的/prod-api改为http/https +your-server

    # 若依管理系统/生产环境 VITE_APP_BASE_API = '/prod-api'

    然后运行打包命令npm run build,将项目的打包文件(项目根目录下的dist文件夹),放到宝塔文件夹中,

    然后创建php站点如下,域名可以选择IP地址格式或者已经解析的域名,根目录选择上面的dist文件夹,下面的配置不用改

  • 解决内容混合问题

    一般的同学用IP地址格式解析配置的话不会遇到这个问题,但如果你绑定了SSL证书和域名,而且http和https混用就会导致内容混合问题,浏览器控制台报错如下

    这玩意就有点复杂了,但是我相信看到这里的各位基本上都有点东西了,我又就不藏着掖着了

    1. 首先,你得需要域名是吧,取阿里或腾讯注册一个,然后进行子域名划分(域名云解析),如图(记录值就是你的服务器的主机地址)

    2. 然后对前后端进行域名配置(要和你上面域名划分的要一样)

    3. 绑定了域名,就可以申请免费的Lets Encrypt证书,然后勾选域名就可以申请了,很简单

      申请好证书后可以开启强制https访问

      然后者时候就有人会问了,Lets Encrypt证书有效期只有三个月,到期了怎么办,有的孩子,有的,宝塔有任务计划,可以自动执行证书续签脚本,只有执行周期小于三个月就可以实现永久续杯。

    4. 外网映射

      这个在后端项目(我们这里是java)中才有,开启的前提是后端项目配置域名。它的功能有的像反向代理,可以转发重写,没有特殊要求的话就直接写/(域名请求全部映射到8002端口)

      然后改一下前端打包环境的请求路径为域名,后端配置一下跨域设置,就跨域成功运行项目啦。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/27 23:51:28

Velero压缩引擎深度解析:从架构原理到实战调优

Velero压缩引擎深度解析&#xff1a;从架构原理到实战调优 【免费下载链接】velero Backup and migrate Kubernetes applications and their persistent volumes 项目地址: https://gitcode.com/GitHub_Trending/ve/velero 你是否曾经面对Kubernetes集群备份时&#xff…

作者头像 李华
网站建设 2026/2/27 15:57:08

DolphinScheduler 2025技术生态:从零开始掌握分布式调度系统

DolphinScheduler 2025技术生态&#xff1a;从零开始掌握分布式调度系统 【免费下载链接】dolphinscheduler Dolphinscheduler是一个分布式调度系统&#xff0c;主要用于任务调度和流程编排。它的特点是易用性高、可扩展性强、性能稳定等。适用于任务调度和流程自动化场景。 …

作者头像 李华
网站建设 2026/3/1 14:14:41

5大WebGPU错误终极解决方案:让WebLLM硬件加速不再失败

5大WebGPU错误终极解决方案&#xff1a;让WebLLM硬件加速不再失败 【免费下载链接】web-llm 将大型语言模型和聊天功能引入网络浏览器。所有内容都在浏览器内部运行&#xff0c;无需服务器支持。 项目地址: https://gitcode.com/GitHub_Trending/we/web-llm WebLLM作为革…

作者头像 李华
网站建设 2026/3/1 5:49:38

一步成图革命:OpenAI一致性模型如何重塑2025生成式AI生态

一步成图革命&#xff1a;OpenAI一致性模型如何重塑2025生成式AI生态 【免费下载链接】diffusers-cd_imagenet64_lpips 项目地址: https://ai.gitcode.com/hf_mirrors/openai/diffusers-cd_imagenet64_lpips 导语 当传统AI绘画还在依赖50步迭代生成图像时&#xff0c;…

作者头像 李华
网站建设 2026/3/1 15:37:38

GDevelop游戏引擎终极指南:从零基础到专业开发全流程

GDevelop游戏引擎终极指南&#xff1a;从零基础到专业开发全流程 【免费下载链接】GDevelop 视频游戏&#xff1a;开源的、跨平台的游戏引擎&#xff0c;旨在供所有人使用。 项目地址: https://gitcode.com/GitHub_Trending/gd/GDevelop 作为一款革命性的开源游戏开发平…

作者头像 李华
网站建设 2026/3/1 5:10:14

生成对抗网络创建测试数据

在机器学习和深度学习领域&#xff0c;生成对抗网络&#xff08;GAN, Generative Adversarial Networks&#xff09;是一种强大的生成模型&#xff0c;广泛应用于图像生成、数据增强、风格迁移等任务。对于软件测试从业者来说&#xff0c;GAN 也可用于生成测试数据&#xff0c;…

作者头像 李华