git hook 自动部署

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

第一步创建空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

复制代码

完美解决各个打包上传代码到服务器，这里涉及的知识点，linux命令操作，生成ssh key，webpack配置. 看不明白的，多仔细跟着看多几遍，注意路径文件问题，一步一步仔细跟着操作，就可以的了，有什么问题也可以在下面评论留言。