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

已于 2022-04-17 01:15:00 修改
阅读量1.5w 收藏 114
点赞数 12
分类专栏： 服务器 文章标签： 后端 前端 服务器
于 2022-04-17 00:57:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44248258/article/details/124213606
版权

       第一次在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到本地并解压:
在这里插入图片描述
在这个项目中，ruoyi-ui文件夹是前端项目，其余为后端项目，我们接下来需要分开打包部署。
在这里插入图片描述

3.远程连接服务器

通过xshell或者FinalShell远程连接服务器，连接指令：

ssh user@ip

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

ssh root@172.12.134.12

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

4.前端部署

（1）首先将项目中ruoyi-ui这个文件夹上传至服务器，可以用FinalShell的文件管理功能，也可以用服务器管理的上传文件功能，例如宝塔界面里的文件管理：
在这里插入图片描述

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

cd /
mkdir project

在这里插入图片描述
（2）依次输入如下命令，进入ruoyi-ui文件夹，并对前端代码进行打包,生成一个dist文件夹，这就是前端代码打包后的文件：

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

在这里插入图片描述

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

find / -name 'nginx.conf'

在这里插入图片描述
用vim编辑器打开nginx.conf，修改配置。修改的几个地方，最好图中的信息都一样，红色框框圈出来的是容易忽略的地方如下：

  1. 修改为root用户在这里插入图片描述

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

  3. 找到这些内容并将root 后跟的路径修改为刚才前端代码打包的dist文件夹的路径，保存后退出。如果仍不清楚改哪里，可以翻倒博客最后面的部分，有两张nginx.conf的整体示意图。
    在这里插入图片描述 5. 由于上述前端使用的是9000端口（也可以换为你自己想要的端口，例如80端口），因此要在防火墙中也打开这个端口，外界才可以访问。于此同时，后端也需要一个8080端口，因此也要将其打开，后续部署后端服务要用到。注意有时候可能你想用的端口已经被其他进程占用，可以尝试找到该进程并将其kill掉或者重新开另一个端口号，具体方法不在此赘述，可上网查询。

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

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

在这里插入图片描述

  1. 端口配置好了后，每次修改了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

在这里插入图片描述

  1. 浏览器输入“ip:9000“，例如：198.172.1.1:9000，如果出现出现如下画面，则表示前端启动成功。否则则需要仔细检查两个地方，一个是nginx的配置信息，一个是端口是否真的被完全打开：
    在这里插入图片描述

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`;

在这里插入图片描述
在这里插入图片描述
将之前下载好的项目文件夹中的sql文件夹里的两个数据表上传到服务器中，我们可以继续将这两个文件放在之前在服务器根目录下创建好的project目录里面
在这里插入图片描述
在这里插入图片描述
然后登录进入mysql数据库，使用刚才创建ry-vue数据库，导入两个数据表进入ry-vue数据库中：

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

(4) 修改项目中ruoyi-admin中的三个文件，如下：
在这里插入图片描述
在application.yml中，修改redis的信息，分别为host地址（你的服务器ip），port端口号（你的redis开放的端口号，一般为6379），password密码（你的redis的密码）。
在这里插入图片描述
在application-druid.yml中，修改mysql的信息，url的中间填写访问mysql的 ip:端口号，例如：198.172.1.1:3306；username填你的mysql用户名；password填你的mysql密码。
在这里插入图片描述
在logback.xml中，找到日志存放路径，value修改为你存放日志的目录，可以在之前创建的project文件夹中建一个logs文件夹，则填为value=”/project/logs“
在这里插入图片描述
自此，该修改的已经修改完了。

（5）尝试运行后端项目
       可以通过InteliJ IDEA或者eclipse软件来运行这个java后端项目，前提是你运行的本机上应该也具备一定的环境，jdk>=1.8，以及本地8080端口（用于后端）已开启且未被占用。其他的例如mysql，redis可以直接通过服务器ip+端口号远程访问，不需要在本机上配置。
       出现如下表示启动成功，可以开始打包后端代码。如果未成功也不用灰心，检查报错，是否关于mysql，redis的（如果是，则可能是这两个没有在你的服务器上配置好或者刚才修改的信息出错了，例如账号，密码不对，或者远程连接未成功，导致本机无法远程访问等等），如果是关于8080端口，可能是由于你本机有程序以及占用了8080端口，这个基本上就不是什么问题，部署到服务器后只要服务器8080端口可用就行。接下来可以直接打包代码。
在这里插入图片描述
（6）打包后端代码jar包
       熟练使用java的人可以直接通过InteliJ IDEA或者eclipse软件打jar包。不熟悉的有第二种方法，是若依提供的。进入下载的项目文件夹中的bin目录下，直接双击执行package.bat，它会直接在项目中生成target文件夹，里面包含以及打包好的jar包。我们要使用的是ruoyi-admin文件夹下的target里的jar包。运行package.bat需要marven环境>=3.0，自行参考网上方法按照。如下图操作顺序：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将这个ruoyi-admin.jar包上传至服务器，可继续存于刚才建的project目录中。

6.后端部署

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

在这里插入图片描述

修改未prod-api是由于前端发送请求的时候就是通过这个接口来发送的
在这里插入图片描述
nginx配置文件nginx.conf的整体示意图（包括前端和后端配置修改的所有地方）：
在这里插入图片描述
在这里插入图片描述
（2）远程连接服务器，进入project目录，后台启动jar包：

nohup java -jar ruoyi-admin.jar &

7.成功部署效果

用浏览器访问”ip:前端端口号“：
在这里插入图片描述
输入验证码登录后成功进入后台：
在这里插入图片描述

Karthus_冲冲冲
关注
专栏目录
若依（ruoyi）前后端分离版使用教程之若依前端部署阿里云服务器步骤（超详细）
蓝多多的小仓库
03-26 1771
1、前后端部署所需环境准备（2）在本机安装远程连接工具xshell和xftp，并修改服务器操作系统的镜像源（3）在服务器上安装jdk及tomcat（4）在服务器上安装Mysql（5）在服务器上安装nodejs和redis（6）在服务器上安装Nginx（7）下载若依前后端分离版。
若依学习笔记（三）
huilang041的博客
07-20 593
开放所需端口（本人是直接全部开放，不推荐！（后续大部分工作使用远程连接进行操作）
若依前后端分离项目部署文档.docx
09-09
把自己个人网站的服务器部署像流水账这样写一遍也还是很有收获的，那就是很好的找出了自己不懂地方(苦笑)，那些说不清楚的地方其实就是还没有真正弄懂的地方。因为部署服务器涉及的东西太多太杂，一时半会想弄清也不现实，坑多慢慢填呀。。。
若依分离版本部署流程—开启HTTPS访问。
最新发布
maohe的博客
07-31 1884
若依管理系统前后端分离版本部署流程，开启域名HTTPS访问。
若依前后端分离项目部署文档（完整版）
04-07
第一部分：部署linux + nginx 第二部分：部署Windows+tomcat 第三部分：调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。 （ruoyi平台简介： 若依是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。 前端采用Vue、Element UI。 后端采用Spring Boot、Spring Security、Redis & Jwt。 权限认证使用Jwt，支持多终端认证系统。 支持加载动态权限菜单，多方式轻松权限控制。 高效率开发，使用代码生成器可以一键生成前后端代码。）
前后端分离项目部署（若依）
Max_000007的博客
11-04 3965
这通常在开发和测试环境中比较常见，因为在这些环境下，对数据传输的安全性要求可能较低，而且SSL加密会增加一些额外的性能开销。在这种情况下，如果数据库服务器不要求强制的SSL连接，你可以将useSSL参数设置为false来简化连接配置。SSL是一种用于在计算机网络上提供安全通信的协议，它可以确保在客户端和服务器之间传输的数据在传输过程中是加密的，从而提供了一定程度的安全性。但是，在生产环境中，特别是涉及到敏感数据的应用，强烈建议使用SSL加密来保护数据的传输安全性。关闭selinux、防火墙。
若依前后端分离版部署
qq_48049033的博客
07-02 5222
若依部署
【若依】框架：第01讲前后端分离项目
萧篱衣的博客
07-11 4785
本身是一个优秀的简单的后台管理系统框架,前端(Vue,ElementUI),后端(Spring Boot、Spring Security、Redis & Jwt),本身可以直接拉下来直接使用.它的强大之处在于代码自动生成器的使用,可以根据数据库的表对应生成全套前后端代码,代码植入后可以直接使用,复杂业务只需在基础代码上进行修改增强即可，减少了重复代码的编写,提高了开发效率。...
JAVA著名免费框架若依前后端分离项目详细部署文档
08-21
《JAVA著名免费框架若依前后端分离项目详细部署文档》 若依框架是一款全面开源的快速开发平台，致力于提供高效便捷的开发体验。其特点包括前端采用Vue.js和Element UI，后端则基于Spring Boot、Spring Security、...
阿里云服务器部署前后端分离项目跨域,前后端分离项目，如何解决跨域问题？...
weixin_39878745的博客
08-12 797
跨域资源共享(CORS)是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。什么是跨域问题CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问...
若依前后端分离项目部署
xx1132856201的博客
06-24 1339
前端vue打dist，后端打jar包，并用nginx代理。设置vue.config.js的devServer.proxy.target 进入ruoyi-ui文件夹 生成dist文件夹打开application.yml确认后端端口 使用maven打包 生成target文件夹 target文件夹下的ruoyi-admin.jar就是后端打包文件了编辑nginx.conf如下 最后启动nginx就可以了......
若依前后端分离版本部署
peter__xu的博客
12-13 9714
若依前后端分离版本，Windows下使用Nginx代理的方式进行部署(全流程，图文教程) 场景 若依官网: RuoYi 前提： 服务器上安装Mysql，并将数据库导入，在SpringBoot中的application-druid.yml配置mysql数据库连接。 服务器安装Redis服务端，并在application.yml中配置连接。 具体可以参照： Windows中Redis的下载安装与修改密码并启动_BADAO_LIUMANG_QIZHI的博客-CSDN博客 注： 博客：BADA.
【若依】前后端分离框架部署
NaturalHarmonia的博客
01-23 1119
(自用) 若依部署过程
若依前后端分离版本项目部署
qq_49456228的博客
06-07 1645
前后端分离版本下载，官网地址:https://gitee.com/y_project/RuoYi-Vue官方的版本有很多，可以依据需要自由选择。下载：下载完成后解压，导入开发工具，我这里用的是sts，跟eclipse差不多File–>importExisting Maven Projects–>Next选择项目导入完成如图，更改为自己电脑上的数据库信息接下来导入数据库文件，新建数据库ry-vue，在我们最开始下载好的项目解压后有一个sql文件夹，里面有两个sql脚本，把它们分别在这个新建好的数据库里运行，如
项目部署（若依前后端分离版）
weixin_51190886的博客
07-30 3623
本文章基于若依（前后端分离版），在虚拟机中部署。
若依项目的介绍（前后端分离版本）
快乐学习
08-19 6160
若依是一个开源免费的项目。现在比较流行的是前后端分离的开发模式，所以来介绍里面前后端分离版本的若依这个项目的结构。可以在这个项目的基础上面进行二次开发，是一个很不错的项目 RuoYi-Vue是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
若依前后端分离版部署到服务器Nginx（Windows版）
s_156的博客
05-24 2459
的vue.config.js文件，检查devServer下的proxy代理部分，然后将下面这个端口修改为你要在打包后访问的端口，即使用nginx代理前的接口。然后下面的server_name是你服务器的ip,这里即使是使用的本地也建议不要用localhost，避免修改hosts文件导致的问题。打开右侧的Maven，点击：生命周期->package，然后点击运行，等待打包成功，包在如图所示的文件夹中。首先这里的listen下的端口就是代理前的接口，要与前面前端项目的vue.config.js中的端口一致。
RuoYi若依前后端分离版war包部署
weixin_48455733的博客
02-28 7851
一、前言 若依官网：http://ruoyi.vip 代码下载：https://gitee.com/y_project/RuoYi-Vue 若依分离版使用的版本是V3.7.0 版本如下： JDK >= 1.8 (推荐1.8版本) Mysql >= 5.7.0 (推荐5.7版本) Redis >= 3.0 Nginx = 1.18 RuoYi = 3.7.0 Linux = CentOS Linux release 7.9.2009 (Core) 本次使用的是虚拟机安装的Li
云服务器Docker部署Vue+SpringBoot前后端分离项目详细教程
07-16
当然，我可以为您提供一个详细教程来帮助您部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。 首先，确保您已经完成以下准备工作： - 注册一个云服务提供商的账号，并创建一个云服务器实例。 - 在本地环境中安装了Docker，并熟悉Docker的基本操作。 - 本地已经安装了Node.js和npm，以及Vue CLI和Java开发环境。 以下是详细的步骤： 1. 登录到云服务器： 使用SSH工具连接到您的云服务器。例如，使用命令行工具执行以下命令： ``` ssh username@server_ip_address ``` 2. 安装Docker： 根据您的云服务器的操作系统，选择对应的安装方式进行Docker安装。以下是一些常见操作系统的安装命令： - Ubuntu: ``` sudo apt-get update sudo apt-get install docker.io ``` - CentOS: ``` sudo yum update sudo yum install docker ``` 3. 验证Docker安装是否成功： 执行以下命令来验证Docker是否已经成功安装： ``` docker version ``` 4. 构建Vue项目： 在本地开发环境中，使用Vue CLI创建Vue项目，并进行开发和测试。确保项目可以正常运行。 ``` vue create myproject cd myproject npm run serve ``` 5. 打包Vue项目： 在Vue项目根目录下执行以下命令，将Vue项目打包成静态文件。 ``` npm run build ``` 6. 创建SpringBoot项目： 使用Spring Initializr创建SpringBoot项目，并进行开发和测试。确保项目可以正常运行。 - 访问Spring Initializr网站：https://start.spring.io/ - 选择项目的基本设置，如使用的编程语言、构建工具、Spring Boot版本等。 - 添加所需的依赖项，如Spring Web、Spring Data JPA等。 - 点击"Generate"按钮下载生成的SpringBoot项目压缩包。 - 解压缩项目压缩包，并使用您喜欢的集成开发环境（IDE）打开项目。 7. 创建Dockerfile： 在SpringBoot项目的根目录下创建一个名为`Dockerfile`的文件，用于定义Docker镜像的构建步骤。在`Dockerfile`中添加以下内容： ``` FROM openjdk:8-jdk-alpine VOLUME /tmp ADD target/myproject.jar app.jar ENTRYPOINT ["java", "-jar", "/app.jar"] ``` 8. 构建Docker镜像： 在SpringBoot项目的根目录下执行以下命令，构建Docker镜像： ``` docker build -t myproject . ``` 9. 运行Docker容器： 执行以下命令，在Docker中运行SpringBoot项目的Docker容器： ``` docker run -d -p 80:8080 myproject ``` 10. 访问应用： 使用浏览器访问您的云服务器的公网IP地址，即可查看部署好的前后端分离项目。 希望这个详细教程能够帮助您成功部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。如果您有任何问题，请随时提问！
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值