■ はじめに
https://dk521123.hatenablog.com/entry/2024/06/27/220219
で、GitHub Custom Actions を調査していた際に 以下の公式ドキュメントから「GitHub Apps」ってのが 出てきたので、調べてみた => めちゃめちゃ面倒くさい、、、
Github公式ドキュメントより
https://docs.github.com/ja/actions/creating-actions/about-custom-actions#strengths-of-github-actions-and-github-apps
GitHub ActionsとGitHub Appsの強み GitHub Actions と GitHub Apps は どちらもビルドの自動化の方法とワークフローツールを提供しますが、 これらはそれぞれ異なる強みを持っており、違ったやり方で役立ちます。
目次
【１】GitHub Apps １）使用上の注意 【２】GitHub Appsの強み 【３】公式サンプル集 【４】クイック スタート ０）前提条件 １）アプリ コードを複製する ２）Webhook プロキシ URL を取得する ３）GitHub Appsを登録 ４）識別情報と資格情報を格納する ５）アプリをインストールする ６）ローカルサーバーを起動する ７）アプリをテストする
【１】GitHub Apps
* GitHub の機能を拡張するツール
https://docs.github.com/ja/apps/creating-github-apps
１）使用上の注意
* GitHub Appsを動作するには、サーバが必要
【２】GitHub Appsの強み
より抜粋 ~~~~~~~~~~ GitHub Appsは： * 永続的に動作し、イベントに素早く反応できます。 * 永続化されたデータが必要な場合にうまく動作します。 * 時間のかからないAPIリクエストとうまく働きます。 * ユーザが提供するサーバーあるいは コンピューティングインフラストラクチャ上で動作します。 ~~~~~~~~~~
【３】公式サンプル集
* 以下の公式ドキュメントを参照
https://docs.github.com/ja/apps/creating-github-apps/writing-code-for-a-github-app
【４】クイック スタート
* 「【３】公式サンプル集」の中から、 以下の「クイック スタート」をやってみる
https://docs.github.com/ja/apps/creating-github-apps/writing-code-for-a-github-app/quickstart
０）前提条件
* 以下が必要 + node/npm << 今回のサンプルの場合 + git + github アカウント
１）アプリ コードを複製する
* この手順の場合、サンプルコードをクローンするだけ
* 自分でコードを記述したい場合、以下を参照
[1] サンプルのリポジトリをクローン
git clone https://github.com/github/github-app-js-sample.git
https://github.com/github/github-app-js-sample
# ターミナル ウィンドウで、複製が格納されているディレクトリに移動 cd github-app-js-sample
[3] npm install を実行
# 実行して依存関係をインストール
npm install
２）Webhook プロキシ URL を取得する
* Webhookを受け取ってローカルで動いているアプリケーションに 送る届けるサービス「smee.io」をセットアップする
https://docs.github.com/ja/apps/creating-github-apps/writing-code-for-a-github-app/quickstart#step-2-get-a-webhook-proxy-url
[1] smee.io にアクセス
* ブラウザーで以下にアクセス
[2] [Start a new channel] ボタン押下
* [Start a new channel] (新しいチャネルの開始) をクリック
[3] Webhook Proxy URL を取得
* [Webhook Proxy URL] (Webhook プロキシ URL) の下にある URL をコピーしテキストに保存しておく
３）GitHub Appsを登録
GitHub App を作成するには、 まず GitHub App を登録する必要がある
GitHub Apps を構築するためのクイック スタート - GitHub Docs
[1] GitHub Apps へアクセス
* 以下のサイトにアクセスし、[New GitHub Apps] ボタン押下
https://github.com/settings/apps
[2] 項目を入力
[1] [GitHub App name] に、アプリの名前を入力 => たとえば、USERNAME-quickstart-app (USERNAME はご自身の GitHub ユーザー名) [2] [Homepage URL] に 「https://github.com/github/github-app-js-sample#readme」と入力 [3] [Webhook] の下で [Active] のチェックを外す [4] [Webhook URL] の下に、前の Webhook プロキシ URL を入力 [5] [Webhook secret (optional)] に、ランダムな文字列を入力 [6] [Repository permissions] で、 [pull request] の横にある [Access: Read and Write] を選択 [7] [Where can this GitHub App be installed?] で、 [Only on this account] を選択 [8] [Create GitHub App] をクリック => 「App ID（e.g. 123456）」が表示されるので保持しておく => この流れで「[3] 秘密キー の生成」に進む
[3] 秘密キー の生成
[1] [generate a private key]リンクを押下もしくは、 下部にある「Private keys」の「generate a private key」ボタン押下 [2] 秘密キーファイル「【アプリ名】.YYYY-MM-DD.private-key.pem」 がダウンロードされるので、クローン内の任意の場所に置く
４）識別情報と資格情報を格納する
[1] .env ファイルを作成
https://docs.github.com/ja/apps/creating-github-apps/writing-code-for-a-github-app/quickstart#create-a-env-file
[1] クローン内の .env.sample をコピーして、.env にリネーム [2] .env を以下を参考に修正する
.env
APP_ID="「GitHub Appsを登録」のApp ID（e.g. 123456）" PRIVATE_KEY_PATH="「GitHub Appsを登録」の (e.g. ./USERNEME-quickstart-app.YYYY-MM-DD.private-key.pem)" WEBHOOK_SECRET="「GitHub Appsを登録」のランダムな文字列Webhook secret (e.g. password)"
５）アプリをインストールする
[1] アプリをインストールするGithubリポジトリがない場合は、 作成したアプリを所有するアカウントで新しいリポジトリを作成
https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository
[2] GitHub の任意のページの右上隅にある、自分のプロファイル写真をクリック [3] [Settings]-[Developer Settings]をクリックし、対象のGitHub Appsをクリック [2] [Public page] をクリック [3] [Install] をクリックします。 [4] [Only select repositories] を選択 [5] [Select repository] ドロップダウン メニューから対象リポジトリをクリック [6] [Install] をクリック
６）ローカルサーバーを起動する
* テストのために、ご自身のコンピューターをサーバーとして使う * アプリは、サーバーが実行中のときにのみアクティブ
# [1] ターミナル ウィンドウで、github/github-app-js-sample の複製が # 格納されているディレクトリに移動 # Smee.io から転送された Webhook を受信するには、以下を実行 $ npx smee -u WEBHOOK_PROXY_URL -t http://localhost:3000/api/webhook # WEBHOOK_PROXY_URL を、Webhook プロキシ URL に置き換る # URL を忘れた場合は、アプリの設定ページの [Webhook URL] フィールドで確認 Forwarding WEBHOOK_PROXY_URL to http://localhost:3000/api/webhook Connected WEBHOOK_PROXY_URL $ npm run server # ターミナルに Server is listening for events at: http://localhost:3000/api/webhook と表示
７）アプリをテストする
* 対象リポジトリに対して、何でもいいのでプルリクエストを投げる => よくわからない場合は、以下の手順参照
=> 「６）ローカルサーバーを起動する」でサーバ起動中は必須 => プルリクに「出力結果例」のようなコメントが表示されたらOK
出力結果例
Hi there! Thanks for opening a new PR. Please, consider following this guide to make your PR easier to review. Also, check this new feature to use markdown helpers in your PR.
参考文献
https://note.com/teitei_tk/n/n5ad51f00a006
https://zenn.dev/farstep/articles/32751d92dd1452
関連記事
Github ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2019/07/18/234652
Github Custom Action ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2024/06/27/220219
Github Actions ～ runs-onを動的変更することを考える ～
https://dk521123.hatenablog.com/entry/2024/05/18/032229
Github の 各種設定 ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2024/07/11/131849
