前后端分离项目传统部署方式脚本化

一 说明

针对一些个人的或者小的前后端分离项目，并不需要通过微服务部署，如果也不考虑使用docker方式部署的话，可以考虑传统方式脚本化一键部署。

此处项目的情况：

• 前端项目：vue项目
• 后端项目：SpringBoot单体项目
• 服务器版本：Ubuntu 22.04.1 LTS

此文章不包含后端项目依赖的数据库、缓存等其他组件的部署。

二 服务器依赖包安装并添加系统服务

Nginx 与 OpenJDK8 安装

sudo apt install nginx

# /etc/nginx/nginx.conf 注释掉以下这行
        include /etc/nginx/conf.d/*.conf;
        # include /etc/nginx/sites-enabled/*;

# 添加 /etc/nginx/conf.d/main.conf 配置如下
server {
    listen       80;
    server_name  _;

    location /api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $host;
        proxy_pass http://localhost:8080/;
    }

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

# 安装OpenJDK8
sudo apt install openjdk-8-jdk

后端项目添加系统服务 /etc/systemd/system/xxx-service.service

[Unit]
Description=Xxx Service

[Service]
User=root
# The configuration file application.properties should be here:
#修改为你的工作目录
WorkingDirectory=/data/xxx-service
#要执行程序的路径
#调用jar文件的shell执行文件
ExecStart=/data/xxx-service/start.sh
SuccessExitStatus=143
TimeoutStopSec=10
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

启动脚本 /data/xxx-service/start.sh，启动脚本指定使用prod环境配置，并且指定application-prod.yml配置文件

#!/bin/bash

java -jar -Dspring.profiles.active=prod /data/xxx-service/xxx-service-1.0-SNAPSHOT.jar --spring.config.location=/data/xxx-service/application-prod.yml

设置服务开机自启

systemctl daemon-reload
systemctl enable xxx-service

编写前后端一键发布脚本

前端一键发布脚本 web-publish.sh 如下：

#!/usr/bin/env bash

# 一键部署脚本
# 说明：部署前先配置好ssh的证书登录
set -e

FILENAME=dist.tar.gz
LOCAL_DIR=./dist
REMOTE_DIR=/usr/share/nginx/html
BACKUP_DIR=/data/xxx-service/backup
REMOTE_IP=192.168.0.100 # 替换为你要发布的服务器的IP地址

# 1. 打包构建
echo ============= 打包构建 ================
npm run build --loglevel error
sed -i "" "s#http://localhost:8080#http://${REMOTE_IP}/api#g" dist/conf.js
tar -czf ${FILENAME} -C ${LOCAL_DIR} .
# 2. 备份服务端的文件
echo ============= 备份文件 ================
TS=`date +"%Y%m%d%H%M%S"`
ssh root@${REMOTE_IP} "tar -czf ${BACKUP_DIR}/html_${TS}.tar.gz -C ${REMOTE_DIR} ."
# 3. 上传新版本的文件
echo ============= 上传文件 ================
scp ${FILENAME} root@${REMOTE_IP}:/tmp
rm ${FILENAME}
# 4. 删除旧文件并解压新文件
echo ============= 解压文件 ================
ssh root@${REMOTE_IP} "rm -rf ${REMOTE_DIR}/* && tar -zxf /tmp/${FILENAME} -C ${REMOTE_DIR}"

后端一键发布脚本 server-publish.sh

#!/usr/bin/env bash

# 一键部署脚本
# 说明：部署前先配置好ssh的证书登录
set -e

FILENAME=xxx-service-1.0-SNAPSHOT.jar
LOCAL_DIR=./xxx-service/target
REMOTE_DIR=/data/xxx-service
REMOTE_IP=192.168.0.100 # 替换成部署的机器IP

# 1. 打包构建
echo ============= 打包构建 ================
mvn clean package
# 2. 备份服务端的文件
echo ============= 备份文件 ================
TS=`date +"%Y%m%d%H%M%S"`
ssh root@${REMOTE_IP} "cp ${REMOTE_DIR}/${FILENAME} ${REMOTE_DIR}/backup/${FILENAME}_${TS}"
# 3. 上传新版本的文件
echo ============= 上传文件 ================
scp ${LOCAL_DIR}/${FILENAME} root@${REMOTE_IP}:${REMOTE_DIR}
# 4. 重启服务
echo ============= 重启服务 ================
ssh root@${REMOTE_IP} "systemctl restart xxx-service"

以上部署脚本略微调整即可适用于自己的前后端项目通过命令行一键部署。