服务器环境准备
首先服务器需要安装好相关的软件:jdk、mysql、nginx、tomcat、redis
注:建议利用直接使用 OneinStack - 一键PHP/JAVA安装工具 快速构建
下图为参考构建配置(DB密码可以自己进行修改): 复制安装命令后,将安装命令输入服务器端,并回车键运行进行安装,然后等待安装完成就可以了
数据库配置
首先要在服务器端设置好数据库并开好端口后在 navicat 连接数据库,具体连接操作如下:
然后右击新建数据库,数据库名与项目使用数据库名对应,创建完成后右击新建数据库选择 运行SQL文件
选择本地打包好的sql(打包数据库选择 转储SQL文件 -> 结构和数据)文件,运行后服务器端的数据库就配置好了
项目打包并上传到服务器
1.后端项目打包
首先需要修改数据库连接等配置项,相关目录如下:
目录:ruoyi-admin\src\main\resources\application-druid.yml
将生成 jar包修改为生成 war包,进入 pom.xml 文件,将 jar 修改为 war , pom.xml 的相关目录如下:
目录:ruoyi-admin\pom.xml
进入 bin 文件夹,先运行 clean.bat 文件清理 target , 接着运行 package.bat 进行打包
完成后,在 ruoyi-admin 文件夹下的 ruoyi-admin.war 就是打包好的后端部分,具体目录如下:
目录:ruoyi-admin\target\ruoyi-admin.war
2.前端项目打包
打开 .env.production 文件,写入服务器部署的后台接口
在Terminal终端进入 ruoyi-ui 目录后运行打包命令:
npm run build:prod
完成后,在 ruoyi-ui 文件夹下的 dist 文件就是打包好的前端部分
3.将打包项目部署到服务器(这里我使用的是 Xshell 和 Xftp )
首先输入主机号(端口号按自己需求 只要不冲突就可以),然后再点击 用户身份验证输入账号/密码:
连接成功后点击图示按钮进入文件传输:
4.将上述打包好的前端部分和后端部分分别传输到服务器的对应目录下
前端目录:/root
后端目录:/usr/local/apache-tomcat/webapps
至此,项目打包以及上传到服务器完成
Nginx 配置
1.进入 nginx 目录下并选择用记事本编辑 nginx.conf 文件,具体如下:
目录:/usr/local/nginx/conf
2.找到 server 标签,删除原有的配置,改为以下代码:
server {
listen 8090; // 运行前端的端口(服务器对外端口)
server_name 服务器公网IP;
charset utf-8;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers *;
if ($request_method = 'OPTIONS') {
return 204;
proxy_pass http://127.0.0.1:8004/;
proxy_set_header Host $host:8090;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
expires -1;
proxy_connect_timeout 4s; #配置点1
proxy_read_timeout 60s; #配置点2,如果没效,可以考虑这个时间配置长一点
proxy_send_timeout 12s; #配置点3
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
location / xxx(目录名) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
proxy_pass http://127.0.0.1:8004/xxx; # 与放到服务器的后端war包同名
proxy_set_header Host $host:8090;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
expires -1;
add_header Cache-Control no-store;
proxy_connect_timeout 4s; #配置点1
proxy_read_timeout 60s; #配置点2,如果没效,可以考虑这个时间配置长一点
proxy_send_timeout 12s; #配置点3
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
# 前端部分配置
location /xxx(目录名)/ {
root /root;
index index.html;
try_files $uri $uri/ @rewrites_xxx; # 自定义 与下方同名即可 建议使用目录名
location @rewrites_xxx {
rewrite ^(.+)$ /xxx(目录名)/index.html last;
以目录名为 admin 为例,那么访问服务时,则输入以下网址:
公网ip:8090/admin/index.html
3.完成配置后需要重启 nginx 服务,在命令行输入以下命令:
/usr/local/nginx/sbin/nginx -s reload
注: -s reload 之前部分目录需要对应到自己服务器 nginx/sbin/nginx 文件夹目录下
此时访问页面,页面显示502那么 nginx 配置成功,报错是因为后端虽然已经上传到服务器但是 tomcat 还没有运行他
重启 Tomcat
1.首先进入 tomcat 的 bin 目录下
cd /usr/local/tomcat/bin
2.使用 tomcat 关闭命令
sh shutdown.sh
3.使用 tomcat 启动命令
sh startup.sh
4.查看 tomcat 运行日志
tail -f ../logs/catalina.out
当经典的佛祖出现就说明后端服务器开始运行了
成功运行界面
如果出现了验证码,则说明项目部署完成
如果验证码未出现 并且接口返回 404 则说明后台部署出现了问题,建议检查后端部署是否有问题;如果接口返回 502 则说明后端启动未完成或启动失败,建议查看最新的日志找到报错原因
日志目录:/usr/local/tomcat/logs
复制代码