ラズパイでGitHub Actions runnerを動かす #Vue.js

はじめに

ラズパイ + Vue.js + Electron で天気やゴミの日情報をTVに表示するアプリケーションを作った。
普段であれば、CircleCIを使用するところだが、ローカルネットワーク上のラズパイであること、折角なので普段使わないツールを使用してみたく、GitHub Actions Self-hosted runner を Raspberry Pi 3 + Raspberry Pi OS (旧raspbian) に構築し、自己デプロイを行えるようにしてみた。

Self-hosted runner とは

Actionsのワークフローを、GitHub上にホスティングされたノードではなく、オンプレミス環境で実行するための runner ツール

GitHub リポジトリの設定

runner を追加

Setting -> Actions から Self-hosted runners -> Add runner を選択

Download と token の発行

Operating System を Linux 、Architecture: を ARM に選択
※Raspberry Pi OS (32bit)の場合

※若干の茶番感は否めないのでこの手順自体はスキップしても問題ない

Raspberry Pi 3 へ runner をインストール

ダウンロード

Actions / Add self-hosted runner の画面でOS等を選択すると、環境に合わせた Download を表示してくれるので、上から実行する

# Create a folder
mkdir actions-runner && cd actions-runner
# Download the latest runner package
curl -O -L https://github.com/actions/runner/releases/download/v2.278.0/actions-runner-linux-arm-2.278.0.tar.gz
# Extract the installer
tar xzf ./actions-runner-linux-arm-2.278.0.tar.gz

最新版のリリースを利用する場合は actions/runner の releases を参照

リポジトリと紐付け

Actions / Add self-hosted runner 画面の Configure でトークンが発行されていることを確認できる
基本的には一つ前の手順から続けて実行すると、セットアップは完了する

./config.sh --url https://github.com/username/repository --token XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

対話式で質問がされるが、変更の必要がない限りは Return キー連打で問題ない

runner の実行

./run.sh

実行まで完了すると、Setting -> Actions 画面の Self-hosted runners に rasberrypi (ラズパイのホスト名) が追加され、状態が Idle となる

ワークフローの設定

Actions の画面から New workflow もしくは Set up this workflow を押下するとエディタが起動する

実行を Self-hosted ノードとする場合、 jobs.build.runs-on の値を "self-hosted" とする

差分

-    runs-on: ubuntu-latest
+    # runs-on: ubuntu-latest
+    runs-on: self-hosted

buildの例

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    # runs-on: ubuntu-latest
    runs-on: self-hosted

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Runs a set of commands using the runners shell
      - name: npm install
        run: |
          cd "${GITHUB_WORKSPACE}"
          npm i

      - name: Build
        run: |
          cd "${GITHUB_WORKSPACE}"
          npm run electron:build

最後に

ラズパイだからと言って特別しなければならないようなことは無く、非常に簡単に構築ができた。
npm を使用したbuildの例も載せたので、参考にしてもらえると幸いです。