標準アクションが行き過ぎていませんか?あなた自身のものを書いてください!

私の Github Action を使用して、独自のアクションを簡単に作成できることをお見せしたいと思います.私はいくつかのプロジェクトで Github ワークフローを使用していますが、既存のアクションを使用する以上のことは必要ありません.この場合、もっと自由が欲しかったので、他のプロジェクトでも使用できる独自のアクションを作成することにしました.

TL;DR ユース ケース: Web ページのスクリーンショットを自動的に撮るために使用できる小さなサービスを作成しました.これは、たとえば、製品のリリースをビルドしてから、ドキュメントまたはランディング ページのすべてのスクリーンショットを更新する場合に役立ちます.サービスを他のワークフローに含めることができ、ユーザーが API を処理する必要がないため、別のアクションを作成しました.

動機

なぜそのようなものを構築するのですか?その理由は非常に単純です.私が定期的に行う必要があり、本質的に常に同じことはすべて自動化するからです.テストは自動で実行され、リンター チェックは自動で実行され、CI パイプラインは自動で実行されます.では、スクリーンショットも自動化してみませんか? ;)

私のワークフロー

My Github Action は基本的に小さな NodeJS アプリであり、Dockerfile として出荷され、Marketplace で見つけることができます. Github の @actions/core package を使用しているため、インフラストラクチャとのやり取りが簡単になります.

すでに NodeJS 個のアプリケーションを実装している人は、独自の Github Action を構築するのに問題はありません.他の人が簡単に始められるように、いくつかの点を強調したいと思います.

アクションを説明する action.yaml が必要です.

name: "Websiteshot"

description: "Github Action to schedule a new Screenshot Job with Websiteshot."

branding:
  icon: "camera"
  color: "blue"

runs:
  using: "docker"
  image: "Dockerfile"

関連する Dockerfile には、マーケットプレイスに必要ないくつかのラベルが含まれています.

FROM node:slim

# A bunch of `LABEL` fields for GitHub to index
LABEL "com.github.actions.name"="Websiteshot"
LABEL "com.github.actions.description"="Github Action to schedule a new Screenshot Job with Websiteshot."
LABEL "com.github.actions.icon"="gear"
LABEL "com.github.actions.color"="blue"
LABEL "repository"="https://github.com/websiteshot/github-action"
LABEL "homepage"="https://websiteshot.app"
LABEL "maintainer"="Adam Urban <[email protected]>"

# Copy over project files
COPY . .

# Install dependencies
RUN npm install

# Build Project
RUN npm run build

# This is what GitHub will run
ENTRYPOINT ["node", "/dist/index.js"]

アプリ自体は、websiteshot の既存の NodeJS package も使用し、サービスで新しいジョブを作成するため、非常に扱いやすいです.

import { Runner } from "./controller/runner.controller";
import { Validation } from "./controller/validation.controller";
const core = require("@actions/core");

async function run() {
  try {
    Validation.checkEnvVars();
    const jobId: string = await Runner.run();
    core.info(`Created Job with Id: ${jobId}`);
  } catch (error) {
    core.setFailed(error.message);
  }
}

run();

このコード スニペットでは、@actions/core パッケージを使用すると、アクションをエラーで終了したり、ログ出力を書き込んだりすることが非常に簡単になることがわかります.

提出カテゴリ: メンテナの必需品

Yaml ファイルまたはコードへのリンク

しかし、今度はワークフロー自体に移りましょう.これは、新しいスクリーンショットを生成するために Websiteshot 自体でも使用されます. CI パイプラインが実行されたら、最後のステップは Websiteshot アクションを開始することです.アクションで使用されるいくつかの環境変数を設定する必要があります.

name: Publish

on: [push]

# ...

jobs:
  create-screenshot:
    runs-on: ubuntu-latest
    name: "Create Screenshot via Template"
    steps:
      - uses: websiteshot/github-action@main
        env:
          PROJECT_ID: ${{ secrets.PROJECT_ID }}
          API_KEY: ${{ secrets.API_KEY }}
          TEMPLATE_ID: "abcdef-ghi..."

マーケットプレイス: https://github.com/marketplace/actions/websiteshot

リポジトリ: https://github.com/websiteshot/github-action

Eat your own dogfood: Websiteshot のドキュメント用のスクリーンショットを生成するために使用: https://docs.websiteshot.app/

追加のリソース / 情報

[注:] # (ワークフローを使用しているオープンソース プロジェクトに必ずリンクしてください!)

[リマインダー]: # (提出期限は 2021 年 12 月 8 日 (午後 11 時 59 分 (PT) または 12 月 9 日の午前 2 時 (UTC))).

Github コア NodeJS パッケージ: https://www.npmjs.com/package/@actions/core

免責事項

この投稿を書いているときに、これが Websiteshot の広告と解釈される可能性があることに気付きました.これは意図したものではありません.これは私のサイド プロジェクトの 1 つです.アクションの説明は、他の人を助けたり、独自のユース ケースに合わせて独自のアクションを作成するためのインスピレーションとして役立つと思います.

もちろん、(外部サービスを使用せずに) Github アクション内ですべてのスクリーンショットを作成することも可能です.必要なのはヘッドレス ブラウザだけで、すぐに使用できます.

楽しむ!