前端使用命令部署发布如何配置yarn deploy

不使用命令发版的话主要使用xshell和xftp两个软件
xshell登录ssh连接上服务器环境,然后使用xftp左边进入本地该项目中,右边进入服务器上该项目,省事的话直接左边文件拖到右边
也简单主要使用插件ssh2-sftp-client
以下配置命令打包主要是根据框架有关,框架如何写的可以这样配置发版命令等我研究研究在更新。
1、在package.json中配置发布的命令

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    //配置的发版的命令  老版的框架使用的vue-cli-service
    "deploy:test": "git pull && vue-cli-service build && node ./scripts/deploy.js test",
   //新版的框架使用的命令,新框架放弃了使用vue-cli-service。node把什么东西注入到生产环境中的webpack.config.prod.js
    "deploy:127": "git pull && cross-env NODE_ENV=production webpack --config build/webpack.config.prod.js && node ./scripts/deploy.js 127",

    "lint": "vue-cli-service lint"
  },

2、./scripts/deploy.js 该目录下创建文件
安装依赖ssh2-sftp-client主要使用该依赖对本地和服务器进行连接,实现命令部署发版

const path = require('path')
const Client = require('ssh2-sftp-client')

const client = new Client()

const argv = process.argv
const env = argv[argv.length - 1]

const config = require('../deployment.server.json')
const srcDir = path.join(__dirname, '../dist')
const targetDir = config[env].targetDir

client.connect(config[env]).then(() => {
  return client.uploadDir(srcDir, targetDir, /^((?!apiConfig\.js).)+$/)

})
  .then(result => {
    console.log("文件部署成功");
    console.log(result);
  })
  .finally(() => {
    return client.end()
  })
  .catch(err => {
    console.log("文件部署失败", err);
  })

3、配置需要连接的服务器信息(…/deployment.server.json 创建该目录下的文件)

{
  "test":{
    "host":"192.168.1.127",
    "port":"22",
    "username":"root",
    "password":"123456",
    //服务器上该项目地址(发版时需要替换的文件的地址)
    "targetDir":"/home/nginx/html/demo"
  }
}

项目目录如下
在这里插入图片描述
第一次使用一定记得在项目中把项目备份,防止配置写的有问题,给环境更炸了

备份:
打开xshell,连接ssh,进入该项目的上一级目录,把项目整个复制粘贴即可
(假设已在项目这级目录)
cd …
ll 看下所有文件信息,是否有需要复制的项目
cp -r 源文件/目录 目标文件/目录(一般起名格式:源文件名加上复制的日期)
cp -r demo demo1011

备份之后,进行部署测试,环境登上去看看是否正常。

这是使用命令发版的配置,还有一种CI/CD自动部署发版的。等我研究研究在整理记录下。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值