如何将⼀个前后端分离的开源项⽬部署到⾃⼰的服务器上
⼀个开源项⽬从⽹上下载之后，想直接⽴⻢就能完美运⾏起来不太现实，毕竟还有很多东⻄要根据⾃⼰。我还是先把本⽂的实验流程写在前⾯，并且画了个思维导图，这样好知道后⾯每⼀步在⼲嘛。的实际情况进⾏配置，⽐如数据库、缓存、⽇志路径等等，都需要根据⾃⼰实际情况修改。down掉⼀个，还有其他实例可以⽀撑系统的运⾏，稳定性和性能均要更⾼⼀些。由于个⼈精⼒和能⼒有限，难免会有疏漏和不当的地⽅，还希望多多谅解。包的部
·
关于「如何将⼀个前后端分离的开源项⽬部署到⾃⼰的服务器上」这个话题很早之前我就想做了。
⼀来是因为有很多初学的⼩伙伴们反馈说需要；⽽且经常也听到⼀部分⼩伙伴反馈说⾃⼰的云服务器买
了不知道⼲啥，有什么办法可以玩起来，等等之类的话题。
我还是先把本⽂的实验流程写在前⾯，并且画了个思维导图，这样好知道后⾯每⼀步在⼲嘛。
然后我们接下来⼀项项安排即可
环境交代
部署离不开服务器节点、Linux系统和⼀系列软件环境以及基础设施，这个在之前就已经出过⽂章、⽂档
以及视频聊过了，具体可以参看该系列⽂章：
服务器软件⼤科普
⼈⼿⼀套Linux环境搭建之：macOS版本教程
⼈⼿⼀套Linux环境搭建之：Windows版本教程
这些是本⽂实战的前提。
本实验投⼊了三台Linux主机节点，安排如下：
项⽬地址：https://gitee.com/y_project/RuoYi-Vue。
直接⽤ Git 命令下载到本地某个⽬录下即可。
下载完成的代码⽬录⾥包含两个⼦⽬录，分别为前端项⽬⽬录和后端项⽬⽬录。
我这⾥在本地宿主机和三个 Linux 节点上都各下载了⼀份项⽬源码，路径分别为：
本地代码： /Users/codesheep/IdeaProjects/RuoYi-Vue
节点1代码路径： /root/workspace/RuoYi-Vue
节点2代码路径： /root/workspace/RuoYi-Vue
节点3代码路径： /root/workspace/RuoYi-Vue
本地代码是为了稍后导⼊ IDEA 中⽅便运⾏、调试和代码阅读及修改， Linux 系统节点上的三份代码待
会直接打包部署使⽤。
git clone https://gitee.com/y_project/RuoYi-Vue
⼀个开源项⽬从⽹上下载之后，想直接⽴⻢就能完美运⾏起来不太现实，毕竟还有很多东⻄要根据⾃⼰
的实际情况进⾏配置，⽐如数据库、缓存、⽇志路径等等，都需要根据⾃⼰实际情况修改。
所以我们接下来⼀⼀配置。
1、建库
⾸先我们需要新建⼀个名为 ry-vue 的数据库，出于演示考虑，这⾥直接通过软件Navicat可视化创
建：
2、建表
在上述新建的 ry-vue 的数据库⾥导⼊位于路径 /Users/codesheep/IdeaProjects/RuoYi
Vue/ruoyi/sql 下的两个 .sql ⽂件：
ry_20200415.sql
quartz.sql
3、修改yml中数据库连接配置
修改路径 /Users/codesheep/IdeaProjects/RuoYi-Vue/ruoyi/src/main/resources 下的
application-druid.yml 配置⽂件，修改其中的数据库 url 、 username 、 password 等字段为你
实际的数据库链接
修改缓存配置
由于该项⽬使⽤了 Redis 缓存，因此和上⾯的 MySQL 数据库⼀样需要根据实际情况配置。
修改路径 /Users/codesheep/IdeaProjects/RuoYi-Vue/ruoyi/src/main/resources 下的
application.yml 配置⽂件，修改其中Redis缓存的 host 、 password 等字段为你实际的Redis链
接：
修改⽇志配置
修改⽇志路径
修改路径 /Users/codesheep/IdeaProjects/RuoYi-Vue/ruoyi/src/main/resources 下的
logback.xml 配置⽂件，⾸先修改其中的⽇志存放路径为⾃⼰定义的路径
修改字符集
另外则是在每⼀对 <encoder></encoder> 中加上 UTF-8的 字符集⽀持，避免后续服务器上看⽇志时
可能出现乱码的现象
本地运⾏
打开 IntelliJ IDEA ，直接打开本地代码⽬录 RuoYi-Vue 中的 ruoyi ⽂件夹即可：
第⼀次导⼊，会⾃动下载项⽬ pom.xml 中各种所需的依赖，所以需要等待⼀段时间。
导⼊成功后，直接点击启动按钮，查看启动效果
项⽬运⾏成功，这样后续就可以对其进⾏调试和代码的研读了。
项⽬打包
前端项⽬打包
我们准备将前端项⽬部署到 Linux 节点1 上，所以进⼊Linux节点1的代码⽬录：
准备进⾏前端项⽬的打包操作。
1、安装依赖
进⼊前端项⽬⼦⽬录 ruoyi-ui ，运⾏如下命令安装前端项⽬所需依赖：
2、构建打包
因为我们要部署，所以这⾥直接打包正式环境即可：
/root/workspace/RuoYi-Vue/ruoyi-ui
npm install --unsafe-perm --registry=https://registry.npm.taobao.org
2、构建打包
因为我们要部署，所以这⾥直接打包正式环境即可：
/root/workspace/RuoYi-Vue/ruoyi-ui
npm install --unsafe-perm --registry=https://registry.npm.taobao.org
npm run build:prod
构建打包成功之后，会在根⽬录⽣成 dist ⽂件夹，⾥⾯就是构建打包好的前端项⽬⽂件：
该 dist ⽬录先留着，后⾯部署前端项⽬时，直接拿来使⽤。
后端项⽬打包
我们准备将后端项⽬部署到 Linux 节点2和节点3，以节点2为例，进⼊代码⽬录：
准备进⾏后端项⽬的打包操作。
打jar包
Spring Boot 由于⾃带 Tomcat 应⽤服务器，项⽬默认会打出可执⾏的 jar 包，⾮常⽅便。
直接在当前⽬录下执⾏ mvn package 命令即可构建打包：
该过程会延续⼀段时间，它会⾃动下载项⽬ pom.xml 中各种所需的依赖，并最终构建打包。
构建成功如图所示，并且会在当前路径下⽣成⼀个 target ⽂件夹：
进⼊ target ⽂件夹，构建并打包出来可执⾏ jar 包即位于其中，⼤⼩约六⼗⼏兆：
打war包
上⾯说了， Spring Boot 由于默认内嵌 Tomcat 容器，所以打出来的 jar 包即可直接运⾏，但是我们
有时候希望将其部署于外置的 Tomcat 服务器中，这时候就要打 war 包了。
打 war 包之前需要做⼏个代码上的配置：
1、修改 pom.xml 中的打包⽅式
修改 /root/workspace/RuoYi-Vue/ruoyi/pom.xml ⽂件，将：
修改为：
2、剔除内嵌的Tomcat
我们只需要将 Spring Boot 内置的 Tomcat 在发布时去除即可。
修改 /root/workspace/RuoYi-Vue/ruoyi/pom.xml ⽂件，在原先的配置：
下⾯加⼊如下配置即可：
<packaging>jar</packaging>
<packaging>war</packaging>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
本文档在 Github开源项目：https://github.com/hansonwang99/JavaCollection 中已收录，
有详细自学编程学习路线、面试题和面经、编程资料及系列技术文章等，资源持续更新中...<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
provided 表示该包只在编译和测试中使⽤，在发布时去除。
3、修改项⽬启动类
在 Spring Boot 中我们平常都⽤ main ⽅法启动的⽅式，都有⼀个 SpringBootApplication 的启动
类，⽐如本项⽬的启动主类⽂件：
/Users/codesheep/IdeaProjects/RuoYi
Vue/ruoyi/src/main/java/com/ruoyi/RuoYiApplication.java
⽽我们现在需要类似于 web.xml 的配置⽅式来启动 Spring 应⽤，为此，我们在 Application 类的同
级⽬录下再添加⼀个 SpringBootStartApplication 类：
其代码如下:
4、执⾏打包操作
切换到后台项⽬⽬录下：
/root/workspace/RuoYi-Vue/ruoyi
⾸先执⾏：
mvn clean
清理之前的打包结果：
然后再次执⾏ mvn package 命令即可构建打war包了，打包结果仍然位于⽣成的 target ⽬录下：
前端项⽬部署
上⽂刚刚阐述过前端项⽬的打包过程，是在 Linux 节点1上进⾏的，打包好的前端项⽬成品位于 dist
⽬录，具体路径为：
前端项⽬的部署⾮常简单，我们只需要将 dist ⽬录发布到你提前安装部署好的的 Web 服务器静态⽬录
即可。
我们这⾥选⽤的是 Nginx 这款⾼性能Web服务器，接下来我们简单配置下 Nginx ，并重启⽣效。
关于Nginx等基础设施和软件的安装部署过程，之前已经专⻔写过PDF了，可参考前⽂：熬10天
夜，肝出了这个PDF版「软件安装⼿册」
我的 Nginx 安装于如下⽬录：
其配置⽂件位于⽬录：
简要配置 nginx.conf ⽂件如下所示：
/root/workspace/RuoYi-Vue/ruoyi-ui/dist
/usr/local/nginx
/usr/local/nginx/conf/nginx.conf
简要配置 nginx.conf ⽂件如下所示
{
user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local]
"$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /root/workspace/RuoYi-Vue/ruoyi-ui/dist;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on
127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME
/scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based
configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
此处对原始 nginx.conf ⽂件只做了两处改动：
1、配置 user root
2、配置 location /
location / {
root /root/workspace/RuoYi-Vue/ruoyi-ui/dist;
index index.html index.htm;
}
⽬的很简单，⼀眼就能看明⽩。
接下来执⾏如下命令重新加载 Nginx 即可⽣效：
/usr/local/nginx/sbin/nginx -s reload
然后打开浏览器，输⼊节点1的IP： 192.168.31.100 即可访问⽹站前端⻚⾯：
⾄此前端部署结束，接下来进⾏后端项⽬的部署
后端项⽬部署
JAR包部署⽅式
jar 包部署⽅式⾮常简单，⼏乎只需要⼀⾏命令即可搞定，因为 Spring Boot 内嵌 Tomcat ，开箱即
⽤的感觉真的很爽。
上⽂阐述过后端项⽬的打 jar 包的过程，是在 Linux 节点2上进⾏的，打包好的后端项⽬ jar 包成品
位于 target ⽬录，具体路径为：
我们只需要进⼊ target ⽬录中执⾏如下命令即可在后台部署项⽬：
WAR包部署⽅式
war包部署⽅式就需要额外安装Tomcat应⽤服务器，我这⾥的Tomcat安装于如下⽬录：
/root/workspace/RuoYi-Vue/ruoyi/target/ruoyi.jar
nohup java -jar ruoyi.jar &
WAR包部署⽅式
war包部署⽅式就需要额外安装Tomcat应⽤服务器，我这⾥的Tomcat安装于如下⽬录：
/usr/local/tomcat/apache-tomcat-8.5.55
war 包的部署⽅式也⾮常简单，我们只需要将上⽂后端项⽬打包好的 war 包直接放⼊ Tomcat 的
webapps ⽬录即可。
上⽂阐述过后端项⽬的打 war 包的过程，是在 Linux 节点2上进⾏的，打包好的后端项⽬ war 包成品
位于 target ⽬录，具体路径为：
/root/workspace/RuoYi-Vue/ruoyi/target/ruoyi.war
这⾥我们直接使⽤ cp 命令拷⻉⼀份到 Tomcat 的 webapps ⽬录⾥即可：
cp /root/workspace/RuoYi-Vue/ruoyi/target/ruoyi.war
/usr/local/tomcat/apache-tomcat-8.5.55/webapps/
这时候后端理论上就部署完毕，可以访问了，只不过现在还需要加项⽬名进⾏访问，就像这样：
http://192.168.31.101:8080/ruoyi/
很明显这样有点不⽅便。
所以我们接下来设置去掉项⽬名，直接根⽬录访问。
我们只需要修改⼀下 Tomcat 的配置⽂件 server.xml ：
/usr/local/tomcat/apache-tomcat-8.5.55/conf/server.xml
在其 <Host> 标签下⾯加⼊如下内容即可：
<Context path="/" docBase="/usr/local/tomcat/apache-tomcat-
8.5.55/webapps/ruoyi" reloadable="false"></Context>
最后重启 Tomcat 即可⽣效：
service tomcat stop
service tomcat start
配置NGINX代理和转发
接下来我们继续配置节点1上的 Nginx ，在其配置⽂件中加上如下配置：
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;
proxy_pass http://192.168.31.101:8080/;
}
可以看出来，我们的⽬的是想将所有发往节点1上的 /prod-api/ 请求，全部转发到节点2上部署的后端
项⽬⾥。
⾄于为什么这⾥配基础转发路径 /prod-api/ ，这个需要看⼀下前端项⽬根⽬录⾥的隐藏⽂
件 .env.production 就明⽩了：
其内容如下：
# ⽣产环境配置
ENV = 'production'
# ⽣产环境
VUE_APP_BASE_API = '/prod-api'
这就是需要设置的基础转发路径。
然后接下来执⾏如下命令重新加载 Nginx 即可⽣效：
/usr/local/nginx/sbin/nginx -s reload
然后打开浏览器，访问节点1的IP： 192.168.31.100 ，即可正常登录，进⼊项⽬的后台系统：
⾄此所有的部署全部结束！
后台项⽬多实例部署
对于上⾯的部署，我们对后台项⽬只部署了⼀个运⾏实例，位于节点2上。
但实际情况我们处于提升性能或稳定性等考虑，我们希望对后台项⽬在多个节点上部署多实例，所以接
下来简要演示⼀下。
正好我们还准备了⼀个节点3机器，重复上⽂的后端项⽬部署过程，在节点3上也将后端项⽬给同样地运
⾏起来。
然后我们继续配置节点1上的 Nginx ，在其配置⽂件中做如下配置：
upstream ruoyi{
server 192.168.31.101:8080 weight=5;
server 192.168.31.102:8080 weight=3;
}
server {
# ... 省略 ...
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;
proxy_pass http://ruoyi/;
}
# ... 省略 ...
}
⾸先我们配置了⼀个名为 ruoyi 的服务器集群地址，其包含两个实例（分别对应节点2和节点3），并
且分配了不同的权重 weight （理论上来说权重 weight 越⼤，对应 Tomcat 上分配到的请求也会越
多）.
同时将 location /prod-api/ ⾥的代理转发路径指向了 ruoyi 多实例集群，这样当我们访问前端
时， Nginx 会⾃动将我们的请求转发到两个实例中的任何⼀个中去处理。
这样即使后端实例down掉⼀个，还有其他实例可以⽀撑系统的运⾏，稳定性和性能均要更⾼⼀些。
由于个⼈精⼒和能⼒有限，难免会有疏漏和不当的地⽅，还希望多多谅解。
DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)