云服务器部署前后端分离项目(若依)详细教程

镜像下载、域名解析、时间同步请点击 阿里云开源镜像站

第一次在Linux云服务器上部署前后端分离项目,查了很多资料和视频,踩了许多坑。成功实现部署若依的前后端分离项目后,想记录一下前后端部署的过程,供学习的小伙伴参考。

1.环境准备

一定要在开始前先准备好以下工具和环境(可以上网查找安装的方法),后续还会对其进行修改:

  • 购买一个云服务器,例如阿里云等等,操作系统为Linux centos7.x
  • 在云服务器上安装Nodejs(之前的博客有安装方法)
  • 在云服务器上安装Nginx
  • 在云服务器上安装jdk1.8+(推荐1.8)
  • 在云服务器上安装mysqk5.7+(推荐5.7)
  • 在云服务器上安装redis
  • 远程连接工具xshell或者finalshell

2.下载前后端项目

若依前后端项目地址:https://gitee.com/y_project/RuoYi

若依前后端项目使用手册地址:
http://doc.ruoyi.vip/ruoyi/

进入网址将项目下载或者git clone到本地并解压:

file

在这个项目中,ruoyi-ui文件夹是前端项目,其余为后端项目,我们接下来需要分开打包部署。

file

3.远程连接服务器

通过xshell或者FinalShell远程连接服务器,连接指令:

ssh user@ip

user为服务器的用户名,一般为root,ip是服务器的ip
,默认端口号为22,例如:

ssh root@172.12.134.12

如果连接失败可能是服务器没有开启远程连接许可或者端口等等,可以搜寻相关方法解决。

4.前端部署

(1)首先将项目中ruoyi-ui这个文件夹上传至服务器,可以用FinalShell的文件管理功能,也可以用服务器管理的上传文件功能,例如宝塔界面里的文件管理:

file

可以专门建一个目录存储它们,例如在根目录下创建了一个project文件夹

cd /
mkdir project
file

(2)依次输入如下命令,进入ruoyi-ui文件夹,并对前端代码进行打包,生成一个dist文件夹,这就是前端代码打包后的文件:

cd ruoyi-ui
npm install --unsafe-perm --registry=https://registry.npm.taobao.org
npm run build:prod
file

(3)修改nginx的配置文件(也就是nginx.conf),使其前端项目能够被访问,一般nginx会被安装在/usr/local目录下,因此配置文件路径为/usr/local/nginx/conf/nginx.conf 。如果忘记nginx安装在哪里了,可以用如下命令找到它:

find / -name 'nginx.conf'
file

用vim编辑器打开nginx.conf,修改配置。修改的几个地方,最好图中的信息都一样,红色框框圈出来的是容易忽略的地方如下:

file

1、 修改为root用户

2、修改监听listen的端口号为9000,这个端口号取决于自己想从几号端口访问前端页面,后续也别忘了在防火墙中开启这个端口,不然无法访问;server_name为你的服务器ip,如果你有域名且配置解析好了,也可以再在此添域名

file

3、找到这些内容并将root 后跟的路径修改为刚才前端代码打包的dist文件夹的路径,保存后退出。如果仍不清楚改哪里,可以翻倒博客最后面的部分,有两张nginx.conf的整体示意图。

file

4、由于上述前端使用的是9000端口(也可以换为你自己想要的端口,例如80端口),因此要在防火墙中也打开这个端口,外界才可以访问。于此同时,后端也需要一个8080端口,因此也要将其打开,后续部署后端服务要用到。注意有时候可能你想用的端口已经被其他进程占用,可以尝试找到该进程并将其kill掉或者重新开另一个端口号,具体方法不在此赘述,可上网查询。

firewall-cmd --zone=public --add-port=9000/tcp --permanent
firewall-cmd --zone=public --add-port=8080/tcp --permanent

我用的是阿里云的轻量应用型服务器,因此还需要检查以下宝塔界面的“安全”里面是否开启该端口,以及阿里云服务器工作台里的“安全”->“防火墙”中的端口,如果没有开启,则需要在这里手动开启。此外阿里云的ECS云服务器需要为该端口号添加安全组规则。

file
file

5、端口配置好了后,每次修改了nginx的配置文件后一定要重新启动nginx,使新配置生效。如果重启失败,则先找到nginx的进程,然后将其kill掉,再重启nginx:

如果已经将nginx配置到全局的环境变量中,就可以直接运行这个命令重启nginx
nginx -s reload
如果没有将其配置到全局的环境变量中,则需要进入安装的nginx/sbin/目录中,用如下命令:
./nginx -s reload
查看进程号: ps -ef|grep nginx
杀死进程:kill -term xxxx/ kill -int xxxx
file

6、浏览器输入“ip:9000“,例如:198.172.1.1:9000,如果出现出现如下画面,则表示前端启动成功。否则则需要仔细检查两个地方,一个是nginx的配置信息,一个是端口是否真的被完全打开:

file

5.后端准备

(1)配置服务器上的mysql数据库,使mysql数据库可以被远程访问。具体教程可以看https://blog.csdn.net/VariatioZbw/article/details/105823337
开启后可以在服务器上远程连接一下看是否成功:

mysql -h 198.172.1.1 -P 3306 -u root -p123
h表示host,服务器ip地址
P表示端口号,一般mysql端口号为3306
u表示用户名,建议设为root用户
p表示密码,123为root这个用户的密码,p后面要紧跟密码,不要空格

(2)redis数据库也要配置好,例如它的端口要被打开,设置密码,具体方法可以参考网上的方法。

(3)进入mysql数据库,建一个名为ry-vue的数据库

数据库名称中有‘-’符号,需要用反引号`,是键盘上tab键上面一个键的符号
create database `ry-vue`;
file
file

将之前下载好的项目文件夹中的sql文件夹里的两个数据表上传到服务器中,我们可以继续将这两个文件放在之前在服务器根目录下创建好的project目录里面

file
file

然后登录进入mysql数据库,使用刚才创建ry-vue数据库,导入两个数据表进入ry-vue数据库中:

use ry-vue;
source /project/quartz.sql;
source /project/ry_20210908.sql;

(4) 修改项目中ruoyi-admin中的三个文件,如下:

file

在application.yml中,修改redis的信息,分别为host地址(你的服务器ip),port端口号(你的redis开放的端口号,一般为6379),password密码(你的redis的密码)。

file

在application-druid.yml中,修改mysql的信息,url的中间填写访问mysql的 ip:端口号,例如:198.172.1.1:3306;username填你的mysql用户名;password填你的mysql密码。

file

在logback.xml中,找到日志存放路径,value修改为你存放日志的目录,可以在之前创建的project文件夹中建一个logs文件夹,则填为value=”/project/logs“

file

自此,该修改的已经修改完了。

(5)尝试运行后端项目

可以通过InteliJ IDEA或者eclipse软件来运行这个java后端项目,前提是你运行的本机上应该也具备一定的环境,jdk>=1.8,以及本地8080端口(用于后端)已开启且未被占用。其他的例如mysql,redis可以直接通过服务器ip+端口号远程访问,不需要在本机上配置。

出现如下表示启动成功,可以开始打包后端代码。如果未成功也不用灰心,检查报错,是否关于mysql,redis的(如果是,则可能是这两个没有在你的服务器上配置好或者刚才修改的信息出错了,例如账号,密码不对,或者远程连接未成功,导致本机无法远程访问等等),如果是关于8080端口,可能是由于你本机有程序以及占用了8080端口,这个基本上就不是什么问题,部署到服务器后只要服务器8080端口可用就行。接下来可以直接打包代码。

file

(6)打包后端代码jar包

熟练使用java的人可以直接通过InteliJ IDEA或者eclipse软件打jar包。不熟悉的有第二种方法,是若依提供的。进入下载的项目文件夹中的bin目录下,直接双击执行package.bat,它会直接在项目中生成target文件夹,里面包含以及打包好的jar包。我们要使用的是ruoyi-admin文件夹下的target里的jar包。运行package.bat需要marven环境>=3.0,自行参考网上方法按照。如下图操作顺序:

file
file
file
file
file

将这个ruoyi-admin.jar包上传至服务器,可继续存于刚才建的project目录中。

6.后端部署

(1)再此修改nginx配置文件(nginx.conf),添加后端信息。proxy_pass中空余的部分填服务器ip地址,别忘了上面是location /prod-api/。修改后别忘了重启nginx服务,用上面刚才提到的命令。

file

修改未prod-api是由于前端发送请求的时候就是通过这个接口来发送的

file

nginx配置文件nginx.conf的整体示意图(包括前端和后端配置修改的所有地方):

file
file

(2)远程连接服务器,进入project目录,后台启动jar包:

nohup java -jar ruoyi-admin.jar &

7.成功部署效果

用浏览器访问”ip:前端端口号“:

输入验证码登录后成功进入后台:

file

本文转自:https://blog.csdn.net/weixin_44248258/article/details/124213606

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容