前端不同场景下的自动化部署方式

于 2022-12-08 23:17:05 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： javascript 文章标签： 前端 自动化 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44019370/article/details/128245352
版权

前端自动化部署，简单来说就是打包完成后自动发布服务器的过程，简单搜集一下不同的部署方式供大家参考：

一、scp2

适用情况：webpack、vite项目，本地打包应用

1、本地打包生成dist文件目录

npm run build

2、执行上传脚本 参考

// deploy/index.js
const scpClient = require('scp2')
const chalk = require('chalk')
var Client = require('ssh2').Client
const ora = require('ora')
const path = require('path')
const server = require('./deploy.config.js')
const source_path = path.resolve() + '/dist'
const spinner = ora('正在发布到测试服务器...')

spinner.start()

const conn = new Client()

conn.on('ready', function () {
  conn.exec('rm -rf /www/wwwroot/***（项目放置静态地址）', function (err, stream) {
    if (err) throw err
    stream.on('close', function () {
      // 在执行shell命令后，把开始上传部署项目代码放到这里面
      scpClient.scp(source_path, {
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password,
        path: server.path, // 项目放置静态地址（服务器中地址）
      }, function (err) {
        spinner.stop()

        if (err) {
          console.log(chalk.red('发布失败.\n'))
        } else {
          console.log(chalk.green('Success! 成功发布到服务器! \n'))
        }
      })
      conn.end()
    }).on('data', function (data) {
      console.log('STDOUT: ' + data)
    }).stderr.on('data', function (data) {
      console.log('STDERR: ' + data)
    })
  })
}).connect({
  host: server.host,
  port: server.port,
  username: server.username,
  password: server.password,
})


// package.json 
{ 
    "scripts": { 
        "build:develop": "vite build --mode develop && node ./deploy/index.js",
    } 
}

二、vite-plugin-lvdeploy

适用情况：vite项目， 本地打包应用

1.安装依赖

npm i vite-plugin-lvdeploy
npm i archiver -D
npm i ssh2 -D

2.vite.config.js中引入vitePluginLvdeploy 参考

// vite.config.js
import { defineConfig } from 'vite'
import vitePluginLvdeploy from './vite-plugin-lvdeploy'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
	vue(),
	vitePluginLvdeploy({
		"dev":{
			host:'xxx.xxx.xxx.xxx',//服务器IP
			port:22,//服务器端口
			username:'xxxxxx',//服务器ssh登录用户名
			password:'xxxxxx',//服务器ssh登录密码
			serverpath:'/home/www',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目
		},
		"test":{
		  host:'xxx.xxx.xxx.xxx',//服务器IP
		  port:22,//服务器端口
		  username:'xxxxxx',//服务器ssh登录用户名
		  password:'xxxxxx',//服务器ssh登录密码
		  serverpath:'/home/www',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目
		}
		//...其他自定义环境
	  }),
	]
})

3.执行脚本

let paperFileName = null;// 接收压缩文件名称参数
let DeployConfig = null;//配置项

export default function vitePluginLvdeploy(enforce) {
  return {
    name: 'vite-plugin-lvdeploy',
    apply: 'build',
    config(userConfig, env) {
      // 当前配置 userConfig 当前环境状态 env
      paperFileName = userConfig.build.outDir;
    },
    //  构建结束的最终回调，类型 async, parallel
    closeBundle() {
      DeployConfig = enforce;
      inquiry();
    },
  };
}

import fs from "fs"
import archiver from "archiver";
// 初始化SSH连接
const ssh2 = require('ssh2');
let conn = new ssh2.Client();


function inquiry() {
  console.log(`${__dirname}/${paperFileName}.zip`)
  // 创建文件输出流
  let output = fs.createWriteStream(`${__dirname}/${paperFileName}.zip`);
  let archive = archiver('zip', {
    zlib: { level: 9 } // 设置压缩级别
  })

  // 文件输出流结束
  output.on('close', function () {
    console.log("\x1B[32m%s\x1b[0m", `
   ------------------------------------------------
                  ${archive.pointer()} 字节,已完成压缩
   ------------------------------------------------
  `);
    deleteFolder(__dirname + "/" + paperFileName);// 删除文件夹
    detectionDeploy();// 检测部署
  })

  // 数据源是否耗尽
  output.on('end', function () {
    console.log('数据源已耗尽')
  })

  // 存档警告
  archive.on('warning', function (err) {
    if (err.code === 'ENOENT') {
      console.warn('stat故障和其他非阻塞错误')
    } else {
      throw err
    }
  })

  // 存档出错
  archive.on('error', function (err) {
    throw err
  })

  // 通过管道方法将输出流存档到文件
  archive.pipe(output);

  //打包build里面的所有文件和目录
  archive.directory(paperFileName + '/', false);

  //完成归档
  archive.finalize();
}

function detectionDeploy() {
  if(Object.keys(DeployConfig).length==0){
    console.log("\x1B[33m%s\x1b[0m", '已压缩本地zip包服务器未配置无法部署');
    return;
  }
  const readline = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout,
  });
  readline.question(`?请输入希望的部署环境  ${Object.keys(DeployConfig).join(' 或 ')} (0表示不希望压缩zip和部署) \n`, environmenttxt => {
    let environment = environmenttxt.trim();//处理首位空格
    if (environment in DeployConfig) {
      if (
        DeployConfig[environment].host &&
        DeployConfig[environment].port &&
        DeployConfig[environment].username &&
        DeployConfig[environment].password &&
        DeployConfig[environment].serverpath
      ) {
        // 参数有效
        connect(DeployConfig[environment]);
      } else {
        console.log("\x1B[33m%s\x1b[0m", 'Error:请检查传入参数是否规范')
      }
    } else if (environment == 0) {
      console.log("\x1B[33m%s\x1b[0m", 'Error:部署中断')
    } else {
      console.log("\x1B[33m%s\x1b[0m", 'Error:意料之外的环境')
    }
    readline.close();
  });
}

function connect(serverConfig) {
  console.log("\x1B[36m%s\x1b[0m", "-----------准备连接服务器-----------");
  conn.on('ready', () => {
    console.log("\x1B[36m%s\x1b[0m", "-----------连接服务器成功 准备上传文件-----------");
    // 保证服务器下当前目录存在
    useExec(`mkdir -p ${serverConfig.serverpath}/ && cd ${serverConfig.serverpath}/ && rm -rf *`).then(() => {
      conn.sftp((err, sftp) => {
        sftp.fastPut(`${__dirname}/${paperFileName}.zip`, `${serverConfig.serverpath}/${paperFileName}.zip`, {}, (err, result) => {
          console.log("\x1B[32m%s\x1b[0m", `文件上传完成 : ${__dirname}/${paperFileName}.zip 已部署服务器 ${serverConfig.serverpath}/${paperFileName}.zip`);
          // 解压文件停止连接数据库
          useExec(`
              cd ${serverConfig.serverpath}/ && \
              unzip ${paperFileName}.zip && \
              rm -rf ${paperFileName}.zip && \
              exit
            `).then(() => {
            conn.end();
            console.log("\x1B[35m%s\x1b[0m", `部署完成喽`);
          })

        })
      })
    }).catch(err => { })
  }).on("error", err => {
    console.log("\x1B[31m%s\x1b[0m", `连接服务器失败${err.toString()}`);
  }).connect({
    host: serverConfig.host,
    port: serverConfig.port,
    username: serverConfig.username,
    password: serverConfig.password
  })
}


function useExec(cmd) {
  // 所有错误命令直接关闭服务器连接
  return new Promise((resolve, reject) => {
    conn.exec(cmd, async (err, stream) => {
      if (err) { // 异常抛出
        console.log("\x1B[35m%s\x1b[0m", `异常抛出${err.toString()}`);
        conn.end();
        reject(err);
      }
      stream.on('close', async (code, signal) => { // 结束 code: 代码 signal: 信号
        if (code !== 0) {
          console.log("\x1B[35m%s\x1b[0m", `脚本异常退出code: ${code}，异常信号signal:${signal}`)
          conn.end();
          reject("\x1B[35m%s\x1b[0m", `脚本异常退出code: ${code}，异常信号signal:${signal}`);
        }
        // 程序执行成功
        // 自己的业务逻辑....记得conn.end();
        resolve();
      }).on('data', async data => { // 数据 程序执行中echo出的数据
        // console.log("\x1B[35m%s\x1b[0m",`echo出的数据${data.toString()}`);
      }).stderr.on('data', async data => { // 标准错误
        console.log("\x1B[35m%s\x1b[0m", `标准错误${data.toString()}`);
        conn.end();
        reject(data);
      });
    });
  })
}

// 删除文件
function deleteFolder(path) {
  let files = [];
  if (fs.existsSync(path)) {
    files = fs.readdirSync(path);
    files.forEach(function (file, index) {
      let dirPath = path + "/" + file;
      if (fs.statSync(dirPath).isDirectory()) {
        deleteFolder(dirPath);
      } else {
        fs.unlinkSync(dirPath);
      }
    });
    fs.rmdirSync(path);
  }
}

三、GitHub Pages

适用情况： 项目在git仓库，上传代码后自动打包部署

1、如果你要部署在 https://<USERNAME>.github.io/ 上; 参考

2、在你的项目中，创建一个 deploy.sh 脚本，运行脚本来部署站点：

#!/usr/bin/env sh

# 发生错误时终止
set -e

# 构建
npm run build

# 进入构建文件夹
cd dist

# 放置 .nojekyll 以绕过 Jekyll 的处理。
echo > .nojekyll

# 如果你要部署到自定义域名
# echo 'www.example.com' > CNAME

git init
git checkout -B main
git add -A
git commit -m 'deploy'

# 如果你要部署在 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

# 如果你要部署在 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

四、宝塔

适用情况：项目部署在服务器，需要上传整个项目

1、安装宝塔

  • Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

  • Ubuntu/Deepin安装脚本 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

  • Debian安装脚本 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ed8484bec

2、基础环境
在这里插入图片描述

3、Node环境

在这里插入图片描述

4、上传Node项目
文件上传后会根据package.json中安装相关依赖，执行dev、build等命令

在这里插入图片描述

领秀5858
关注
专栏目录
ansible自动化部署(playbook)
景天科技苑
01-12 1万+
上一章单个模块分别写命令使用的是Ad-Hoc命令， 这其实就是一个概念的名字，是相对于写Ansible playbook来说的。类似于在命令行敲入。shell命令和写shell脚本的关系。 我们敲入一些命令去比较快地完成一些事，而不需要将这些命令特别保存下来，这样的命令就叫做Ad-Hoc命令。
前端自动化—使用Jenkins+GitHub自动化部署前端项目
阵雨的博客
08-25 1688
这里写目录标题前言前置条件docker安装和java安装的对比开始，安装java环境第一步，下载安装包第二步，配置环境变量第三步，测试安装成功下载Jenkins并启动第一步，下载Jenkins的war包第二步，使用java运行war包 前言 公司使用Jenkins自动部署好久了，但是自己一直停留在使用的阶段，没有自己搭建过。趁这几天有时间，买了个服务器把这个搞一搞。身为一个前端工程师，对服务器的一些东西不太熟悉，基本上所有的困难都出现在搞服务器上，踩过不少坑，在这里记录一下。 前置条件 一台服务器（我用的
前端自动化部署
qq_41206257的博客
03-08 3176
名词解释 集成：在推送或者 merge 代码后自动进行构建打包 交付：将上一步生成的代码包发布至测试、生产等环境 需求 在 git 代码仓库发生变化后，自动执行打包脚本，并且发布至服务器。 解决的问题 在之前每次开发完毕需要上线之前，需要手动执行 bash 命令打包，并且将打包后的代码人为的拖动至上传应用（FlileZilla Pro）。 手动执行构建脚本消耗时间人力 而拖动代码文件会存在拖拽错误，覆盖之前的其他项目代码等难以预料的问题 工具选择 gitlab/github/gitee Jenki
前端项目自动化部署
@SCY
12-06 3706
本文主要内容为三个方面： 一、使用Git仓库来管理项目 二、如何使用云服务器 三、使用Jenkins进行自动化部署
前端项目自动部署
weixin_29005819的博客
12-27 1583
一、实现的最终效果 点击一下，即可实现 项目打包 文件压缩(便于上传到服务器) 连接服务器 备份 上传打包的文件 解压 完成部署 二、原理及需要的插件 原理： 执行shell脚本 需要的npm依赖包：archiver(压缩)，ssh2（执行脚本：如连接服务器，解压等操作） 三、详细步骤 3.1 安装包 yarn add archiver ssh2 3.2 引入包和编写配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自动化部署—Jenkins
何子的博客
09-19 183
前端自动化部署—Jenkins 最近换了新项目，前端工作一直在进行。每次本地代码改完提交后，总是会有人提出服务器上的代码更新了吗？功能怎么还是没变等问题，于是就干脆请教了一下同事搞个项目自动化部署的。（在Linux上部署，需要用到xshell,和xftp） 部署jenkins 一、 主要步骤： 1.获取包 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo // 若出现链接
自动化打包部署前端vue项目，思维导图
最新发布
03-18
通过上述步骤和技术的详细介绍，我们可以看到GitLab CI/CD不仅提供了强大的自动化部署能力，还支持多种执行器，使得开发者可以根据不同的需求选择最合适的执行环境。无论是简单的脚本执行还是复杂的容器化应用部署，...
自动化部署脚本
05-18
在这个场景中，我们关注的是一个名为"自动化部署脚本"的压缩包，其中包含了实现这一目标的关键文件。这个压缩包的描述表明，尽管提供了参考脚本，但用户需要依据自身的具体环境进行适当的修改，以确保脚本能够正常...
详解Puppeteer前端自动化测试实践
10-17
总的来说，Puppeteer 是一个强大且灵活的前端自动化测试工具，它能有效提升测试质量和效率，尤其适用于大规模、复杂前端项目的持续集成和持续部署(CI/CD)流程中。通过熟练掌握 Puppeteer，开发者可以构建出稳定、...
浅谈Vue 自动化部署打包上线
11-20
因此，有必要实现自动化部署代码到线上，解放双手的同时也减轻后端兄弟的压力。 项目使用 1、在项目根目录下, 创建 deploy/products.js 文件 /* *读取env环境变量 */ const SERVER_ID = process.env.NODE_ENV ===...
实现前端项目自动化部署（webpack+nodejs）
winne雪
06-25 6571
webpack + Nodejs实现前端自动部署；Jenkins
Gitlab-ci:从零开始的前端自动化部署
大灰狼的小绵羊哥哥的博客
04-14 9660
前言 本文为首发原创，同时转载至公众号“全栈前端精选“和“广发证券金融科技”中 目录 一.概念介绍 1.1 gitlab-ci && 自动化部署工具的运行机制 1.2 自动化部署给我们带来的好处 二.知识预备 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本语法规则 2.3 .gitlab-ci.yml配置的特定关键字 三.CI实战 3.1 编写一个gitlab-ci的“he
自动化部署前端项目
qq_42552455的博客
06-06 183
实现打包时自动将dist文件夹部署到服务器
Jenkins前端自动化部署
ShIcily的博客
12-06 1131
为了前端项目的工程化，减少项目发布环境的部署，实现自动化集成打包部署。 本文是针对前端项目和gitlab仓库代码，简述jenkins实现自动化部署的配置流程。
Java学习：Jenkins与Shell实现前端自动化部署
本篇内容将探讨如何在Java学习过程中实现前端项目的自动化部署。 Jenkins是一个开源的持续集成服务器，它允许开发者设置自动化任务，例如构建、测试和部署代码。在这个场景中，Jenkins被用来执行前端项目的自动化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值