一个基于若依(ruoyi-vue3)的小项目部署记录

一、背景

收到朋友的求助,他拿到了一个项目的源代码,说需要我帮助部署。部署要求是需要域名访问。

因为没有文档和其他资料以及帮助,我先清理了源收到的资料:

1.后端:是java代码,一看就是若依框架。心里大大的有底,springcloud那套。

2.前端:vue3的项目,从项目名称看也是若依框架。不虚火,我虽然是纯后端开发出生,去年带徒弟做过vue的项目,对于开发过程很清楚。

3.数据库:一看是mysql5.7.X的脚本,拿捏。

二、部署过程

(一)思路整理

域名访问,要的急,就只能快速注册一个域名,然后用香港的服务器了。不然,合规的时间太长了,本身这个小系统是个任务管理的系统,没有啥不合规的。有了这个思路就简单了,注册域名=》购买服务器=》本机运行测试=》服务器安装测试。

(二)处理过程

1.域名注册

用的朋友的阿里云帐号,他之前实名过,所以注册域名异常的顺利,选择了1个xyz结尾的域名。

2.服务器购买

买的香港的服务器,因为域名解析到香港的服务器不强制要求备案,当然本身是合法合规的哈!因为预算问题,买了3个月,8G内存,便宜的先用着。

3.本地调试

因为我最近1年没有怎么写代码,电脑又是买的新的,所以好多东西没有安装。大概说明一下使用到了哪些东西。我个人喜欢从后到前的安装顺序。

(1)数据库:mysql官方 5.7.X去下载

(2)数据库访问工具:navicat(2个文件),测试连接没有问题

(3)jdk:之前安装的openJDK,本身可以用

(4)Eclipse:之前安装的,可以用,没有问题。只是代码里面用到了lombok,我没有这个习惯,因为我的Eclipse可能因为版本的问题,5分钟没有解决,我就手动加上了get和set方法。

(5)安装 Node.js 、cnpm、vue cli(vue脚手架)Node.js --- Download Node.js®

node -v 看看安装的结果。

下面是安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

这里遇到了一个错误:

C:\Users\25011>npm install -g cnpm --registry=https://registry.npm.taobao.org npm error code CERT_HAS_EXPIRED npm error errno CERT_HAS_EXPIRED npm error request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired npm error A complete log of this run can be found in: C:\Users\25011\AppData\Local\npm-cache\_logs\2025-07-09T02_40_34_711Z-debug-0.log

输入这个命令解决了:

复制代码
npm install -g npm@latest

cnpm -v 看看安装结果

下面是安装 vue cli ,就是vue的脚手架:

cnpm install -g @vue/cli

vue -V 看看安装结果,V大小写敏感。

(6)vscode:到微软官方下载的最新版本,这个安装后麻烦点,分别安装了汉化、Volar插件。因为不太熟悉vscode,这里记录一下操作,通过扩展输入Chinese,选择简体中文插件,安装的。

但是安装后,重启也没有变成中文,所以还打开命令面板设置了,输入**Language,选择Configure Display Language,进行了设置。**

打开命令终端是在这里:

npm run dev 是运行测试

npm run build:prod 是正式打包,编译到dist文件夹中,它的命令来源是:

4.服务器部署

主要用到了这些软件。

(1)前端代码是dist目前复制到nginx目录下,修改了conf文件,指向了dist目录。端口是80。

(2)后端是一个jar包,编写了一个bat文件来运行。因为数据库的密码不一样,密码我在bat文件中通过 java -jar xx.jar --spring.xxx.xxx.password=xxx 来指定的。端口是8080。

(3)我访问时出现了图形验证码访问404,发现请求的是80端口,验证码应该是后台服务,端口应该是8080。所以,还需要在哪里设置一下,指定后端的服务都是访问8080端口。发现.env.producation文件中,有后端服务的context名称,就是prod-api,那么就可以到nginx去设置代理了。

(4)nginx设置后端服务代理,第二部分就是前端访问后端时,就访问8080端口

location / {

root dist;

index index.html index.htm;

}

location /prod-api/ {

proxy_pass http://localhost:8080/;

}

5.域名解析设置

www.xxx.xyz=>ipv4=>输入ip(不含http那些,就是纯ip),10分钟。

三、验证结果

输入http://www.xxx.xyz,访问正常。

相关推荐
程序员猫哥_7 分钟前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞058 分钟前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
我爱加班、、13 分钟前
Websocket能携带token过去后端吗
前端·后端·websocket
AAA阿giao13 分钟前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
杨超越luckly19 分钟前
HTML应用指南:利用GET请求获取中国500强企业名单,揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强
一 乐36 分钟前
校园二手交易|基于springboot + vue校园二手交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
科技D人生1 小时前
Vue.js 学习总结(20)—— Vue-Office 实战:word、pdf、excel、ppt 多种文档的在线预览
vue.js·word·vue-pdf·stylesheet·docx-preview·vue-office
vx1_Biye_Design1 小时前
基于Spring Boot+Vue的学生管理系统设计与实现-计算机毕业设计源码46223
java·vue.js·spring boot·spring·eclipse·tomcat·maven
vx_Biye_Design1 小时前
基于Spring Boot+vue的湖北旅游景点门票预约平台的设计--毕设附源码29593
java·vue.js·spring boot·spring cloud·servlet·eclipse·课程设计
hedley(●'◡'●)1 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机