使用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开始触发更新了~
