git 创建webpack项目_GitHook自动部署项目

使用git hook来实现本地开发代码一行命令自动上传到远程服务器。

什么是Git Hooks？

话说，如同其他许多的版本控制系统一样，Git也具有在特定事件发生之前或之后执行特定脚本代码功能(从概念上类比，就与监听事件、触发器之类的东西类似)。Git Hooks就是那些在Git执行特定事件(如commit、push、receive等)后触发运行的脚本。

按照Git Hooks脚本所在的位置可以分为两类：

• 本地Hooks，触发事件如commit、merge等。

• 服务端Hooks，触发事件如receive等。

Git Hooks能做什么？

Git Hooks是定制化的脚本程序，所以它实现的功能与相应的git动作相关；在实际工作中，Git Hooks还是相对比较万能的。下面仅举几个简单的例子：

• pre-commit: 检查每次的commit message是否有拼写错误，或是否符合某种规范。

• pre-receive: 统一上传到远程库的代码的编码。

• post-receive: 每当有新的提交的时候就通知项目成员(可以使用Email或SMS等方式)。

• post-receive: 把代码推送到生产环境。(这就是我想要做的)

• etc...

更多的功能可以按照生产环境的需求写出来。

Git Hooks是如何工作的？

每一个Git repo下都包含有.git/hoooks这个目录(没错，本地和远程都是这样)，这里面就是放置Hooks的地方。你可以在这个目录下自由定制Hooks的功能，当触发一些Git行为时，相应地Hooks将被执行。

这里是一个Git Hooks列表，现在如果觉得不是很明白，不用担心，以后我会继续讲：

• applypatch-msg

• pre-applypatch

• post-applypatch

• pre-commit

• prepare-commit-msg

• commit-msg

• post-commit

• pre-rebase

• post-checkout

• post-merge

• pre-receive

• update

• post-receive

• post-update

• pre-auto-gc

• post-rewrite

Git Hooks项目介绍

• node-hooks: 一个命令行下的Git Hooks管理工具

• git-hooks: 一个全面的Git Hooks管理工具

• Git::Hooks: 一个实现Git Hooks的框架

创建空git仓库

终端进入你需要放项目的文件夹，可以通过ssh root@host 链接服务器， cd 命令进入你的文件夹， 这个是需要大家会一些linux命令，这里我就不介绍了。

进入文件夹后，先初始化git

git init

然后使用下面一行代码，使得你这个文件夹创建个空仓库，接受代码提交

git config receive.denyCurrentBranch ignore

下面我们进入 git 的hook文件做修改，来使用hook监听代码提交后自动拉取代码到我们的项目文件夹。进入.git/hooks

cd .git/hooks

创建post-receive hook钩子， 类似我们vue的生命周期函数，监听代码push到远程仓库后进行操作

touch post-receive

然后用vim编辑器打开 post-receive 写入代码

vim post-receive

将以下内容复制到⽂件中 (输⼊i，复制粘贴，按 Esc 退出insert模式，按 :wq 保存退出)

#!/bin/sh
unset GIT_DIR
cd /www/wwwroot/yourproject
git checkout -f

注释说明：cd /www/wwwroot/yourproject 这里的路径是你的服务器项目地址。

授予post-receive可执⾏权限

chmod +x post-receive

这样，⼀个空的git仓库就在服务器上建好了，仓库的地址为：

ssh://deployuser@ipaddress/www/wwwroot/yourproject/.git

注：deployuser：⽤户名、 ipaddress：服务器ip地址 /www/wwwroot/yourproject/.git :你项目路径的.git文件夹

添加公钥

本地生成ssh key 复制添加到服务器上面， 本地生成ssh key，可以看我的另一篇文章生成ssh key 生成ssh key后 复制到剪切板

在服务器终端执行下面代码，打开 .ssh/authorized_keys 文件添加我们本地的 ssh key, 这样可以免账号密码推送代码， 多人开发时，只需要回车空行添加多个 ssh key就好。

vim 编辑器打开 复制剪切板的 ssh key (输⼊i，复制粘贴，按 Esc 退出insert模式，按 :wq 保存退出)

vi ~/.ssh/authorized_keys

服务器上面的配置做好了， 接下来的是本地电脑的配置

创建bash脚本

根⽬录添加 deploy.sh ⽂件,文件内的代码如下：

vue 项目的配置 执行vue 打包命令，执行完进入 dist文件夹创建git，四步走推送到服务器仓库，服务器的hook钩子会监听到自动拉取代码

 # 确保脚本抛出遇到的错误
 set -e
 # ⽣成静态⽂件
 npm run build
 # 进⼊⽣成的⽂件夹
 cd dist
 git init
 git add -A
 git commit -m 'deploy'
 git push -f ssh://root@120.79.193.236/www/wwwroot/m_web/.git master
 cd -

ssh://root@120.79.193.236/www/wwwroot/m_web/.git 是你上面服务器创建好的空git仓库地址

在package.json srcipts 添加一行

"deploy": "bash deploy.sh"

打包发布

npm run deploy

这样就大功告成了。

如果想其他非vue打包的项目怎么办呢，我们是可以利用webpack打包工具来帮助我们。思路是，把当前项目复制一份，然后再写个deploy脚本执行git的四步走。

下面直接上代码：没有 package.json文件的话，先 npm init 初始化

npm init

安装需要的依赖包

npm i -D  webpack webpack-cli clean-webpack-plugin copy-webpack-plugin

clean-webpack-plugin 是 删除文件插件

copy-webpack-plugin 是 复制文件插件

根目录新建 webpack.config.js 文件，里面代码如下：

const CopyPlugin = require('copy-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
    entry: path.join(__dirname, 'main.js'), //入口,要使用webpack打包那个文件。
    output: {
        //输出文件的配置
        path: path.join(__dirname, './dist'), //指定到那个目录中去
        filename: "bundle.js" //指定输出文件的名称
    },
    // 开发环境还是生产环境
    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
    plugins: [
        // 复制根目录下所有文件，并粘贴到./dist文件夹里面去，
        new CopyPlugin({
            patterns: [
                {
                    from: '**/*', to: './',
                    globOptions: {
                        // 忽略不复制文件
                        ignore:['**/dist','**/node_modules']
                    }
                },
            ],
        }),
        // 复制前清除dist文件夹
        new CleanWebpackPlugin()
    ],
};

在package.json的scripts添加一行：

"copy": "webpack"

这时候的根目录下的 deploy.sh文件代码如下：

# 确保脚本抛出遇到的错误
set -e

# 复制文件
npm run copy

# 进入生成的文件夹
cd dist

git init
git add -A
git commit -m 'deploy'
git push -f ssh://root@118.25.48.195/www/web/yourproject/.git master

cd -

打包发布

npm run deploy