Github actions 实现个人网站自动部署

部署自己的静态网页，简单点的话就是用 nginx 配置一个 web 服务，然后本地上传文件夹到服务器的指定文件夹下。如果不想买服务器，也可以申请个 Github Pages，或者是用阿里云或其他云厂商的对象存储服务，以下内容是针对有个人服务器的情况

其实我以前用 Jenkins 做过网页的自动部署，但是感觉界面体验很差，然后安装、升级、插件安装、关联 github 都挺折腾，插件也经常下载失败然后就导致一些奇怪的问题（比如 jenkins 服务不可用...）大抵是我不适合干运维的活吧。后面索性就换成了 Github Actions。事实证明，简单的应用部署确实没必要动用 Jenkins

1.服务器

首先买个自己的服务器，并且已经备案好了。一般用轻量服务器就够了，价格可以参考这个。然后 ssh 到服务器上建个文件夹 /home/demo

bash 复制代码

# ssh [服务器名称]@[服务器IP]
ssh root@127.0.0.1
# 提示输入密码

cd /home && mkdir demo

2.域名

最好在服务器对应的云厂商上买域名，后面做解析会方便一些。下面以我的域名 zhouweibin.top 为例

二级域名

经常会有解析二级域名的需求，以 demo.zhouweibin.top，先进入域名控制台，对应的解析方法如下：

记录类型选 A
主机记录填对应的二级域名（比如 demo.zhouweibin.top 对应 demo）
记录值填服务器IP
其他默认就行

证书

可以在对应的云厂商上申请下载免费的一年 ssl 证书（过期的话重新申请就行了），用于 nginx 配置 https，需要上传到服务器上指定的证书目录，服务配置参考下下面的 nginx 配置。注意需要上传的文件后缀是 pem 和 key

3.nginx 配置

注意 nginx 设置的应用目录要关联下面 Github actions 步骤的 deploy.yaml 里的配置

安装

bash 复制代码

yum install nginx
systemctl start nginx
systemctl enable nginx
# 常用命令
# systemctl restart nginx
# systemctl status nginx
# systemctl stop nginx

因为我的服务器是 centos 系统，其他系统可能安装 nginx 的方式还不一样，这点要留意下

修改配置

先找个目录用于部署个人应用，然后修改下 nginx 配置，文件一般在 /etc/nginx/nginx.conf

bash 复制代码

vi /etc/nginx/nginx.conf

bash 复制代码

#...
# 按照 nginx.conf 文件的格式，加一下下面的模块
server {
    listen 80;
    # 注意：如果是用二级域名，需要先在域名控制台解析对应的二级域名
    server_name demo.zhouweibin.top;
    location / {
        root /home/demo;
        index index.html;
    }
}
# https
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name demo.zhouweibin.top;
    root /usr/share/nginx/html;
    # 注意：密钥需要预先生成并上传，这里不能为空
    # 可以在服务器对应云服务商里免费申请和下载，之后上传到指定目录，比如这里指定目录是/etc/ssl
    ssl_certificate "/etc/ssl/xxx.pem";
    ssl_certificate_key "/etc/ssl/xxx.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 10m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

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

    location / {
        root /home/demo;
        index index.html;
    }
}
#...

如果没有 ssl 证书，可以先注释掉 https 的配置。接下来先在本地打包，将 build 里的所有文件上传到 nginx 指定目录下，然后重启 nginx 访问尝试下

bash 复制代码

systemctl restart nginx

4.生成 ssh 密钥

如果服务器没有生成过 ssh 密钥，需要先创建，然后关联 github，确保 github 能连接到你的服务器，为后面的自动部署脚本做好准备

bash 复制代码

ls ~/.ssh # 没有的话说明没有创建过，需要执行以下命令生成秘钥
mkdir -p ~/.ssh && cd ~/.ssh
ssh-keygen -t rsa -f demo # demo是秘钥文件名称，可以自定义
# 默认回车就行，之后会生成公钥：demo.pub；私钥：demo 这俩文件
cat mysite.pub >> authorized_keys
cat demo
# 复制私钥

到 github 仓库里配置私钥和一些额外的私密信息，Settings > Secrets and variables > Actions

点击 New repository secret
新增 DEPLOY_KEY，也就是你复制的私钥
新增 SSH_HOST，你的服务器 ip
新增 SSH_USERNAME，你的服务器用户名，whoami 可以查看

5.新增部署脚本

在项目根目录新增 .github 目录，存放部署脚本，步骤如下：

bash 复制代码

cd .github
mkdir workflows & cd workflows
touch deploy.yaml

deploy.yaml

下面是我部署个人网页的 deploy.yaml 文件，可以参考：

yaml 复制代码

name: Deploy My WebSite

on:
  push:
    branches:
      - main      # 提交代码到 main 分支时触发部署
    paths-ignore: # 规定以下文件变更不触发部署
      - README.md
      - LICENSE

jobs:
  deploy:
    runs-on: ubuntu-latest # 使用ubuntu系统镜像
    steps:
      - uses: actions/checkout@v2 # 下载代码仓库
      - name: Setup node # 安装 Node.Js
        uses: actions/setup-node@v1
        with:
          node-version: "16.16.0"
      - name: Build # 执行打包逻辑
        run: |
          npm install
          npm run build
        env:
          CI: true
      - name: Deploy to Server # 推送打包产物
        uses: AEnterprise/rsync-deploy@v1.0.2
        env:
          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # SSH私钥，在仓库Setting里配置
          ARGS: "-e -c -r --delete"
          SERVER_PORT: "22" # SSH端口
          FOLDER: build # 要推送的文件夹，路径相对于代码仓库的根目录
          SERVER_IP: ${{ secrets.SSH_HOST }} # 服务器的ip
          USERNAME: ${{ secrets.SSH_USERNAME }} # 服务器登录名，可以在终端输入 whoami 查看
          SERVER_DESTINATION: /home/demo # 部署到目标文件夹
      - name: Deploy Post # 后置处理，比如这里会将/home/build文件名改成demo（对应nginx指定的应用目录）
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.DEPLOY_KEY }}
          script: |
            cd /home
            cp -r demo/build demo-temp
            rm -rf demo
            mv demo-temp demo

注意看我配置里的注释，有些自定义的选项注意替换成自己的。之后可以在本地尝试 git push，然后到仓库的 Actions 页查看流水线

完整的配置参考工作流程语法

到这里就借助 github actions 搞定一个简单的自动部署了

参考

个人服务器配置