Linux下部署前后端分离项目 —

1 打包前后端项目

1.1 打包Vue项目

# 构建生产环境包
npm run build:prod

注意：我这边使用的命令是 npm run build:pro，一般都是 npm run build:prod，具体看前端package.json文件中是如何配置的，如下：

1.2 后端打包

使用 maven 工具进行打包，先清理（双击 clean）再打包（双击 install），如下：

打包完成后，再需要部署模块的 target 目录下找到相关 jar

2 Linux下安装nginx

2.1 下载安装包

下载地址：nginx: download

这里选择下载的版本为：nginx-1.20.0，如下图：

将下载后的压缩包上传至linux 服务器，如下图：

2.2 解压安装包并移动nginx

# 解压安装包
tar xzf nginx-1.20.2.tar.gz
# 将安装包移动至 /usr/local/nginx
mv nginx-1.20.2 /usr/local/nginx

2.3 编译安装nginx

2.3.1 配置nginx

# 进入nginx目录
cd /usr/local/nginx
# 配置nginx。其中，./configure：代表配置编译选项，--prefix：指定安装目录
./configure --prefix=/usr/local/nginx

运行 ./configure --prefix=/usr/local/nginx 可能会出现以下错误：

如上图，缺少 gcc 依赖，安装 gcc，命令如下：

# 安装 gcc 依赖
yum -y install gcc

gcc 依赖安装完，重新执行 ./configure --prefix=/usr/local/nginx 。可能会提示以下错误：

如上图，缺少 pcre 依赖，安装 pcre，命令如下：

yum install -y pcre pcre-devel

pcre 依赖安装完，重新执行 ./configure --prefix=/usr/local/nginx 。可能会提示以下错误：

如上图，缺少 zlib 依赖，安装 zlib，命令如下：

yum install -y zlib zlib-devel

zlib 依赖安装完，重新执行 ./configure --prefix=/usr/local/nginx 。配置nginx执行成功，提示如下：

2.3.2 构建&安装nginx

1. configure成功，使用 make 命令，编译nginx，出现如下图，说明编译成功

2. make成功，使用 make install /usr/local/nginx/ 命令，安装nginx，出现如下图，说明编译成功

2.4 启动nginx

# 进入 nginx 的 sbin 目录
cd /usr/local/nginx/sbin/
# 启动nginx
./nginx# 如果 /usr/local/nginx/ 目录下没有日志文件夹，nginx启动会报错
# nginx下创建日志文件夹，并赋予权限
cd ..
mkdir logs
chmod 700 logs # 只有拥有者有读、写、执行权限。

重启 nginx ，如下：

nginx 常用命令，如下：

（1）启动：./nginx -c /usr/local/nginx/conf/nginx.conf

（2）快速停止：./nginx -s stop

（3）优雅关闭，在退出前完成已经接受的连接请求：./nginx -s quit

（4）重新加载配置：./nginx -s reload

2.5 验证nginx是否启动成功

浏览器输入服务地址，出现以下页面，说明启动成功：

2.6 设置nginx开机自启

1. 停止 nginx ，使用命令：./nginx -s stop

2. 新增脚本服务，使用命令：vi /usr/lib/systemd/system/nginx.service ，脚本内容如下：

[Unit]Description=nginx - web serverAfter=network.target remote-fs.target nss-lookup.target[Service]Type=forkingPIDFile=/usr/local/nginx/logs/nginx.pidExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.confExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.confExecReload=/usr/local/nginx/sbin/nginx -s reloadExecStop=/usr/local/nginx/sbin/nginx -s stopExecQuit=/usr/local/nginx/sbin/nginx -s quitPrivateTmp=true[Install]WantedBy=multi-user.target

使用 :wq 命令保存脚本。

3. 重新加载 systemd 的服务单元文件（/usr/lib/systemd/system/下的.service文件）

systemctl daemon-reload

4. 重启 nginx 服务

systemctl start nginx

5. 配置系统服务后，nginx 常用命令，如下

（1）启动：systemctl start nginx

（2）停止：systemctl stop nginx

（3）查询nginx运行状态：systemctl status nginx

（4）重启： systemclt restart nginx

6. 如果希望服务每次启动后，nginx 自动运行，输入以下命令：

设置 nginx 开机自启

systemctl enable nginx.service

3 部署

3.1 前端部署

将前端打包好的 dist 上传至服务器的 nginx 中的 html 目录下，如下：

3.2 后端部署

1. 这里以网关服务为例，将网关模块的相关 jar 放在一个路径下，如下图：

2. 新建启动脚本，start.sh

// 1. 新增 .sh 文件
touch start.sh
// 2. 修改 .sh 文件操作权限
chmod 777 start.sh
// 打开 start.sh 文件
vi start.sh
// 输入脚本内容// 保存并退出
:wq

脚本内容，如下：

#!/bin/bash
# 相关jar，例如：xxx.jar
JAR_NAME=xxx-gateway.jar
# jar包所在目录，例如：/root/xyd/xxx/xxx-gateway/
JAR_PATH=/root/xyd/xxx/xxx-gateway/
#您所希望jar启动的端口号，设置前请先查询是否已经被占用的情况
PORT=89# 设置日志输出文件信息
dat1=$(date +%Y-%m-%d-%H-%M)cd `dirname $0`
#使用说明，用来提示输入参数
usage() {echo "Usage: sh 执行脚本.sh [start|stop|restart|status]"exit 1
}
#检查程序是否在运行
is_exist(){pid=`ps -ef|grep -E ''$JAR_NAME'.'$PORT'|'$PORT'.*'$JAR_NAME''|grep -v grep|awk '{print $2}'`#如果不存在返回1，存在返回0if [ -z "${pid}" ]; thenreturn 1elsereturn 0fi
}#启动方法
start(){is_existif [ $? -eq "0" ]; thenecho "${JAR_NAME} is already running. pid=${pid} ."elsenohup java -Xms256m -Xmx524m -Dfastjson.parser.safeMode=true -Dfile.encoding=UTF-8 -Dserver.port=${PORT} -jar ${JAR_PATH}${JAR_NAME} > ${JAR_PATH}${dat1}.log  2>&1 &echo "${JAR_NAME} is start success"#tail -f fileserver-web.outfi
}#停止方法
stop(){is_existif [ $? -eq "0" ]; thenkill -9 $pidecho "${JAR_NAME} is  stoped"elseecho "${JAR_NAME} is not running"fi
}#输出运行状态
status(){is_existif [ $? -eq "0" ]; thenecho "${JAR_NAME} is running. Pid is ${pid}"elseecho "${JAR_NAME} is NOT running."fi
}#重启
restart(){stopstart
}#根据输入参数，选择执行对应方法，不输入则执行使用说明
case "$1" in"start")start;;"stop")stop;;"status")status;;"restart")restart;;*)usage;;                                                                                                                                                
esac

3. 启动 jar