git + hooks+shell 实现服务器自动部署vuepress项目

发表于 分类于 阅读次数：

作者：小牛呼噜噜 ，首发于公众号「小牛呼噜噜」

服务器上安装nginx

哈喽，大家好呀，我是呼噜噜，本文和大家简明分享一下，如何自动发版部署项目，既简单又好用的技巧，让大家快速get一个小技巧

本文技术栈：git+hooks+shell+vuepress

首先现在linux服务器(笔者服务器是 OpenCloudOS兼容 CentOS 7)上安装nginx

以root账号登录，其他账号需要在命令前加sudo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 安装
yum install -y nginx

# 启用 Nginx
systemctl start nginx

# 查看 nginx状态
systemctl status nginx

# 停止 nginx
systemctl stop nginx

# 设置为在系统启动时自动启动
systemctl enable nginx

启动后，打开浏览器的效果：

服务器上安装git

1
yum install git

我们接着需要创建一个账号，专门用来ssh这个git私有库

1
2
3
4
5
6
7
8
9
10
#创建git用户
useradd git

#修改git用户的密码
passwd git

# 给git用户提权
sudo visudo
# 在文件里再新加一行git的，然后wq! 保存即可

root ALL=(ALL) ALL
git ALL=(ALL) ALL

1

切换到 git 用户，后面都是这个用户来操作

1
2
3
4
5
6
su git


#创建vuepress.git裸仓库
cd ~
git init --bare vuepress.git

使用git init创建的仓库被称为普通库，使用git init --bare创建的库被称为裸库

普通库不仅包含了版本控制信息，还含了项目所有的源文件，可以直接操作，但是不能在远端直接推送代码到当前分支，常用于本地版本控制

而裸库只包含了版本控制信息，不能直接操作，可以在远端直接推送，通常用于多人协作，版本库放在远端服务器

编辑vuepress.git钩子文件

我们这里利用git的高阶用法hooks钩子来实现，代码发布自动部署功能

编辑post-receive：

vim /home/git/vuepress.git/hooks/post-receive

1
git --work-tree=/home/vuepress/dist --git-dir=/home/git/vuepress.git checkout -f

需要建立工作目录：

1
2
3
cd /home

mkdir -p vuepress/dist

设置权限

1
2
3
chmod +x /home/git/vuepress.git/hooks/post-receive

chmod -R 777 /home/vuepress/dist

配置本地发版脚本deploy.sh

需要注意一下：笔者vuepress用的主题reco，所以下面的目录路径不一样

新建并编辑deploy.sh：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd .vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 发布到服务器的私库
#1. ssh默认22
# git push -f git@1xx.159.1x.7x/home/git/vuepress.git master

#2. ssh自定义端口
git push -f ssh://git@1xx.159.1x.7x:port/home/git/vuepress.git master

cd -

输入密码即可推送过去，也可以去配秘钥，这样就每次不需要密码，我们这里就不展示了

以后发版，直接运行这个脚本就行bash deploy.sh（win下，可以使用git命令行来执行这个脚本）

配置nginx conf 文件

我们再回到服务器上

就能看到/home/vuepress/dist下已经有文件被推过来了

1
2
3
4
5
[root@VM-16-11-opencloudos dist]# ls
404.html  blogs       friendship-link  logo-old2.png  posts
assets    categories  head.png         logo-old.png   tags
bg.svg    docs        index.html       logo.png       timeline

所以现在只要配一下nginx 配置即可

vim /etc/nginx/nginx.conf：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
user root;//设置启动用户
server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        # root         /usr/share/nginx/html; //!

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {   //这里注意一下！
            root /home/vuepress/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

重新加载 nginx 配置文件

systemctl reload nginx

然后打开浏览器输入地址，网站就正常显示了

其实本文还可以做拓展，除了自动部署vuepress项目，还可以部署java，python，go，react等项目，大体思路都是差不多的，核心依然是git + hooks，至于具体怎么实现，大家可以自行去尝试尝试

作者：小牛呼噜噜 ，首发于公众号「小牛呼噜噜」

感谢阅读，原创不易，如果有收获的话，就点个免费的[赞]or[转发]，你的支持会激励我输出更高质量的文章，感谢！