前后端分离项目部署步骤

1年前 (2022) 程序员胖胖胖虎阿
194 0 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!!!

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

版权声明:程序员胖胖胖虎阿 发表于 2022年11月13日 上午1:08。
转载请注明:前后端分离项目部署步骤 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...