GitHub Apps の構築に関するクイックスタート

はじめに

GitHub Apps を使うと、プロセスを自動化したり、他のプラットフォームを GitHub と統合したりできます。詳細については、「AUTOTITLE」を参照してください。

このクイックスタートでは、GitHub App をすばやく作成する方法について説明します。アプリにアクセス権が付与されているリポジトリで pull request が開かれると、アプリは pull request にコメントを追加します。

このクイックスタートでは、すぐに作業を開始できるように、事前に記述されたコードを使用します。コードの記述に役立つ詳細なチュートリアルについては、「AUTOTITLE」を参照してください。

前提条件

コンピューターまたは codespace では、Node.js のバージョン 12 以上を使用する必要があります。詳しくは、Node.js のページを参照してください。

手順 1: アプリコードを複製する

すぐに開始できるように、使用できるコードを記述しました。自分でコードを記述する方法については、「AUTOTITLE」を参照してください。

github/github-app-js-sample リポジトリを複製します。詳しくは、「AUTOTITLE」をご覧ください。ローカルクローンまたは GitHub Codespaces を使用できます。
ターミナルウィンドウで、複製が格納されているディレクトリに移動します。
を実行して依存関係をインストールします。

手順 2: Webhook プロキシ URL を取得する

アプリをローカルで開発するには、Webhook プロキシ URL を使って、GitHub からお使いのコンピューターまたは codespace に Webhook を転送できます。このクイックスタートでは、Smee.io を使って Webhook プロキシ URL を指定し、Webhook を転送します。

ブラウザーでにアクセスします。
[Start a new channel] (新しいチャネルの開始) をクリックします。
[Webhook Proxy URL] (Webhook プロキシ URL) の下にある完全な URL をコピーします。この URL は、後の手順で使用します。

手順 3: GitHub App を登録する

次の手順では、このクイックスタートに必要なアプリ設定を構成する方法について説明します。設定の詳細については、「AUTOTITLE」を参照してください。

GitHub の任意のページの右上隅にある、自分のプロフィール写真をクリックします。
アカウント設定にアクセスしてください。
- 個人用アカウントが所有するアプリの場合は、[設定] をクリックします。
- 組織が所有するアプリの場合:
  1. [自分の組織] をクリックします。
  2. 組織の右側にある [設定] をクリックします。
左側のサイドバーの [Developer settings] をクリックします。
左側のサイドバーで、 [GitHub Apps] をクリックします。
[新しい GitHub App] をクリックします。
[GitHub App 名] に、アプリの名前を入力します。たとえば、です。はご自身の GitHub ユーザー名です。
[ホームページの URL] に「」と入力します。
このクイックスタートでは、「ユーザーの特定と認可」と「インストール後」のセクションはスキップします。これらの設定の詳細については、「AUTOTITLE」を参照してください。
[Webhook] の下で [アクティブ] が選択されていることを確認します。
[Webhook URL] の下に、前の Webhook プロキシ URL を入力します。詳細については、「手順 2: Webhook プロキシ URL を取得する」を参照してください。
[Webhook シークレット] に、ランダムな文字列を入力します。この文字列は後で使用します。
[リポジトリのアクセス許可] で、[pull request] の横にある [読み取りおよび書き込み] を選択します。
[イベントのサブスクライブ] で、Pull request を選択します。
「この GitHub App をどこにインストールできますか？」の下で、「このアカウントのみ」を選択します。
[GitHub App を作成する] をクリックします。

手順 4: 識別情報と資格情報を格納する

このクイックスタートでは、アプリの資格情報と識別情報を環境変数としてファイルに格納します。アプリをデプロイするときに、資格情報の保存方法を変更することをお勧めします。詳細については、「アプリの配置」を参照してください。

資格情報をローカルに格納するため、以下の手順を実行する前に、ご自分がセキュリティで保護されたコンピューターで作業していることを確認してください。

ファイルを作成します。

クローン先のリポジトリは、ファイル内にを含めています。こうすることで、アプリの資格情報を誤ってコミットするのを防ぐことができます。ファイルの詳細については、「AUTOTITLE」を参照してください。

github/github-app-js-sample の複製が格納されているディレクトリに移動します。
このディレクトリの最上位レベルにという名前のファイルを作成します。

次の内容をファイルに追加します。値は後の手順で更新します。

Text

APP_ID="YOUR_APP_ID"
WEBHOOK_SECRET="YOUR_WEBHOOK_SECRET"
PRIVATE_KEY_PATH="YOUR_PRIVATE_KEY_PATH"

APP_ID="YOUR_APP_ID"
WEBHOOK_SECRET="YOUR_WEBHOOK_SECRET"
PRIVATE_KEY_PATH="YOUR_PRIVATE_KEY_PATH"

アプリ設定に移動する

アプリの作成後にアプリ設定から移動した場合は、アプリの設定ページに移動します。

GitHub の任意のページの右上隅にある、自分のプロフィール写真をクリックします。
アカウント設定にアクセスしてください。
- 個人用アカウントが所有するアプリの場合は、[設定] をクリックします。
- 組織が所有するアプリの場合:
  1. [自分の組織] をクリックします。
  2. 組織の右側にある [設定] をクリックします。
- Enterprise が所有するアプリの場合:
  1. Enterprise Managed Users を使用する場合は、[Enterprise] をクリックして Enterprise アカウントの設定に移動します。
  2. 個人用アカウントを使用する場合は、[Enterprise] をクリックしてから、Enterprise の右側にある [設定] をクリックします。
左側のサイドバーの [Developer settings] をクリックします。
左側のサイドバーで、 [GitHub Apps] をクリックします。
アプリの名前の横にある [編集] をクリックします。

アプリの資格情報と識別情報を取得する

アプリの設定ページで、[アプリ ID] の横にある自分のアプリのアプリ ID を確認します。
ファイルで、を自分のアプリのアプリ ID に置き換えます。
アプリの設定ページの [秘密キー] で、 [秘密キーの生成] をクリックします。お手元のコンピュータにダウンロードされた PEM フォーマットの秘密鍵が表示されます。詳しくは、「AUTOTITLE」をご覧ください。
codespace を使用している場合は、ダウンロードした PEM ファイルを codespace に移動して、codespace がファイルにアクセスできるようにします。
ファイルで、を秘密キーへの完全なパス ( 拡張子を含む) に置き換えます。
ファイルで、をアプリの Webhook シークレットに置き換えます。 Webhook シークレットを忘れた場合は、[Webhook シークレット (省略可能)] の下の [シークレットの変更] をクリックします。新しいシークレットを入力し、 [変更の保存] をクリックします。

手順 5: アプリをインストールする

アプリでリポジトリの pull request にコメントを残すには、リポジトリを所有するアカウントでアプリをインストールし、そのリポジトリへのアクセス許可を付与する必要があります。アプリはプライベートであるため、アプリを所有するアカウントでのみインストールできます。

作成したアプリを所有するアカウントで、アプリをインストールする新しいリポジトリを作成します。詳しくは、「AUTOTITLE」をご覧ください。
アプリの作成後にアプリ設定から移動した場合は、アプリの設定ページに移動します。詳細については、「アプリ設定に移動する」を参照してください。
[パブリックページ] をクリックします。
[インストール] をクリックします。
特定のリポジトリのみを選択します。
[リポジトリの選択] ドロップダウンメニューを選択し、このセクションのはじめに選択したリポジトリをクリックします。
[インストール] をクリックします。

手順 6: サーバーを起動する

テストのために、ご自身のコンピューターまたは codespace をサーバーとして使います。アプリは、サーバーが実行中のときにのみアクティブです。

ターミナルウィンドウで、github/github-app-js-sample の複製が格納されているディレクトリに移動します。
Smee.io から転送された Webhook を受信するには、を実行します。を、使用中の Webhook プロキシ URL に置き換えます。 URL を忘れた場合は、アプリの設定ページの [Webhook URL] フィールドで確認できます。

次のような出力が表示されます。は Webhook プロキシ URL です:
```
Forwarding WEBHOOK_PROXY_URL to http://localhost:3000/api/webhook
Connected WEBHOOK_PROXY_URL
```
2 つ目のターミナルウィンドウで、github/github-app-js-sample の複製が格納されているディレクトリに移動します。
実行 . ターミナルにと表示されるはずです。

手順 7: アプリをテストする

これでサーバーが実行され、転送された Webhook イベントを受信するようになったので、pull request を開いてアプリをテストします。

「手順 5: アプリをインストールする」で作成したリポジトリで pull request を開きます。詳しくは、「AUTOTITLE」をご覧ください。
smee.io の Webhook プロキシ URL に移動します。イベントが表示されるはずです。これは、pull request を作成したときに GitHub から正常に pull request イベントが送信されたことを示しています。
を実行したターミナルには、"#1 の pull request イベントを受信しました" のようなメッセージが表示されます。の後の整数は、開いた pull request の番号です。
pull request のタイムラインに、アプリからのコメントが表示されます。コメントでは、複製されたリポジトリ内のファイルの内容が使用されます。
両方のターミナルウィンドウで、CtrlC キーを押してサーバーを停止し、転送された Webhook のリッスンを停止します。

次の手順

これでアプリができたので、アプリのコードを拡張し、アプリをデプロイし、アプリを公開することができます。

アプリのコードを変更する

github/github-app-js-sample リポジトリをフォークし、さまざまな Webhook イベントに応答するか、さまざまな API 要求を行うためにコードを変更します。コードの詳細については、「AUTOTITLE」を参照してください。

行いたい API 要求や受信したい Webhook イベントのためにアプリに追加のアクセス許可が必要になる場合は、忘れずにアプリのアクセス許可を更新してください。詳しくは、「AUTOTITLE」をご覧ください。

アプリのデプロイ

このチュートリアルでは、コンピューターまたは codespace をサーバーとして使用しました。アプリを運用環境で使用する準備ができたら、アプリを専用サーバーにデプロイする必要があります。たとえば、Azure App Serviceを使用できます。

サーバーを用意したら、アプリの設定で Webhook の URL を更新します。運用環境では Webhook を転送するために Smee.io を使用しないでください。

また、コード内でとの各定数も更新する必要があります。詳しくは、「AUTOTITLE」をご覧ください。

アプリの秘密キーや Webhook シークレットは絶対に公開しないでください。このチュートリアルでは、gitignore のファイルにアプリの資格情報を格納しました。アプリをデプロイする際に、資格情報を保存する安全な方法を選び、それに応じて値を取得するようにコードを更新する必要があります。たとえば、アプリをデプロイするサーバー上の環境変数に資格情報を保存できます。 Azure Key Vault</c0 などのシークレット管理サービス>を使用することもできます。

アプリを他のユーザーや組織と共有したい場合は、アプリを公開します。詳しくは、「AUTOTITLE」をご覧ください。

ベストプラクティスに従う

GitHub App に関するベストプラクティスに従うようにする必要があります。詳しくは、「AUTOTITLE」をご覧ください。

GitHub Apps の構築に関するクイック スタート

この記事の内容

GitHub Apps の構築に関するクイックスタート