使用Github自动交付前端制品

February 5, 2025 · 5 min read

feilx

the biulight site owner

怎样通过 Github 自动交付前端编译产物？

准备

一台阿里云 ubuntu 服务器

实施

以 deploy 用户组下的 deploy001-timeline 用户,部署目录 /path/to/folder，部署工具 easingthemes/ssh-deploy@v2.2.11 为例

新建部署用户，修改部署目录权限

tip

遵循权限最小化原则，创建 deploy001-timeline 用户，用于部署若已存在 deploy 用户组，跳过步骤 1，直接新建指定项目部署用户

# 检查指定xxx用户组是否存在
cat /etc/group | grep xxx

创建用户组

sudo addgroup deploy

创建用户

sudo adduser --ingroup deploy deploy001-timeline

sudo chown deploy001-timeline:deploy /path/to/folder

sudo chmod 755 /path/to/folder

配置部署工具

以 easingthemes/ssh-deploy@v2.2.11 为例

tip

easingthemes/ssh-deploy使用手册

服务器侧

tip

使用 ssh 登录服务器，需要使用一组秘钥对，其中公钥设置到服务器 ~/.ssh/authorized_keys 文件中，私钥设置在客户端

登录新创建的用户

su deploy001-timeline

生成非对称密钥

ssh-keygen -m PEM -t rsa -b 4096 -f deploy001-timeline -C "deploy001-timeline"

把公钥粘贴到 authorized_keys 文件中

# 查看公钥，复制输出到终端的结果
cat deploy001-timeline.pub
# 编辑 authorized_keys 文件，并把复制的结果粘贴到此文件
vim ~/.ssh/authorized_keys

~/.ssh/authorized_keys
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDcGxPtreCc5bBbaN7jIRuVuTQkC0Mp6VxnyC5sQKG1IZwSL5agL3Zdbu3YVzx0rSU33XZZj5lWp0AAz4ABQGhAU6iIgDNjRmhyuLG4VOS3Gas21Si1lK4Dm/D0lBA//zFmDBTwa9sAEl39rJQCQYL3n2prMrlC2k8m93RGLFmgxWDcb2D+LGgi43bgR4TXvJD6dZa7xfIldsQL5SQpCzEMX8uDDlnnsus99AqmmMzUenW6I25G2ApwgUY/Toj/scCGeHRb7PmGK0AwjqBr9siiIRNi0DpX4JbYPqLPn0IciC70RNLs2tOEFV1BwP50gmF5eDD4tI7NOLaI4HvkesYy9xF6qBtNJOfALgu7Dt+s5g5izXg2pfb/RKJw2WEj56hLI2NIOr1CgZRJH6Yq2xlP1SKlo3GwkzT/NhnhiO1NFy/FKFj/sYmn4/SM92QM2OmruPDAU6JUHUT9P7m/bhlAxo5xrzMqH8v9c4acxUGz5s87j8eNcNfaIuzMQOG+jzEOqqdWI4uLeTPHrm4pSuZUuse7IenTN3Wx1MD4CfjyZZZIWR6Xv+f7MJ0CpbvpZ7E4MjenLfb8g/upl2L1kv3Lz/UUbL4n38DCY113wkJY5x6T54ckqHUmhirsL2SCHb71VAtxUhEByCTBdPEN18Hh+QOKKTp4rmJYjNrvm4E5yw== deploy001-timeline

tip

vim 是 linux 常用的终端编辑器，常见命令如下

:wq 保存并退出
i 进入输入视图

Github 配置

配置 secrets ，在 workflow 中使用

tip

配置位置如下图所示配置位置参考图

新增 ALY_USER，如下

deploy001-timeline

新增 ALY_HOST，如下

192.168.0.155

新增 ALY_SSH_TOKEN，如下

tip

ALY_USER: 服务器配置的部署用户名
ALY_HOST: 服务器域名
ALY_SSH_TOKEN: 通过ssh-keygen 生成的私钥

项目 workflow 配置

tip

配置文件配置在项目中，通常写在 .github/workflows 目录下

example:

.github/workflows/deploy.yml
name: Deployment
# 触发脚本的条件，develop分支push代码的时候
on:
  push:
    branches:
      - release
# 要执行的任务
jobs:
  # 任务名称
  build:
    # runs-on 指定job任务运行所需要的虚拟机环境（必填）
    # runs-on: self-hosted
    runs-on: ubuntu-latest
    # 任务步骤
    steps:
      # 获取源码
      - name: pull code
        # 使用action库  actions/checkout获取源码
        uses: actions/checkout@v3
      # 安装node
      - name: create build environments
        # 使用action库 actions/setup-node 安装node
        uses: actions/setup-node@v3
        with:
          node-version: 18.20.4
      # 安装依赖
      - name: install
        run: npm install
      # 打包
      - name: build
        run: npm run build
      - name: Upload static files as artifact
        id: deployment
        uses: actions/upload-pages-artifact@v3 # or specific "vX.X.X" version tag for this action
        with:
          path: build/
      # 上传打包文件到远程服务器
      - name: ssh deploy
        uses: easingthemes/ssh-deploy@v2.2.11
        env:
          REMOTE_USER: ${{secrets.ALY_USER}}
          REMOTE_HOST: ${{secrets.ALY_HOST}}
          REMOTE_PORT: "22"
          ARGS: "-rltgoDzvO --delete"
          SSH_PRIVATE_KEY: ${{secrets.ALY_SSH_TOKEN}}
          # 要上传文件所在目录
          SOURCE: "build/*"
          # 远程服务器目标路径
          TARGET: "/var/www/timeline"

补充

NGINX 配置

以访问 http://blog.biulight.cn/timeline 能显示 /var/www/timeline 目录内容为例

tip

通常，Nginx 的虚拟主机配置位于/etc/nginx/sites-available/目录下。如果已经有针对timeline的配置文件，可以直接编辑它；否则，创建一个新的配置文件。
启用配置文件，需要在 /etc/nginx/sites-enabled/目录下有对应配置文件的映射。

新增配置文件

/etc/nginx/sites-available/timeline
server {
    listen 80;
    server_name blog.biulight.cn;

    # 映射/timeline到指定目录
    location /timeline {
        alias /var/www/timeline;
        index index.html index.htm;
    }
}

启用配置文件

# 建立软连接，启用新增的配置文件
ln -s /etc/nginx/sites-available/timeline /etc/nginx/sites-enabled/timeline

测试配置文件

# 修改完配置后，运行以下命令检查语法是否正确
sudo nginx -t

重新加载 Nginx 服务

# 如果测试通过，重新加载Nginx以应用更改：
sudo systemctl reload nginx

使用 `Let's Encrypt` 证书

tip

ubuntu 安装查看certbot官方文档

使用certbot自动生成证书

sudo certbot --nginx

准备​

实施​

新建部署用户，修改部署目录权限​

配置部署工具​

服务器侧​

Github 配置​

项目 workflow 配置​

补充​

NGINX 配置​

使用 Let's Encrypt 证书​

准备

实施