🍟若依前后端分离项目,部署到Linux服务器
<p>Gitee地址：https://gitee.com/y_project/RuoYi-Vue.git</p><h2>一、项目本地启动（Windows）</h2>
<p>maven：3.6.3</p>
<p>jdk：1.8</p>
<p>mysql：8.0.18</p>
<h3>1.1、后端项目配置，启动</h3>
<blockquote>
<p>1、创建数据库</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">1、创建数据库：ry-vue
2、执行两个SQL文件：sql/quartz.sql、sql/ry_20230223.sql
</pre>
</div>
<blockquote>
<p>2、修改配置文件：ruoyi-admin/application.yml</p>
</blockquote>
<ul>
<li>修改mysql连接信息</li>
<li>修改redis连接信息</li>
<li>修改项目启动端口号，这里我修改为了8058</li>
</ul>
<blockquote>
<p> 3、启动后端项目</p>
</blockquote>
<p>浏览器访问：http://localhost:8058/</p>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607094649143-1136488972.png" alt="" width="488" height="65" loading="lazy"></p>
<h3>1.2、前端项目配置，启动</h3>
<p>NodeJs版本：v16.18.1</p>
<p>NodeJs历史版本下载地址：https://nodejs.org/dist/</p>
<p>NodeJs安装：https://www.cnblogs.com/zhangzhixi/p/14305955.html#_label1_0</p>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607095557971-1746042414.png" alt="" width="264" height="114" loading="lazy"></p>
<blockquote>
<p>1、修改配置</p>
</blockquote>
<p>修改ruoyi-ui/vue.config.js</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 修改前端项目端口
const port = process.env.port || process.env.npm_config_port || 8060 // 端口
// 后端项目ip和端口
target: `http://localhost:8058`,
</pre>
</div>
<blockquote>
<p>2、构建启动 </p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># 进入项目目录
cd ruoyi-ui
# 安装依赖（建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题）
npm install --registry=https://registry.npmmirror.com --strict-ssl=false
# 启动服务
npm run dev
</pre>
</div>
<blockquote>
<p>3、访问</p>
</blockquote>
<p>浏览器访问：http://localhost:8060/</p>
<p>默认用户名密码：admin admin123</p>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607100640723-1110089471.png" alt="" width="1035" height="274" loading="lazy"></p>
<blockquote>
<p>4、通过idea启动前端项目</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607100951403-340309962.png" alt="" width="1037" height="653" loading="lazy"></p>
<h2>二、Linux下项目部署</h2>
<p>Centos版本：Centos7.4</p>
<p>虚拟机IP：192.168.147.128</p>
<h3>2.1、后端项目部署（Jar包）</h3>
<blockquote>
<p>1、使用idea在本地maven打包</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607102059856-751252452.png" alt="" width="1129" height="604" loading="lazy"></p>
<blockquote>
<p>2、上传jar包到服务器</p>
</blockquote>
<blockquote>
<p>3、编写shell脚本执行：start_ruoyi_admin.sh</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">#!/bin/bash
# 1、常量
LOG_PATH=/usr/local/project/ruoyi/log.out # 日志输出位置
JAVA_PATH=/usr/local/java/jdk1.8.0_144# JDK位置
PROJECT_MANAGER_PATH=/usr/local/project/ruoyi/ruoyi-admin/ruoyi-admin.jar# 后端项目位置
SERVER_PORT=8058 # 服务端口
# 记录开始时间
echo -e "\e[34m ==================start【$(date +"%Y-%m-%d %H:%M:%S")】================== \e[0m" >> $LOG_PATH
# 2、启动项目的函数
function start_project {
nohup $JAVA_PATH/bin/java -jar -Dserver.port=$SERVER_PORT $PROJECT_MANAGER_PATH >>$LOG_PATH 2>&1 &
}
# 3、获取进程ID
PID=$(pgrep -f $PROJECT_MANAGER_PATH)
# 4、判断进程是否存在
if pgrep -f $PROJECT_MANAGER_PATH > /dev/null
then
echo "进程存在，关闭项目，然后重启~" >> $LOG_PATH
kill "$PID"
sleep 5
kill -9 "$PID" > /dev/null 2>&1
start_project
else
echo "进程不存在，启动项目" >> $LOG_PATH
start_project
fi
# 记录结束时间
echo -e "\e[34m ==================end【$(date +"%Y-%m-%d %H:%M:%S")】================== \e[0m" >> $LOG_PATH</pre>
</div>
<blockquote>
<p>4、启动 </p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607103859685-332870028.png" alt="" width="524" height="79" loading="lazy"></p>
<h3>2.2、后端项目部署（War包）[根据需要，可选]</h3>
<p>Tomcat中部署SpringBoot项目</p>
<h3>2.3、前端项目部署</h3>
<p>因为需要将vue程序部署到nginx，这里需要安装下。</p>
<hr>
<p>Nginx安装教程</p>
<p>Linux下NodeJs安装教程</p>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607110850291-402939123.png" alt="" width="484" height="74" loading="lazy"></p>
<blockquote>
<p>1、前端vue发布部署</p>
</blockquote>
<p> 构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件</p>
<p>发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">1、上传ruoyi-ui到Linux服务器，进入ruoyi-ui目录下
2、安装依赖：
npm install --registry=https://registry.npmmirror.com --strict-ssl=false
3、第一种：运行(本地)，直接通过ip加端口访问
nohup npm run dev >> npm.out 2>&1 &
4、第二种：部署/打包，通过nginx进行发布
npm run build:prod
4.2、nginx发布
server {
# 1、vue项目端口
listen 8060;
server_namelocalhost;
location / {
# 2、打包的文件路径
root /usr/local/project/ruoyi/ruoyi-ui/dist;
try_files $uri $uri/ /index.html;
indexindex.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;
# 3、后端项目访问地址
proxy_pass http://localhost:8058/;
}
error_page 500 502 503 504/50x.html;
location = /50x.html {
root html;
}
}
5、关闭前端vue项目：
ps -ef|grep mixky-ui|grep -v grep | awk '{print $2}' | xargs kill -9</pre>
</div>
<blockquote>
<p><span style="color: rgba(0, 0, 0, 1)">2、浏览器访问：</span>http://192.168.147.128:8060/</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2126720/202306/2126720-20230607112855394-1599930633.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p> </p><br><br>
来源：https://www.cnblogs.com/zhangzhixi/p/17462493.html
頁:
[1]