TL;DR

通过 Github Actions 实现 Nuxt 3 构建，后将构建后生成后的 .output 文件夹打包，通过 appleboy/scp-action 将压缩包上传至服务器，最后通过 appleboy/ssh-action 运行命令解压并启动编排 docker compose up -d 。

前言

最近在用 Nuxt 3 写一个新的 Blog 主题，可以在 这里 访问看到 Beta 版。在写的时候因为构建之后又要进服务器面板（咱用的是 1Panel）上传 .output 然后执行 docker 命令重启编排很是麻烦，于是就开始想办法解放双手（懒）

在开始前，还是看了些文档的，毕竟我记得 Github Actions 对于公共仓库才是 Free，通过查阅 Github Actions - 使用限制、计费和管理 也证实了这一点。

公共存储库中标准 GitHub 托管的运行器和自托管运行器可免费使用 GitHub Actions。 对于专用存储库，每个 GitHub 帐户可获得一定数量的免费时间和存储以用于 GitHub 托管的运行器，具体取决于帐户的计划。

通过 关于 GitHub Actions 的计费 可以可知部分收费规则如下表所示。

根据上表，存储和分钟数对于搭建一个 Nuxt 3 站点咱觉得超级足够了（）。通过这番 “可行性分析” 后，就可以开始开工力。

创建新用户 (可选)

创建用户

这一环节你可以选择跳过，但我依旧推荐你创建新用户，这里以 Ubuntu 为例。

bhao@docker ~ $ sudo adduser github-action # 新建用户 github-action
[sudo] password for bhao:
Adding user `github-action' ...
Adding new group `github-action' (1001) ...
Adding new user `github-action' (1001) with group `github-action' ...
Creating home directory `/home/github-action' ...
Copying files from `/etc/skel' ...
New password:
Retype new password:
passwd: password updated successfully
Changing the user information for github-action
Enter the new value, or press ENTER for the default # 不断回车以忽略账号信息设置
        Full Name []: 
        Room Number []:
        Work Phone []:
        Home Phone []:
        Other []:
Is the information correct? [Y/n] y

通过 ls /home 查看存在该用户家目录即创建成功。

给予 Docker 权限

bhao@docker ~ $ getent group docker # 查看是否存在 docker 组，若不存在则运行 sudo groupadd docker 以创建
docker:x:999:bhao
bhao@docker ~ $ sudo usermod -aG docker github-action
bhao@docker ~ $ su github-action
Password:
github-action@docker /home/bhao $ cd
github-action@docker ~ $ docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

若 docker ps 返回内容如上所示，那就是权限给好了。

配置密钥登录 (可选)

配置密钥登录更加安全噢！通过以下命令编辑 /etc/ssh/sshd_config 文件。

bhao@docker ~ $ sudo vim /etc/ssh/sshd_config

通过 i 进入编辑状态后，删除 PubkeyAuthentication 和 AuthorizedKeysFile 的注释，如下所示。

#PubkeyAuthentication yes --> PubkeyAuthentication yes
#AuthorizedKeysFile     .ssh/authorized_keys .ssh/authorized_keys2 --> AuthorizedKeysFile     .ssh/authorized_keys .ssh/authorized_keys2

同时也可以将 PasswordAuthentication 注释掉以禁用密码登录（可选，建议验证密钥能够正常登录后再禁用）。

修改结束后通过 :wq 保存并退出编辑，通过 sudo service sshd restart 重启 sshd 服务。

配置 SSH 密钥

务必提前登录至新创建的账号上以免后续多出修改文件权限等麻烦事（x）。

github-action@docker ~ $ ssh-keygen -t rsa -b 4096 -f id_rsa
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase): # 两次回车以忽略密钥的密码设置
Enter same passphrase again:
Your identification has been saved in id_rsa
Your public key has been saved in id_rsa.pub
The key fingerprint is: # 以下返回信息忽略
github-action@docker ~ $ mkdir .ssh # 创建 .ssh 目录
github-action@docker ~ $ mv id_rsa.pub .ssh/authorized_keys # 移动公钥文件
github-action@docker ~ $ chmod 600 .ssh/authorized_keys # 更改权限
github-action@docker ~ $ chmod 700 .ssh

通过 SFTP 或者使用 cat id_rsa 命令读取私钥文件并存到本地，并使用文件名 github_action_ubuntu_docker 。

验证密钥登录

Bhao@Lenovo ~ $ ssh -i ~/.ssh/github_action_ubuntu_docker [email protected]

能够正常登录即配置成功力！

编写 docker-compose.yml

先创建一个空文件夹（这里以 nuxt_test 为例）

/home/github-action $ mkdir nuxt_test 

然后新建 docker-compose.yml 文件，因为用的是 1Panel 作为服务器面板，所以就直接从 1Panel 中的容器编排直接扒拉下来网络相关配置力，文件内容如下。

version: '3'
services:
  node:
    image: node:18.18.0 # 版本号根据自己所需自行修改
    container_name: nuxt-test
    working_dir: /app
    volumes:
      - ./.output:/app
    command: node server/index.mjs
    networks:
      - 1panel-network
    ports:
      - 0.0.0.0:23456:3000
    healthcheck: # (可选)
      test: ["CMD-SHELL", "curl -f http://localhost:3000 || exit 1"]
      interval: 30s
      timeout: 5s
      retries: 20
    restart: always
networks:
  1panel-network:
    external: true

需要注意的是，当 ports 的值为 0.0.0.0:23456:3000 则是 允许外部访问 ，若不需要则将值修改为 127.0.0.1:23456:3000 即可，端口号 3000 也是根据自己所需进行修改就行（Nuxt 默认监听端口为 3000）。

配置 Github Actions

配置前请确保你的仓库内容不存在部分文件缺失问题，文章用的例子为 Nuxt 3 Minimal Starter，可以参考这个 仓库 。

首先需要配置一些环境变量，以防止敏感信息泄漏（x

在仓库的功能栏中，点击 Settings ，在侧边栏中的 Security 中找到 Secrets and variables 里面的 Actions ，通过 New repository secret 新增环境变量。

在项目中新建文件 .github/workflows/main.yml ，内容如下。

name: Publish And Deploy Demo

on: # 触发工作流条件
  push:
    branches:
      - main # 来自 main 分支的 push 事件

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    if: "contains(github.event.head_commit.message, 'build-and-deploy')" # 触发条件: Commit 的描述中包含 build-and-deploy
    steps:
      - name: Checkout # 拉取仓库内容并打包
        uses: actions/checkout@v2

      - name: Use Node.js v18.18.0
        uses: actions/setup-node@v4
        with:
          node-version: '18.18.0' # Node 版本根据需求自行修改
      - run: npm install
      - run: npm run build
      - run: tar -zcvf nuxt.tar.gz .output

      - name: Copy files to server # 上传压缩包至服务器
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }} # 若使用密码则删除本行
          password: ${{ secrets.PASSWORD }} # 若使用密钥则删除本行
          port: ${{ secrets.PORT }}
          source: "nuxt.tar.gz"
          target: ${{ secrets.TARGET }}

      - name: Deploy Applications # 
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }} # 若使用密码则删除本行
          port: ${{ secrets.PORT }} # 若使用密钥则删除本行
          script: |
            cd ${{ secrets.TARGET }}
            tar -zxvf nuxt.tar.gz
            docker compose down
            docker compose up -d

后言

到了这里，就已经配置完毕了，可以通过在 Commit 的描述写上 build-and-deploy 并 push 到仓库看看是否运行成功噢！

如有不足的地方，也欢迎大佬们指出或补充！

好久没有发过 Blog 了，好久不见力！（逃）