VS Code 用 Heroku 拡張機能
最終更新日 2025年03月05日(水)
Table of Contents
Visual Studio Code (VS Code) 用 Heroku 拡張機能により、重要な開発者ツールがすべて VS Code に取り込まれます。この拡張機能を使用すると、VS Code から直接 Heroku アプリの作成と管理、コミット、コード変更のデプロイを行うことができます。また、VS Code ターミナルで Heroku CLI コマンドを実行できるため、開発者はすべての操作を 1 か所で実行できます。
Heroku VS Code 拡張機能をインストールする
まず、Heroku VS Code 拡張機能をインストールします。インストールの前提条件
* VS Code 1.60.0 以降 * [Node.js 22.x 以降](nodejs-support#specifying-a-node-js-version) * [npm 10.x 以降](nodejs-support#using-npm) * [Heroku CLI](heroku-cli#install-the-heroku-cli) がインストールされていること * CodeBuilder 環境の場合は、`npm install -g heroku` を実行します。 * インストールを確認するには、`heroku –version` を実行します。拡張機能をインストールする
1. VS Code を起動します。 2. [VS Code Marketplace で Heroku 拡張機能](https://marketplace.visualstudio.com/items?itemName=Heroku-Dev-Tools.heroku)を開き、**`Install`** (インストール) をクリックします。 3. ポップアップウィンドウで**`Open Visual Studio Code`** (Visual Studio Code を開く) をクリックし、VS Code にリダイレクトします。 4. **`Install`** (インストール) をクリックします。インストールを確認する
インストール後、VS Code で Heroku 拡張機能を確認できます。 * Heroku アイコンが[アクティビティバー](https://code.visualstudio.com/api/ux-guidelines/activity-bar)で使用できるようになっています。 * **`Extensions`** (拡張機能) パネルを開いて (Ctrl+Shift+X または Cmd+Shift+X)、次のことを確認します。 * 拡張機能がインストール済みリストに表示される。 * バージョン番号が [VS Code Marketplace](https://marketplace.visualstudio.com/VSCode) で入手可能な最新リリースと一致する。インストールをテストする
VS Code の更新後に拡張機能をテストして、期待どおりに動作することを確認します。 1. **`Command Palette`** (コマンドパレット) を開きます (Ctrl+Shift+P または Cmd+Shift+P)。 2. `Heroku` と入力します。 3. インストールに成功すると、いくつかの Heroku コマンドが利用可能になります。インストールのトラブルシューティング
インストール中に問題が発生した場合: * VS Code のバージョンを確認します。 * Node.js と npm のバージョンを確認します。 * Heroku CLI がインストールされており、動作していることを確認します。 * 表示されるエラーメッセージをすべて記録します。問題が解決しない場合は [Heroku サポートまでご連絡ください](support-channels)。拡張機能をアンインストールする
拡張機能を削除するには: 1. VS Code で **`Extensions`** (拡張機能) パネルを開きます。 2. Heroku 拡張機能を見つけて選択します。 3. **`Uninstall`** (アンインストール) を選択します。 4. VS Code を再起動します。 エクステンションデータをクリーンアップするには、次を使用します。Windows の場合:
“`term rm -rf %USERPROFILE%.vscode\extensions\heroku-vscode* ”`macOS/Linux の場合:
“`term rm -rf ~/.vscode/extensions/heroku-vscode* ”`Heroku アカウントにサインインする
サインインすると Heroku アカウントが VS Code に接続され、拡張機能でアプリとリソースを管理できるようになります。
VS Code で Heroku にサインインする
- VS Code を開きます。
- アクティビティバーで Heroku アイコンを選択します。
Sign in(サインイン) をクリックします。
- ブラウザまたはターミナルでログインプロセスを完了します。
- デフォルトのブラウザが自動的に開き、Heroku のログインページが表示されます。
- CodeBuilder を使用する場合は、ターミナルウィンドウを開いて
heroku auth:login -i を使用します。
- VS Code に戻り、Heroku アカウントにログインしていることを確認します。
認証を検証する
認証を検証するには、次をこと確認します。
- 拡張パネルにプロファイル情報がある。
- 認証ステータスアイコンが右下隅に表示される。
- ユーザーアイコンを選択すると、認証ステータスが表示される。
- Heroku のリソースとコマンドにアクセスできる。
セッションの管理
認証は VS Code セッション間で維持されるため、VS Code を開くたびに Heroku にサインインする必要はありません。
サインアウトするには:
- VS Code の左下隅にあるユーザーアイコンを選択します。
- Heroku ユーザー名を選択し、
Sign Out(サインアウト)をクリックします。
サインアウトすると、セッションが終了します。Heroku の機能にアクセスするには、再度サインインします。
認証のトラブルシューティング
ネットワークの問題
接続できない場合は、インターネット接続を確認してもう一度お試しください。拡張機能は認証が失敗した場合に再試行オプションを表示します。
認証同期の問題
拡張機能が Heroku アカウントにアクセスできない場合:
- Heroku CLI が正しく動作していることを確認します。
- サインアウトして再度サインインしてみます。
- 拡張機能の最新バージョンを使用していることを確認します。
無効な認証
セッションが無効になった場合、拡張機能は無効なセッションを自動的に検出します。再度サインインして認証プロセスを完了するよう求められます。
認証セキュリティ
Heroku VS Code 拡張機能は、認証に Heroku CLI を使用します。Heroku は CLI を通じて認証情報を安全に管理します。拡張機能に認証情報を直接保存することはありません。
VS Code で Heroku アプリにアクセスする
アプリにアクセスするには:
アクティビティバーの Heroku アイコンを選択すると、アカウントに関連付けられているすべての Heroku アプリのリストが表示されます。
アプリを選択すると、dyno、環境設定、アドオンなどのリソースが表示されます。
アプリを右クリックしてアクションを実行します。ログを表示したり、dyno をスケーリングしたり、ブラウザでアプリを開いたりできます。
Elements Marketplace からアドオンをプロビジョニングする
Heroku の Elements Marketplace を利用して、データベース、モニタリングツールなどの追加サービスでアプリの機能を強化します。
アクティビティバーの Heroku アイコンを選択すると、アカウントに関連付けられているすべての Heroku アプリのリストが表示されます。
アプリケーションを選択します。
Add-ons(アドオン) を選択して、Element Marketplace を開きます。アドオンを選択し、指示に従ってアプリにプロビジョニングします。
プロビジョニング後、Heroku Resource Explorer を使用して VS Code でアドオンを管理します。
エディターからシェルスクリプトを実行する
Heroku VS Code 拡張機能を使用すると、エディター内で CLI コマンドを使用するシェルスクリプトを実行できます。シェルスクリプトを使用して、アプリのデプロイ、dyno のスケーリング、移行の実行などのタスクを自動化します。
コマンドパレットについて知る
ターミナルを使用せずに、VS Code の Command Palette (コマンドパレット) から Heroku CLI コマンドを迅速かつ効率的に実行できます。
Command Palette(コマンドパレット) を開きます (Ctrl+Shift+P または Cmd+Shift+P)。Herokuと入力して、利用可能なすべての Heroku コマンドを表示します。実行するコマンドを選択します。
Heroku へのデプロイ
VS Code から Heroku にデプロイする方法について説明します。
その他の資料
手順はこちら: