前端一键部署网站至服务器FTP

某公司摸鱼前端2026-02-05 9:33

首先在你的项目里需要安装依赖：

复制代码

npm install ftp -D

然后在项目根目录添加脚本：

javascript 复制代码

import FTP from 'ftp';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const client = new FTP();

const config = {
    host: '你服务器的公网IP',
    port: 21,
    user: '服务器那里配置的ftp账号',
    password: '服务器那里配置的ftp密码'
};

function uploadDir(client, localDir, remoteDir) {
    return new Promise((resolve, reject) => {
        fs.readdir(localDir, { withFileTypes: true }, (err, files) => {
            if (err) return reject(err);

            let pending = files.length;
            if (pending === 0) return resolve();

            files.forEach((file) => {
                const localPath = path.join(localDir, file.name);
                const remotePath = path.posix.join(remoteDir, file.name);

                if (file.isDirectory()) {
                    client.mkdir(remotePath, true, (err) => {
                        if (err && err.code !== 550) {
                            console.log(`创建目录失败: ${remotePath}`, err.message);
                        }
                        uploadDir(client, localPath, remotePath)
                            .then(() => {
                                if (--pending === 0) resolve();
                            })
                            .catch(reject);
                    });
                } else {
                    console.log(`上传中: ${file.name}`);
                    client.put(localPath, remotePath, (err) => {
                        if (err) {
                            console.log(`❌ 上传失败: ${file.name}`, err.message);
                        } else {
                            console.log(`✓ ${file.name}`);
                        }
                        if (--pending === 0) resolve();
                    });
                }
            });
        });
    });
}

client.on('ready', () => {
    console.log('✅ 连接成功！');

    const localRoot = path.join(__dirname, 'dist');
    const remoteRoot = 'ftp文件夹下的目录名称，如果没有直接填/';

    client.mkdir(remoteRoot, true, (err) => {
        if (err && err.code !== 550) {
            console.log('创建远程目录失败:', err.message);
        }

        uploadDir(client, localRoot, remoteRoot)
            .then(() => {
                console.log('✅ 上传成功！');
                client.end();
            })
            .catch((err) => {
                console.log('❌ 上传失败:', err);
                client.end();
            });
    });
});

client.on('error', (err) => {
    console.log('❌ FTP 错误:', err);
});

client.connect(config);

然后在 package.json 中添加脚本

javascript 复制代码

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "vite build && node ftp-deploy.js" //添加这行
},

然后每次发布运行这个脚本即可