フロントエンド自動デプロイ(Nodejs版)

手動展開

  • ここでは導入vueプロジェクトについて説明します・
  • 必要なツール
  • xshellxftp(可有可无。可以减少命令实现部分工作)
  • パック:
npm run build
  • 展開する

xftp 手動コピー ファイル上書きで xshell を使用する

  • xshell を使用してクラウド サーバーに接続し、nginx を使用してパッケージ化されたファイルのアドレス パスを指定し、指定されたパスにパッケージ化されたファイルを配置します。

自動導入

上記の作業を毎日繰り返すのは時間の無駄にすぎません. 一見すると、nodejsサーバーに接続してファイルをアップロードするなど、面倒な作業のこの部分を節約できるように見えます. 始めましょう

依存関係をインストールする

"inquirer": "^8.2.0",
"ssh2-sftp-client": "^9.0.4"
  • Inquirerこれは、通常のインタラクティブなコマンドライン ユーザー インターフェイスのコレクションであり、Node.js に、コマンドライン プロンプト操作用の便利な組み込みの美しいコマンドライン インターフェイスを提供します。
  • ssh2-sftp-client運用サーバーへの接続に使用するSFTPクライアント、ssh2をベースにnode.js向けにパッケージ化

書く

deploy管理しやすいように、プロジェクトのルート ディレクトリの下にフォルダーを作成します。

  1. コマンドライン インタラクティブ ファイルの書き込みhelper.js
const inquirer = require('inquirer')
new inquirer.Separator()
const selectTip = 'project name:'
const options = [
  {
    
    
    type: 'checkbox',
    name: selectTip,
    message: `您希望把项目部署到哪个环境?`,
    choices: []
  }
]

// 显示选择提示窗
function showHelper (config) {
    
    
  console.log("config=",config)
  return new Promise((resolve, reject) => {
    
    
    initHelper(config) // 初始化helper
    inquirer.prompt(options).then(answers => {
    
    
      console.log(answers,answers[selectTip],selectTip)
      resolve({
    
     value: findInfoByName(config,["测试环境"]) }) // 查找所选配置项
    }).catch((err) => {
    
    
      reject(console.error(' helper显示或选择出错!', err))
    })
  })
}

// 初始化helper
function initHelper (config) {
    
    

  for (let item of config) {
    
    
    options[0].choices.push(item.name)
  }
  console.log('正在检查全局配置信息...')
  // 检查是否存在相同name
  if (new Set(options[0].choices).size !== options[0].choices.length) {
    
    
    console.error('请检查配置信息,存在相同name!')
    process.exit()
  }
}

// 查找符合条件的配置项
function findInfoByName (config, nameArr) {
    
    
  console.log("自定义配置",config,"选中的环境",nameArr)
  const arrInfo = []
  for (let item of config) {
    
    
    for(let name of nameArr) {
    
    
      console.log(name,item)
      if(item.name === name) {
    
    
        arrInfo.push(item)
      }
    }
  }
  return arrInfo
}
module.exports = showHelper
  1. ファイルをアップロードおよび公開するためのサーバーの作成と操作ssh.js
const Client = require('ssh2-sftp-client')

const helper = require ('./helper')
const config = [
  {
    
    
    name: '测试环境',
    enviroment: 'development',
    ssh: {
    
    
      host: '你的服务器地址',
      port: 22,//端口号
      username: '服务器用户名',
      password: '服务器密码',
    },
    romotePath: '/lvdu/appHtml',// 远程地址
    localPath:'../dist',// 本地地址
  }
]

function connect(config) {
    
    
  const sftp = new Client()
  return sftp
    .connect(config.ssh)
    .then(() => {
    
    
      console.log(`正在部署 ${
      
      config.name}`)
      return sftp.uploadDir(config.localPath, config.romotePath)
    }).finally(() => {
    
    
      sftp.end()
    })
}

async function main() {
    
    
  const ps = []
  const table = []
  const SELECT_CONFIG = (await helper(config)).value // 所选部署项目的配置信息
  console.log(SELECT_CONFIG)
  for(let config of SELECT_CONFIG) {
    
    
    table.push({
    
    
      enviroment: config.enviroment,
      status: 'OK'
    })
    ps.push(() => connect(config))
  }

  const p = Promise.resolve()
  ps.reduce((p, c) => {
    
    
    return p.then(c)
  }, p).then(() => {
    
    
    console.log('success completed')
    console.table(table);
  }).catch((err) => {
    
    
    console.log(err,'出了点问题,快去看看吧~~')
  })
}

main()

  1. 最後に、スクリプト ファイルを記述してdeploy.sh上記のファイルを実行するか、手動で実行することができます。
echo "正在打包 "
npm run build
node ./ssh.js

手動で行う場合は、最初に

npm run build
再 node ssh.js

上記の方法で自動展開を実現できます

tip: この方法は、ローカルの個人使用にのみ適しています. サーバーアカウントのパスワードの漏洩を防ぐために、倉庫をアップロードしないでください.

如果觉得该文章对你有帮助就快来学习交流群一起学习吧✊~

おすすめ

転載: blog.csdn.net/m_xiaozhilei/article/details/130420852