前后端分离项目部署步骤

14 篇文章 0 订阅

现在公司基本上都是前后端分离了,前端基本上就是vue这种前端框架,后端基本上是接口服务,今天在网上找到一个视频学习了一下部署过程,今天记录一下。
部署准备一台云服务器,文件上传工具, ssh连接工具。

环境准备

linux centos7.x ,node.js jdk1.8, mysql 5.7+,redis,nginx
准备将若依的项目拉下来运行起来
可以直接搜索项目 在gitee点这个Vue的这个是前后端分离的项目
在这里插入图片描述
把代码拉下来或者下载下来
在这里插入图片描述
我们得到一个文件加压用idea打开它
在这里插入图片描述
ruoyi-ui这个是前端的项目,剩下的全部都是后台服务
然后我们先搭建服务环境

服务器环境搭建

先搭建node.js 安装淘宝镜像。
先创建一个文件夹 把所有的安装包都下载到这个文件夹里面

mkdir /download
cd /download

下载node.js安装包

wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz

解压

tar -xvf node-v10.15.3-linux-x64.tar.xz

配置环境变量

 vim  /etc/profile

把以下内容放到文件末尾然后保存退出

export NODE_HOME=/download/node-v10.15.3-linux-x64
export PATH=$PATH:$NODE_HOME/bin 
export NODE_PATH=$NODE_HOME/lib/node_modules

让文件生效

source /etc/profile

出现这个说明成功

在这里插入图片描述
然后我们把之前下载的前端代码传到服务其上来ruoyi-ui这个文件传到download文件夹内
在这里插入图片描述
进入到这个文件夹内 安装淘宝镜像打包

ruoyi-ui/
 npm install --unsafe-perm --registry=https://registry.npm.taobao.org

打包

 npm run build:prod

打完包后会生成一个文件过后我们会把这个文件放到nginx里运行起来

在这里插入图片描述
这个dist文件就是要运行的文件
然后我们再安装nginx
在这里插入图片描述
这个是什么都没配置的nginx 接下来我们要开始配置了刚刚的那个dist的包了开始修改nginx 配置文件

cd /usr/local/webserver/nginx/conf/

这个是我刚刚的包的路径要明确它因为我们一会要修改它
/download/ruoyi-ui/dist

vim nginx.conf

在这里插入图片描述

在这里插入图片描述
修改这两处地方
重新启动nginx
有时候这个命令可能不好用!!! 可以直接把进程号查出来kill 干掉重启

 /usr/local/webserver/nginx/sbin/nginx -s reopen

在这里插入图片描述

然后可以访问一下在浏览器输入ip 回车
在这里插入图片描述

至此前端搭建成功!!!

然后开始搭建后端服务

首先我们要配置后端环境先安装一个mysql 和一个redis
还要装一个jdk 1.8的环境 然后把刚刚下载的后端代码先在本地跑一下
对了要先把初始化脚本跑一下sql文件都在sql文件夹下
我们主要是修改mysql 和redis 配置文件
在这里插入图片描述
在这里插入图片描述
改完直接启动看看是否报错 **

配置jdk环境别忘了这个不演示了

如果是连接问题看看密码是否错误,防火墙是否添加了端口,如果是阿里云的服务器要记得配置安全组啊!!!!!!!!!!!

**
在这里插入图片描述

启动成功应该是没什么问题,

但是实际上有点问题!!!

我们打包的时候把定时任务的包不要打要不然会出问题
在这里插入图片描述
给它注释掉 还有上面引入的也注释掉在这里插入图片描述

接下来打包 打成jar包
在这里插入图片描述

把这个jar包传到服务器上 还是传到download目录下

在这里插入图片描述
这样jar包我们一会要运行它 上面那个是它产生的日志文件

nohup java -jar ruoyi-admin.jar &

查看是否运行成功

tail -f nohup.out 

在这里插入图片描述

至此后端服务运行成功!!!

现在后端和前端启动成功了 但是他们之间没有联系 我们要配置一下nginx 做个转发让他们映射起来

找到前端的请求地址我们用nginx 做一个转发

在这里插入图片描述
我们修改一下nginx 配置

vim /usr/local/webserver/nginx/conf/nginx.conf

加上这个配置
在这里插入图片描述
重新启动

/usr/local/webserver/nginx/sbin/nginx -s reload

再次访问就可以了账号admin 密码 admin123 然后就可以登录试试了

在这里插入图片描述

okk!!!

我觉得作为程序要要了解整个项目的上线流程 试着部署一套前后端分离项目 可以帮助自己对编程架构这些东西有一个更深入的认识!!!

  • 33
    点赞
  • 373
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
若依框架的前后端分离项目部署可以按照以下步骤进行: 1. 下载前后端分离版本:你可以从若依框架的官方网站(https://gitee.com/y_project/RuoYi-Vue)下载前后端分离版本的代码。 2. 部署后端:将下载的后端代码部署到你的服务器上。若依框架的后端采用Spring Boot和Spring Security,你需要确保你的服务器上已经安装了Java环境,并且配置好了数据库等相关环境。 3. 配置后端:在部署后的后端代码中,你需要根据你的实际情况进行一些配置,例如数据库连接配置、权限认证配置等。具体的配置方式可以参考若依框架的官方文档或者代码中的注释。 4. 构建前端:将下载的前端代码使用npm或者yarn等工具进行构建。在构建之前,你需要确保你的服务器上已经安装了Node.js和相关的包管理工具。 5. 部署前端:将构建后的前端代码部署到你的服务器上。你可以将前端代码部署到任意的静态文件服务器上,例如Nginx、Apache等。 6. 配置前端:在部署后的前端代码中,你可能需要根据你的实际情况进行一些配置,例如后端接口的地址等。具体的配置方式可以参考若依框架的官方文档或者代码中的注释。 7. 启动项目:在完成以上步骤后,你可以启动你的前后端分离项目了。你可以访问前端页面,通过前端页面与后端进行交互。 请注意,以上步骤仅为一般的部署流程,具体的部署方式可能会因为你的实际情况而有所不同。建议你参考若依框架的官方文档或者向若依框架的开发者寻求帮助以获取更详细的部署指导。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值