Squadbase logo

GitHub 連携

SquadbaseとGitHubを連携して、ソースコードの管理や既存プロジェクトの取り込みを行う方法を説明します。

SquadbaseはGitHubを連携することで、以下の2点を行うことが可能です。

  • Squadbase上で作成したダッシュボードのソースコードを自分のリポジトリに追加
  • 自分のリポジトリ上にあるNext.jsなどのダッシュボードのコードをSquadbaseに取り込み、Squadbaseで開発

連携方法(Squadbaseのコードをリポジトリに追加)

Squadbase上で作成したダッシュボードのソースコードを自分のリポジトリに追加する手順を説明します。

開発者モードをオンにする

エディター画面で 開発者モード をオンにすると、設定(歯車アイコン)が表示されます。

開発者モードをオンにした状態

SquadbaseアカウントとGitHubアカウントの連携

「設定」をクリックするとモーダルが表示されるので、「GitHubリポジトリに接続」のボタンをクリックします。

設定モーダル

表示に従って進めると、プロフィール詳細が表示されます。

プロフィール詳細画面

連携アカウントの「+ アカウントを連携する」をクリックし、GitHubを選択します。

SquadbaseアプリをGitHubのOrganizationにインストール

Install GitHub App」をクリックすると、GitHubのページに遷移します。

Install GitHub Appボタン

ここで全てのリポジトリに対してアクセスを許可するか、選択したリポジトリのみにアクセスを許可するか選択します。

GitHubのアクセス許可選択画面

以下の画面が表示されたら、正常にGitHub Appがインストールされた状態になります。

インストール完了確認画面

連携したGitHubのリポジトリを操作する

GitHubとの連携が完了した状態で再度Settingsを開き、「Connect to GitHub Repository」をクリックすると、Squadbaseで作成したコードベースを連携したOrganizationで新規のリポジトリとして作成することが可能です。

連携後のConnect to GitHub Repository

連携方法(既存リポジトリをSquadbaseに取り込み)

自分のリポジトリ上にあるNext.jsなどのダッシュボードのコードをSquadbaseに取り込み、Squadbaseで開発する方法を説明します。

新規プロジェクト作成の際に下部にある「Developer Options」を開くと、Organizationを選択可能になっており、すでにGitHubにあるリポジトリをSquadbaseに連携させ、Squadbase上でコードの編集ができるようにすることも可能です。

もちろんSquadbaseで行った開発差分を再度自分のリポジトリに反映することも可能です。

Developer Optionsでのインポート設定

GitHubアカウント連携の注意点

Squadbaseでは、1つのGitHubアカウントを複数のSquadbaseアカウントに重複して紐づけることはできず、GitHubアカウントのメールアドレスと同じメールアドレスのSquadbaseユーザーがいる場合にはそちらが優先されます

これは以下のポリシーに基づく仕様です。

メールアドレス=本人確認の前提

GitHubで登録されているメールアドレスは本人を識別するための重要な情報であり、同じメールアドレスが指す人物は1名のみであると想定しています。

セキュリティ確保のための制限

もし同じGitHubアカウントを異なるSquadbaseアカウント(異なるメールアドレス)に紐づけられると、認証情報が重複し、誤った権限付与のリスクが生じます。Squadbaseではプロジェクトのインポートやデプロイの実行をチームロールで管理しているため、このような制限が必要です。

GitHub連携のトラブルシューティング

GitHub連携時に以下のような問題が発生した場合の対処法をご紹介します。

リポジトリが表示されない場合

リポジトリの一覧に探しているリポジトリが表示されない場合は、Repository accessの設定で対象のリポジトリへのアクセスが許可されているか確認してください。

Organizationが表示されない場合

連携先のGitHubのOrganizationが表示されない場合は、以下の手順で確認してください:

  1. GitHubのOrganizationページに移動
  2. Settingsを開く
  3. Third-party Access > GitHub Appsを選択
  4. Installed GitHub AppsにSquadbaseが含まれていることを確認

Organizationだけでなく、個人アカウントにも同様にGitHub Appがインストールされていることを確認してください。

GitHubアカウントとの連携エラー(ERROR: GitHub Account Already Connected to Another User)

このエラーが表示されている場合には、以下の2点のいずれかに該当しています。

GitHubアカウントがすでに他のSquadbaseアカウントに紐づけられている

この場合、GitHubアカウントを新たにSquadbaseアカウントに紐づけることはできません。既存のSquadbaseアカウントからGitHubアカウントを解除するか、別のGitHubアカウントを使用してください。

GitHubアカウントで利用しているメールアドレスと、同一のメールアドレスを持つSquadbaseユーザーが他に存在する

この場合、GitHubアカウントは同一のメールアドレスを持つSquadbaseユーザーだけが利用可能です。どちらかのアカウントを削除してください。