リポジトリ内の画像を自動圧縮するGitHub Actionsを作りました

本記事では、GitHub Actionsを用いてリポジトリ内の画像を自動圧縮する方法を紹介します。

なお、GitHub Actionsにまだ申し込んでいない方はこちらから申し込んでください。

imgcmp

• 9sako6/imgcmp

This GitHub action optimizes images in your repository

imgcmpはリポジトリ内の画像を自動圧縮するbotです。現在JPEG、PNG、GIF、SVGに対応しています。git pushしたタイミングで走り、圧縮可能な画像があるなら圧縮して以下のようなpull requestを送ってきます。

使い方

以下の.github/workflows/imgcmp.ymlを作るだけです。

imgcmp.yml

name: imgcmp
on: push
jobs:
  build:
    name: imgcmp
    runs-on: ubuntu-latest    
    steps:
    - uses: 9sako6/imgcmp@master
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

もしリポジトリ内に画像ファイルがあり、それらが圧縮可能なら、git pushした後に冒頭で述べたようなプルリクエストが届きます。

圧縮しない画像ファイルの設定

環境変数IGNORED_FILESを指定することで、圧縮しないファイルを指定することもできます。

imgcmp.yml

name: imgcmp
on: push
jobs:
  build:
    name: imgcmp
    runs-on: ubuntu-latest    
    steps:
    - uses: 9sako6/imgcmp@master
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        IGNORED_FILES: "public/*:posts/*.svg"

ImgBotとの主な違い

画像自動圧縮botの先駆者として、dabutvin/ImgBotが存在します。
imgcmpはImgBotにインスパイアされて作ったものです。両者の大きな違いは、pull requestのタイミングです。
ImgBotは実行頻度をdaily、weekly、monthlyから選べます。
imgbotはgit push後に毎回リポジトリをチェックし、必要があればpull requestを送ります。

GitHub Actionsを作るには

GitHub Actionsを作るのは難しくなく、だいたいDockerfileとentrypoint.shを作るだけです（たぶん）。Learning Labのチュートリアル、Hello, GitHub Actions!がわかりやすかったです。

imgcmpの中身は非常に簡単な作りになっています。

Dockerfile

Dockerfile

FROM golang:latest

RUN apt-get update -qq && apt-get install -y \
    bash \
    gifsicle \
    git \
    jpegoptim \
    optipng

RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs
RUN npm install -g svgo

ADD entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

entrypoint.sh

entrypoint.sh

#!/bin/bash

set -e

# utils
function print_error() {
    echo -e "\e[31mERROR: ${1}\e[m"
}

echo "imgcmp:"

# check envs
if [ -z "${GITHUB_TOKEN}" ]; then
    print_error "not found GITHUB_TOKEN"
    exit 1
fi

# install hub & imgcmp
go get github.com/github/hub
go get github.com/9sako6/imgcmp

# setting for git
git config --global user.name "${GITHUB_ACTOR}"
git config --global user.email "${GITHUB_ACTOR}@users.noreply.github.com"
REMOTE_REPO="https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"
export REMOTE_BRANCH="imgcmp-${GITHUB_SHA}"

# clone & checkout new branch
git clone "${REMOTE_REPO}" local_repo
cd local_repo
git checkout -b "${REMOTE_BRANCH}"

# main flow
imgcmp

おわりに

imgcmpは簡単な作りをしているので、新たにGitHub Actionsを作りたい方の参考になるかもしれません。

imgcmpに関して、issue、pull request、その他意見など投げてくれると喜びます！