Heroku アプリを VS Code のワークスペースにリンクする

最終更新日 2025年03月05日(水)

Heroku の VS Code 拡張機能​を使用して、1 つ以上の Heroku アプリを VS Code のワークスペースに接続します。リンクされた Heroku アプリをローカルで開発し、VS Code から直接変更をリリースできます。

前提条件

以下のものを用意します。

Heroku アプリを接続する

単一のアプリを接続する

  1. アクティビティバーで Heroku の拡張機能を開きます。

  2. Link workspace to Heroku app(s) (ワークスペースを Heroku アプリにリンクする) をクリックします。 VS Code のワークスペースを Heroku アプリにリンクする

  3. 個人用およびチーム用のアプリのリストからアプリを選択します。Private Space​ 内のアプリには盾のアイコンが付いています。

  4. OK をクリックして選択を確定します。

Heroku の VS Code 拡張機能は自動的に次の操作を実行します。

  • heroku-{app-name}​ という名前の Git リモートを追加します。
  • Heroku の拡張機能パネルにアプリを表示します。

heroku-{app-name}​ の命名規則を守ることで、Git リモートを整理された状態に保ちましょう。

複数のアプリを接続する

複数選択を使用して、関連するアプリを同時にリンクします。

  1. アクティビティバーで Heroku の拡張機能を開きます。

  2. Link workspace to Heroku app(s) (ワークスペースを Heroku アプリにリンクする) をクリックします。

  3. ドロップダウンリストで複数のアプリの横にあるチェックボックスを選択します。 複数の Heroku アプリを選択する

  4. OK をクリックして選択を確定します。

選択された各アプリは:

  • heroku-{app-name}​ 形式を使用して命名された Git リモートとして追加されます。
  • Heroku の拡張機能パネルに表示されます。

ワークスペースを新しい Heroku アプリとして設定する

  1. Heroku の拡張機能パネルを開きます。

  2. Deploy to Heroku (Heroku にデプロイ) をクリックします。 Heroku の拡張機能の [Deploy to Heroku] オプション

  3. 指示に従って新しい Heroku アプリを作成します。

接続を検証する

アプリが正しくリンクされていることを確認するには:

  1. VS Code でターミナルを開きます。

  2. git remote -v​ を実行します。

  3. 次のようなエントリを探します。

    heroku-{app-name} https://git.heroku.com/{app-name}.git

トラブルシューティング

ワークスペースを Heroku アプリに接続するときに問題が発生した場合は:

  • Heroku の認証ステータス​を確認します。
  • ワークスペースが Git で初期化されていることを確認します。
  • インターネット接続を確認します。

エラーメッセージ

次の場合は、VS Code ターミナルで詳細なエラーメッセージを確認します。

  • アプリが使用できなくなった場合
  • 権限が不十分な場合
  • ネットワークの問題が発生した場合

アプリの接続を削除する

アプリのリンクを解除するには:

  1. ターミナルを開きます。

  2. 次のように実行します。

    git remote remove heroku-{app-name}

または、Heroku Resource Explorer でアプリを右クリックし、Remove app from workspace (ワークスペースからアプリを削除する) を選択します。 ワークスペースからアプリを削除する

削除を確認するには、git remote -v​ を実行します。

次のステップ

Heroku の VS Code 拡張機能で dyno を管理​し、アプリログを確認​し、リアルタイム更新で監視および管理​する方法を学習して、リンクされたアプリの開発を続けましょう。