如何简单通过ftp直接推送到服务器部署vite项目？

皮卡皮不皮
35 阅读3分钟

如何简单通过ftp直接推送到服务器部署vite项目？

思考

已知gitbash类似于linux的命令窗口，他可以运行sh脚本，

且内置ssh，可以进行sftp文件推送

那么我们可以在项目中新建一个 deploy.sh 脚本，然后通过gitbash 去执行它

预备动作

  • 服务器的Ip
  • ssh的账号密码
  • 传送到服务器的位置

开始

你可以在项目下创建一个 scripts/deploy.sh 脚本，然后编写以下内容

# 定义变量
REMOTE_USER="ssh用户名"
REMOTE_HOST="服务器公网ip"
REMOTE_PORT=22   #ssh端口 默认22

# 这里以 1panel的网站默认目录为例子
REMOTE_DIR="/opt/1panel/apps/openresty/openresty/www/sites/myweb/index"

# 定义项目目录
PROJECT_DIR=$(dirname $(pwd))

# 定义打包后的输出目录   这里指向的是后面 npm run build 打包后的文件路径
BUILD_DIR="$PROJECT_DIR/dist"

# 定义压缩包名称
ARCHIVE_NAME="zip.tar.gz"

# 进入项目目录
cd $PROJECT_DIR

# 安装依赖
echo "正在安装项目依赖..."
pnpm install

# 打包项目  这里就是执行打包命令
echo "正在打包 Vite 项目"
pnpm run build

# 检查打包是否成功
if [ $? -ne 0 ]; then
    echo "打包失败，脚本终止。"
    exit 1
fi


# 进入dist目录并压缩文件
echo "正在压缩打包后的文件..."
cd $BUILD_DIR   # 进入到dist目录下 
tar -zcf ../ARCHIVE_NAME ./*  # 将dist的内容压缩

# 检查压缩是否成功
if [ $? -ne 0 ]; then
    echo "压缩失败，脚本终止。"
    exit 1
fi

# 返回项目目录
cd ..


# 上传压缩包到远程服务器 如果端口默认是22 可以省略 -P $REMOTE_PORT 
# scp -P 端口 文件名 ftp用户名@服务器地址:服务器目录
echo "正在上传压缩包到远程服务器..."
scp -P $REMOTE_PORT $ARCHIVE_NAME $REMOTE_USER@$REMOTE_HOST:$REMOTE_DIR

# 检查上传是否成功
if [ $? -eq 0 ]; then
    echo "上传成功！正在解压文件..."
    # 通过SSH连接服务器并执行解压命令
    ssh -p $REMOTE_PORT $REMOTE_USER@$REMOTE_HOST "cd $REMOTE_DIR && tar -xzf $ARCHIVE_NAME && rm $ARCHIVE_NAME"
    if [ $? -eq 0 ]; then
        echo "部署完成！文件已成功解压到远程服务器。"
    else
        echo "解压失败，请手动检查服务器。"
    fi
else
    echo "上传失败，请检查网络连接和服务器配置。"
fi

# 删除本地压缩包
rm $ARCHIVE_NAME

关于脚本的内容，我简要的注释在了上面的文件中，有些不懂的大家也可以自己问ai

使用方式

打开脚本目录，

image-20250125172214476

直接输入 ./deploy.sh 就可以执行了

image-20250125172258538

整合多环境

至此我们已经完成了一个项目的打包上传到服务器了

那么如果说我有多个环境呢，如何抽离开呢，下面给大家提供了一个例子

首先额外多了一个 scripts/deploy-config.sh 文件

#!/bin/bash

# 基础配置
REMOTE_USER="ssh用户名"
REMOTE_HOST="服务器公网ip"
REMOTE_PORT=22   #ssh端口 默认22

# 测试环境配置
TEST_REMOTE_DIR="/opt/1panel/apps/openresty/openresty/www/sites/my_test/index" # 测试环境目录
TEST_BUILD_COMMAND="build:test"  # 这个脚本自己去package.json定义，结合 .env来区分打包环境
TEST_ENV_NAME="测试环境"

# 生产环境配置
PROD_REMOTE_DIR="/opt/1panel/apps/openresty/openresty/www/sites/my/index"  # 请替换为实际的生产环境目录
PROD_BUILD_COMMAND="build:prod"
PROD_ENV_NAME="生产环境"

修改 scripts/deploy.sh

#!/bin/bash


# 检查部署环境参数
if [ "$1" != "test" ] && [ "$1" != "prod" ]; then
    echo "请指定部署环境: test 或 prod"
    echo "使用方法: ./deploy.sh test|prod"
    exit 1
fi


# 导入配置
source $(dirname "$0")/deploy-config.sh

# 根据环境参数设置变量
if [ "$1" == "test" ]; then
    REMOTE_DIR=$TEST_REMOTE_DIR
    BUILD_COMMAND=$TEST_BUILD_COMMAND
    ENV_NAME=$TEST_ENV_NAME
else
    REMOTE_DIR=$PROD_REMOTE_DIR
    BUILD_COMMAND=$PROD_BUILD_COMMAND
    ENV_NAME=$PROD_ENV_NAME
fi

# 定义项目目录
PROJECT_DIR=$(dirname $(pwd))

# 定义打包后的输出目录
BUILD_DIR="$PROJECT_DIR/dist"

# 定义压缩包名称
ARCHIVE_NAME="dist.tar.gz"

# 进入项目目录
cd $PROJECT_DIR


# 安装依赖
echo "正在安装项目依赖..."
pnpm install

# 打包项目
echo "正在打包 Vite 项目到${ENV_NAME}..."
pnpm run $BUILD_COMMAND

# 检查打包是否成功
if [ $? -ne 0 ]; then
    echo "打包失败，脚本终止。"
    exit 1
fi

# 进入dist目录并压缩文件
echo "正在压缩打包后的文件..."
cd $BUILD_DIR
tar -zcf ../$ARCHIVE_NAME ./*

# 检查压缩是否成功
if [ $? -ne 0 ]; then
    echo "压缩失败，脚本终止。"
    exit 1
fi

# 返回项目目录
cd ..

# 上传压缩包到远程服务器
echo "正在上传压缩包到远程服务器..."
scp -P $REMOTE_PORT $ARCHIVE_NAME $REMOTE_USER@$REMOTE_HOST:$REMOTE_DIR

# 检查上传是否成功
if [ $? -eq 0 ]; then
    echo "上传成功！正在解压文件..."
    # 通过SSH连接服务器并执行解压命令
    ssh -p $REMOTE_PORT $REMOTE_USER@$REMOTE_HOST "cd $REMOTE_DIR && tar -xzf $ARCHIVE_NAME && rm $ARCHIVE_NAME"
    if [ $? -eq 0 ]; then
        echo "部署完成！文件已成功解压到远程服务器。"
    else
        echo "解压失败，请手动检查服务器。"
    fi
else
    echo "上传失败，请检查网络连接和服务器配置。"
fi

# 删除本地压缩包
rm $ARCHIVE_NAME

已知gitbash类似于linux的命令窗口，他可以运行sh脚本，且内置ssh，可以进行sftp文件推送 那么我们可以在项目中新建一个 deploy.sh 脚本，然后通过gitbash 去执行它

avatar
文章
阅读
粉丝