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

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

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

1.服务器

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

bash 复制代码
# ssh [服务器名称]@[服务器IP]
ssh [email protected]
# 提示输入密码

cd /home && mkdir demo

2.域名

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

二级域名

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

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

证书

可以在对应的云厂商上申请下载免费的一年 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

  1. 点击 New repository secret
  2. 新增 DEPLOY_KEY,也就是你复制的私钥
  3. 新增 SSH_HOST,你的服务器 ip
  4. 新增 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/[email protected]
        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 搞定一个简单的自动部署了

参考

相关推荐
范文杰1 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪1 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪2 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy2 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom3 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom3 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom3 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom3 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom3 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI4 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端