使用Github Action+Vuepress+Nginx完成博客自动部署至阿里云服务器
方案一:github+nginx+ubuntu定时执行任务
1. 任务提交至GitHub
2. 创建更新脚本
打开到/usr/local/docker,在服务器上创建文件夹privateBlog
mkdir privateBlog
shell
创建脚本refresh-my-blog.sh ,并添加执行权限 chmod +x refresh-my-blog.sh
#!/bin/bash
# 打开到博客目录
cd /usr/local/docker/privateBlog
# 获取最新代码
git pull
# 安装npm依赖
npm install
# 构建打包
npm run build
# 刷新redis
nginx -s reload
shell
关于Nginx部署前端静态资源的教程,可以参考《使用Nginx部署Vue静态站点》
3.创建ubuntu定时任务
接下来我们创建一个定时任务,用于每天定时执行上述脚本,更新博客内容。
查看cron是否运行
ps -ef | grep cron
shell
启动cron
service cron start
shell
编辑crontab文件
sudo crontab -e
shell
添加任务
执行上面命令之后,将打开一个文件,添加如下内容
0 1 * * * ~/refresh-my-blog.sh
重启cron
service cron restart
shell
接下来就cron就会在每天1点执行上述脚本,完成博客内容的更新。
4. 缺点
这种自动更新的方式,缺点很明显
- 无法做到GitHub每提交一次就自动更新,只会每天执行一次
- 如果服务器性能差,在脚本中npm run build那一步会耗时很久(我那台1核2G内存的轻量应用服务器就顶不住了)
- 这种更新方式有点low QAQ
综合上述原因,最终修改成了另一种博客部署方式,就是使用Github Action
方案2:Github Action+Nginx完成自动部署
关于GitHub Action这里不多做介绍,详情可自行百度。使用GitHub Action的可以解决上述的几个问题,我们可以设定为每次提交自动触发,且build的过程由GitHub Action来完成,不存在服务器压力。
1. 生成ssh key
首先在你的Mac或者Windows电脑上,生成ssh key
ssh-keygen -t rsa -C "youmail@gmail.com"
shell
执行如下命令后一路回车,可以在~/.ssh
文件下生成了id_rsa
和id_rsa.pub
两个文件,分别为私钥和公钥。
2.将私钥添加至GitHub secret中
打开到你的博客项目的GitHub repo中,打开setting -> secrets ,创建一个秘钥,名字可以自定义一个可以记住的名称,内容填入刚刚生成的id_rsa
文件中的内容
3.将公钥添加到目标服务器
登录最终要部署博客的阿里云服务器,打开到~/.ssh
文件夹,编辑authorized_keys文件,将第一步中生成id_rsa.pub
中的内容,另起一行添加到最后
这里解释一下原理,GitHub Action在执行任务时,使用我们配置的私钥,来和目标服务器进行交互,因此要在目标服务器中添加对应的公钥
4.创建github action工作流文件
在博客项目的根目录下创建.github
文件夹,添加一个文件deploy_to_aliyun.yml
,内容如下
name: Build app and deploy to aliyun
on:
#监听push操作
push:
branches:
# main分支,你也可以改成其他分支
- main
jobs:
build:
# runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
runs-on: ubuntu-latest
steps:
# 获取源码
- name: Checkout
# 使用action库 actions/checkout获取源码
uses: actions/checkout@master
# 安装Node13
- name: use Node.js 15.4.0
# 使用action库 actions/setup-node安装node
uses: actions/setup-node@v1
with:
node-version: 15.4.0
# 安装依赖
- name: npm install
run: npm install
# 打包
- name: npm build
run: npm run build
# 部署到阿里云
- name: Deploy to Server # 第二步,rsync推文件
uses: AEnterprise/rsync-deploy@v1.0 # 使用别人包装好的步骤镜像
env:
DEPLOY_KEY: ${{ secrets.AUTO_REFRESH_BLOG_BY_GITHUB_ACTION }} # 引用配置,SSH私钥
ARGS: -avz --delete --exclude='*.pyc' # rsync参数,排除.pyc文件
SERVER_PORT: "22" # SSH端口
FOLDER: ./docs/.vuepress/dist # 要推送的文件夹,路径相对于代码仓库的根目录,视情况替换为自己的文件夹路径
SERVER_IP: ${{ secrets.IP }} # 引用配置,服务器的host名(IP或者域名domain.com)
USERNAME: root # 引用配置,服务器登录名
SERVER_DESTINATION: /usr/local/vue/privateBlog # 部署到目标文件夹
yaml
如上文件中的 DEPLOY_KEY
即我们前面添加的名称,在SERVER_IP
中还添加了目标服务器的IP,添加方式和前面添加AUTO_REFRESH_BLOG_BY_GITHUB_ACTION
这个key的方法类似,当然你也可以写明文。接下来尝试更新一下项目,提交即可看到GitHub action开始触发更新了~