以下实例项目为vue项目,其他项目当然也雷同咯

在项目中建一个这个么脚本文件

不说了,上代码

#!/bin/sh

handle=$1;
env=$2; # 远程部署机 webhook
# 如果用远程机器部署的话就要用到以下方法
# preHandle(){
# git pull orgin master
# npm config set registry http://registry.npm.taobao.org/
# npm install
# npm run build-prod
# }
# 清空dist目录
emptyRemoteDist(){
if [ $env == "prod" ]
then
echo "[exec]remove remote:yourip folder"
ssh root@yourip "rm -rf /www/jiketoutiao_admin/*"
else
echo "[exec]remove remote:yourip folder"
ssh root@yourip "rm -rf /www/jiketoutiao_admin/*"
fi
}
# 发送文件到正式服
transferFileToProSever(){
echo "[exec]transfer file to product:yourip sever"
scp -r ./dist/* root@yourip:/www/jiketoutiao_admin/
}
# 发送文件到测试服
transferFileToTestSever(){
echo "[exec]transfer file to development::yourip sever"
scp -r ./dist/* root@yourip:/www/jiketoutiao_admin/
} if [ $handle == "build" ]
then
if [ $env == "prod" ]
then
env='prod'
echo "[exec]build ==> build production"
npm run build-prod
emptyRemoteDist
transferFileToProSever
else
env='dev'
echo "[exec]build ==> build development"
npm run build
emptyRemoteDist
transferFileToTestSever
fi
fi

首先你得把部署机(可能是你本地机器)的ssh公钥(~/.ssh/id_rsa.pub)配置到对应服务器(~/.ssh/authorized_keys)

命令走起就可以直接发布了

例1:发布到测试服

./deploy.sh build dev

例2:发布到正式服

./deploy.sh build prod

这些后面的参数名称自己按照爱好改就行

然后在这讲一下npm run build-prod的操作,先在package.json这样配置

"scripts": {
"dev": "node build/dev-server.js development-server",
"dev-prod": "node build/dev-server.js production-server",
"build": "node build/build.js development-server",
"build-prod": "node build/build.js production-server"
},

其实就是在执行对应操作的时候加上自定义的参数,这些参数production-server干啥用呢,看下面

然后用来在项目中做一些配置,配置一些测试服正式服的域名啥的

嗯,就这些东西了,从此部署项目的时候再也不用打开FTP“选中->拖拽”了,麻烦

前端自动化部署方案-实践(配合shell)的更多相关文章

  1. 基于 Docker 和 GitLab 的前端自动化部署实践笔记

    基于 Docker 和 GitLab 的前端自动化部署 实践笔记 随着接触的项目越来越多,在部署测试流程上重复耗时工作也越来越多,所以对前端工作的CI/CD实现愈发迫在眉睫. 前端开发由于三大框架的崛 ...

  2. Cobbler自动化部署最佳实践

    第1章 Cobbler自动化部署最佳实践 运维自动化在生产环境中占据着举足轻重的地位,尤其是面对几百台,几千台甚至几万台的服务器时,仅仅是安装操作系统,如果不通过自动化来完成,根本是不可想象的. 面对 ...

  3. 自动化部署方案CICD

    自动化部署方案   由于来来也的时间不久,可能对现有的部署情况不是很了解,以下是个人对POC自动化部署的设计方案. 自动化部署优点 降低成本,提高生产力,高可用,更可靠,性能优化   与gitlab持 ...

  4. 自动化部署-从maven到shell脚本到jenkins

    Java代码自动部署 [ ①Java代码自动部署-总结简介] 代码部署是每一个软件开发项目组都会有的一个流程,也是从开发环节到发布功能必不可少的环节.对于Java开发者来说,Java代码的发布部署也是 ...

  5. 前端自动化部署之gulp

    1.首先需要安装node+npm(这里不再叙述,网上教程一大堆) 2.gulp全局安装:npm install -g gulp 3.cd进入到你的项目目录,这里使用demo文件夹为我的示例项目 4.在 ...

  6. 前端自动化部署linux centOs + Jenkins + nignx + 单页面应用

    Jenkins是什么? Jenkins 是一款业界流行的开源持续集成工具,广泛用于项目开发,具有自动化构建.测试和部署等功能. 准备工作 Linux centOS系统阿里云服务器一个 码云一个存放vu ...

  7. .NetCore基于Jenkins和Gogs的自动化部署方案

    准备工作 Jenkins和gogs的安装配置可以看前两篇:Jenkins安装.配置与说明  和 gogs安装与说明(docker) 此外,因为还要安装.net core的SDK和Git工具: 安装.n ...

  8. ezdpl:完全依赖脚本和ssh的自动化部署方案

    ezdpl是easy deployment的简写,使用简单的ssh和shell脚本来部署.升级.回滚和重新配置linux服务器. 重要提示:警告:这个项目还处于测试过程中,请仔细阅读说明,并且自己承担 ...

  9. (转)Cobbler自动化部署最佳实践

    原文:http://www.xuliangwei.com/xubusi/446.html 运维自动化在生产环境中占据着举足轻重的地位,尤其是面对几百台,几千台甚至几万台的服务器时,仅仅是安装操作系统, ...

随机推荐

  1. css:pointer-events: none

    css3新属性pointer-events: none: pointer-events: none 顾名思义,就是鼠标事件拜拜的意思.元素应用了该 CSS 属性,链接啊,点击啊什么的都变成了 “浮云牌 ...

  2. mybatis sql参考

    参考mybatis sql: <select id="xxx" resultType="com.xxxx.xxx.vo.xx.xx" parameterT ...

  3. spring cloud 笔记

    1.在工程的启动类中,通过@EnableDiscoveryClient向服务中心注册:并且向程序的ioc注入一个bean: restTemplate;并通过@LoadBalanced注解表明这个res ...

  4. HttpRunnerManager使用(一)

    用例: 一.request requests---headers===>headers设置 requests---type:params===>请求参数设置,URL参数(get) requ ...

  5. pythonj基础(六)函数初识

    一.什么是函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以 ...

  6. protobuff 编译注意事项

    把protoc.exe增加到环境变量path,这样方便运行protoc 生成C++代码  protoc -I=Proto文件路径 –cpp_out=指定输出.h和.cc的目录 Proto文件 具体参数 ...

  7. concurrent.futures模块(进程池/线程池)

    需要注意一下不能无限的开进程,不能无限的开线程最常用的就是开进程池,开线程池.其中回调函数非常重要回调函数其实可以作为一种编程思想,谁好了谁就去掉 只要你用并发,就会有锁的问题,但是你不能一直去自己加 ...

  8. 搭建Fabric网络(二)下载bin和images

    上一篇已经把运行和开发Fabric需要的程序都安装好了,这一篇主要讲怎么运行一个简单的Fabric网络. 1.  下载官方Sample代码 git clone -b master https://gi ...

  9. background-clip 和 background-origin 的区别

    background-origin:指定绘制背景图片的起点. background-clip:是对背景图片的剪裁,指定背景图片的显示范围. 1.background-origin:padding  | ...

  10. Oracle 触发器和序列的创建和使用 (自动增长列)

    -- 创建序列 create sequence 序列名称        start with 1 -- 起始值        increment by 1 -- 增量        maxvalue ...