VSCodeのポート番号完全ガイド｜設定・変更・トラブル解決

「VSCodeでポート番号5500がすでに使用中と表示される…」
「デバッグ時のポート番号を変更したい」
「スマホからローカルサーバーにアクセスできない」

Visual Studio Code（VSCode）で開発をしていると、「ポート番号」に関する設定や問題に遭遇することがあります。特にLive Serverやデバッグ機能を使う際、ポート番号の理解は欠かせません。

この記事では、VSCodeにおけるポート番号の基本から、具体的な設定方法、トラブル解決まで、初心者にもわかりやすく詳しく解説します。

ポート番号とは？
Live Serverのポート番号設定
デバッグ時のポート番号設定
1. launch.jsonでのポート番号設定
2. デバッグポートとアプリケーションポートの違い
ポート転送（Port Forwarding）機能
ポート番号のトラブルシューティング
フレームワーク別のポート番号設定
まとめ

ポート番号とは？

ポート番号の基本概念

ポート番号とは、コンピュータ上で動作する複数のプログラムを識別するための番号です。

わかりやすい例え：

IPアドレス = マンションの住所
ポート番号 = マンションの部屋番号

同じIPアドレス（localhost/127.0.0.1）でも、異なるポート番号を使うことで、複数のWebサーバーやアプリケーションを同時に動作させることができます。

ポート番号の範囲

ポート番号は0〜65535の範囲で指定できます。

ポート番号の分類：

範囲	名称	説明
0〜1023	ウェルノウンポート	HTTP（80）、HTTPS（443）など、標準的なサービスで使用
1024〜49151	登録済みポート	特定のアプリケーション用に登録されたポート
49152〜65535	動的ポート	一時的な接続に使用される

開発でよく使うポート番号：

3000: Node.js開発サーバー（Create React App、Expressなど）
5000: Flaskデフォルトポート（Python）
5500: Live Serverデフォルトポート（VSCode拡張機能）
8000: Djangoデフォルトポート（Python）
8080: 代替HTTPポート

VSCodeでポート番号が関係する場面

VSCodeで開発する際、ポート番号が関係する主な場面は以下の通りです。

1. Live Serverなどの拡張機能

HTMLプレビュー用のローカルサーバーを起動
デフォルトはポート5500

2. デバッグ機能

アプリケーションのデバッグ時に使用
launch.jsonで設定

3. ポート転送（Port Forwarding）

ローカルサーバーを外部からアクセス可能にする
リモート開発やスマホからの確認に便利

4. 開発サーバー

npm run start、python manage.py runserverなど
フレームワークごとにデフォルトポートが異なる

Live Serverのポート番号設定

Live Serverは、VSCodeで最も人気のあるHTMLプレビュー拡張機能です。

デフォルトポート番号

Live Serverのデフォルトポート番号は5500です。

起動すると、http://127.0.0.1:5500/またはhttp://localhost:5500/でアクセスできます。

ポート番号の変更方法

Live Serverのポート番号を変更する方法は複数あります。

方法1：settings.jsonで変更（推奨）

手順：

Ctrl + ,（Macの場合は Cmd + ,）で設定を開く
右上の「設定（JSON）を開く」アイコンをクリック
settings.jsonに以下を追加

{
  "liveServer.settings.port": 5501
}

この例では、ポート番号を5501に変更しています。

ランダムなポート番号を使う：

{
  "liveServer.settings.port": 0
}

0を指定すると、Live Serverは自動的に使用可能なポート番号を選択します。

方法2：GUI設定画面から変更

手順：

Ctrl + ,で設定を開く
検索ボックスに「live server port」と入力
「Live Server > Settings: Port」が表示される
希望のポート番号を入力

方法3：拡張機能の設定画面から変更

手順：

拡張機能ビュー（Ctrl + Shift + X）を開く
インストール済みの「Live Server」を見つける
歯車アイコンをクリックして「拡張機能の設定」を選択
「Live Server Config」セクションでポート番号を変更

ワークスペースごとの設定

プロジェクトごとに異なるポート番号を使いたい場合、ワークスペース設定を使います。

手順：

プロジェクトフォルダを開く
.vscodeフォルダを作成（まだない場合）
.vscode/settings.jsonを作成し、以下を記述

{
  "liveServer.settings.port": 5555
}

これで、このプロジェクトだけ特定のポート番号を使用できます。

その他のLive Server設定

ポート番号以外にも、便利な設定があります。

ホスト名の変更：

{
  "liveServer.settings.host": "0.0.0.0"
}

これにより、同じネットワーク内の他のデバイスからもアクセス可能になります。

ブラウザの指定：

{
  "liveServer.settings.CustomBrowser": "chrome"
}

使用可能な値：chrome, firefox, edge, safari

ローカルIPアドレスを使用：

{
  "liveServer.settings.useLocalIp": true
}

これにより、http://192.168.x.x:5500/のような形式のURLが生成され、スマホからもアクセスしやすくなります。

デバッグ時のポート番号設定

VSCodeでアプリケーションをデバッグする際も、ポート番号の設定が必要な場合があります。

launch.jsonでのポート番号設定

デバッグ設定は、.vscode/launch.jsonファイルで管理します。

Node.js/JavaScriptの場合

例：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/server.js",
      "env": {
        "PORT": "3000"
      }
    }
  ]
}

envセクションで環境変数としてポート番号を指定します。

ASP.NET Coreの場合

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net6.0/MyApp.dll",
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_URLS": "http://localhost:5001"
      }
    }
  ]
}

ASPNETCORE_URLSでポート番号を指定します。

Pythonの場合

Flaskアプリケーションの例：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Flask",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "env": {
        "FLASK_APP": "app.py",
        "FLASK_ENV": "development",
        "FLASK_RUN_PORT": "5001"
      },
      "args": [
        "run"
      ]
    }
  ]
}

デバッグポートとアプリケーションポートの違い

混同しやすいポイントですが、2種類のポートがあります。

1. デバッグポート（Debug Port）

デバッガがアプリケーションと通信するためのポート
通常、自動的に割り当てられる
一般的には9229（Node.js）、5678（Python）など

2. アプリケーションポート

アプリケーション自体がリッスンするポート
ブラウザでアクセスする際のポート
開発者が設定する必要がある

ポート転送（Port Forwarding）機能

VSCodeには、ローカルサーバーを外部からアクセス可能にする「ポート転送」機能があります。

ポート転送とは？

ポート転送を使うと、ローカルで動作しているサーバーに、インターネット経由でアクセスできるようになります。

用途：

スマホやタブレットから確認
他の開発者に作業中の画面を共有
リモート開発環境での作業

ポート転送の使い方

手順：

ローカルサーバーを起動

Live Serverを起動するか、開発サーバーを実行します。

例：

npm run start

ポート番号を確認

VSCode右下のステータスバーに表示されるポート番号を確認します（例：Port: 5500）

ポートビューを開く

VSCode左下のアイコンをクリックして「ポート」パネルを開く
または Ctrl + J（Macの場合は Cmd + J）でパネルを開き、「ポート」タブを選択

ポート転送を開始

「Forward a Port」ボタンをクリックし、ポート番号を入力します。

外部アクセス用URLを取得

ポート転送が開始されると、「Forwarded Address」欄に外部からアクセス可能なURLが表示されます。

例：https://abcd1234-5500.uks1.devtunnels.ms/

ポートの公開範囲設定

ポート転送には3つの公開範囲があります。

1. Private（プライベート）

デフォルト設定
自分だけがアクセス可能

2. Organization（組織内）

同じGitHub組織のメンバーがアクセス可能
GitHub TeamまたはGitHub Enterprise Cloudが必要

3. Public（パブリック）

URLを知っている誰でもアクセス可能
セキュリティに注意

公開範囲の変更方法：

ポートビューで対象ポートを右クリック
「Port Visibility」または「Change Port Visibility」を選択
希望の公開範囲を選択

初回利用時のGitHubアカウント連携

ポート転送を初めて使用する際、GitHubアカウントとの連携が必要です。

手順：

ポート転送を開始すると、認証画面が表示される
「Sign in to GitHub」をクリック
GitHubアカウントでログイン
VSCodeへのアクセスを許可

スマホから確認する方法

手順：

Live Serverまたは開発サーバーを起動
ポート転送を設定（公開範囲はPrivateまたはPublic）
生成されたURLをコピー
スマホのブラウザでURLを開く
Privateの場合、GitHubアカウントでログインが必要

ファイルを編集して保存すると、スマホのブラウザも自動的に更新されます（Live Server使用時）。

ポート番号のトラブルシューティング

トラブル1：「ポートが既に使用中」エラー

症状：

Error: listen EADDRINUSE: address already in use :::5500

または

Port 5500 is already in use.

原因：
指定したポート番号が他のプログラムで既に使用されています。

解決方法1：使用中のプログラムを終了

Windows：

コマンドプロンプトを管理者として実行
ポートを使用しているプロセスを確認

netstat -ano | findstr :5500

PID（プロセスID）を確認し、プロセスを終了

taskkill /PID [プロセスID] /F

Mac/Linux：

ターミナルを開く
ポートを使用しているプロセスを確認

lsof -i :5500

プロセスを終了

kill -9 [プロセスID]

解決方法2：別のポート番号を使用

settings.jsonでポート番号を変更します。

{
  "liveServer.settings.port": 5501
}

または、ランダムポートを使用：

{
  "liveServer.settings.port": 0
}

トラブル2：ポート転送が失敗する

症状：

Unable to forward localhost:5000. [forwarding] exited with code 1

原因と解決方法：

1. ポートが使用中

別のプログラムがポートを使用している可能性があります。

→ 上記「トラブル1」の解決方法を試す

2. ファイアウォールやアンチウイルスソフトによるブロック

セキュリティソフトがポート転送をブロックしている可能性があります。

→ 一時的にファイアウォールを無効化して試す（解決したら、適切に例外設定を行う）

3. SSL証明書の問題

証明書の検証に失敗している可能性があります。

→ システムの日付と時刻が正しいか確認

→ 証明書ストアを更新（Windows：certmgr.mscを実行）

4. VSCodeを管理者として実行

権限の問題でポート転送が失敗している可能性があります。

→ VSCodeを管理者権限で起動して試す

トラブル3：スマホからアクセスできない

症状：
ポート転送のURLをスマホで開いても、ページが表示されない。

原因と解決方法：

1. 公開範囲がPrivate

Privateの場合、GitHubアカウントでログインが必要です。

→ スマホのブラウザでGitHubにログイン

→ または公開範囲をPublicに変更（セキュリティに注意）

2. URLが正しくない

コピーしたURLが間違っている可能性があります。

→ ポートビューで「Forwarded Address」を再確認

→ URLをQRコード化して読み取る（便利）

3. ネットワークの問題

インターネット接続に問題がある可能性があります。

→ スマホがインターネットに接続されているか確認

→ 別のネットワークで試す

トラブル4：デバッグが正しいポートで起動しない

症状：
デバッグ実行時、期待したポート番号で起動しない。

原因：
launch.jsonの設定が正しくないか、アプリケーション側の設定が優先されています。

解決方法：

1. launch.jsonを確認

.vscode/launch.jsonでポート番号が正しく設定されているか確認します。

2. アプリケーション側の設定を確認

Node.jsの場合、package.jsonのscriptsセクション：

{
  "scripts": {
    "start": "node server.js",
    "dev": "PORT=3001 node server.js"
  }
}

3. 環境変数を確認

.envファイルがある場合、そこでポート番号が指定されていないか確認します。

トラブル5：複数のポートを同時に転送できない

症状：
複数の開発サーバーを起動しているが、ポート転送が1つしか機能しない。

解決方法：

VSCodeでは複数のポートを同時に転送できます。

手順：

ポートビューを開く
「Forward a Port」を複数回クリック
それぞれ異なるポート番号を入力

すべてのポートが一覧表示され、個別に管理できます。

トラブル6：自動ポート転送を無効にしたい

症状：
VSCodeが自動的にポート転送を開始してしまう。

解決方法：

settings.jsonで自動ポート転送を無効化します。

{
  "remote.autoForwardPorts": false,
  "remote.restoreForwardedPorts": false
}

特定のポート範囲のみ無視したい場合：

{
  "remote.portsAttributes": {
    "5000-5999": {
      "onAutoForward": "ignore"
    }
  }
}

フレームワーク別のポート番号設定

各種フレームワークでのポート番号設定方法をまとめます。

React（Create React App）

デフォルトポート： 3000

ポート番号の変更：

方法1：環境変数

Windows：

set PORT=3001 && npm start

Mac/Linux：

PORT=3001 npm start

方法2：.envファイル

プロジェクトルートに.envファイルを作成：

PORT=3001

Node.js（Express）

デフォルトポート： 通常3000（任意）

server.jsでの設定：

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Vue.js（Vue CLI）

デフォルトポート： 8080

ポート番号の変更：

vue.config.jsを作成または編集：

module.exports = {
  devServer: {
    port: 8081
  }
}

Next.js

デフォルトポート： 3000

ポート番号の変更：

package.json：

{
  "scripts": {
    "dev": "next dev -p 3001"
  }
}

Python Flask

デフォルトポート： 5000

ポート番号の変更：

if __name__ == '__main__':
    app.run(port=5001, debug=True)

または環境変数：

FLASK_RUN_PORT=5001 flask run

Python Django

デフォルトポート： 8000

ポート番号の変更：

python manage.py runserver 8001

まとめ

VSCodeにおけるポート番号について解説しました。

重要なポイントをおさらいします：

基本概念：

ポート番号は、同じIPアドレス上で複数のサービスを区別するための番号
開発では通常3000、5000、5500、8000などがよく使われる
0〜65535の範囲で指定可能

Live Serverのポート設定：

デフォルトは5500
settings.jsonで変更可能："liveServer.settings.port": 5501
ランダムポートは0を指定

デバッグ時のポート設定：

launch.jsonで環境変数として設定
デバッグポートとアプリケーションポートは別物
フレームワークによって設定方法が異なる

ポート転送機能：

ローカルサーバーを外部からアクセス可能にする
GitHubアカウントとの連携が必要
Private、Organization、Publicの3つの公開範囲
スマホからの確認に便利

トラブル対処：

ポート使用中エラー：別のポート番号を使うか、使用中のプロセスを終了
ポート転送失敗：ファイアウォール、証明書、権限を確認
スマホアクセス不可：公開範囲とログイン状態を確認

ポート番号の理解と適切な設定により、VSCodeでの開発がよりスムーズになります。

複数のプロジェクトを同時に開発する際も、ポート番号を適切に管理することで、競合を避けることができます。

この記事を参考に、快適な開発環境を構築してください！

ポート番号とは？

ポート番号の基本概念

ポート番号の範囲

VSCodeでポート番号が関係する場面

Live Serverのポート番号設定

デフォルトポート番号

ポート番号の変更方法

方法1：settings.jsonで変更（推奨）

方法2：GUI設定画面から変更

方法3：拡張機能の設定画面から変更

ワークスペースごとの設定

その他のLive Server設定

デバッグ時のポート番号設定

launch.jsonでのポート番号設定

Node.js/JavaScriptの場合

ASP.NET Coreの場合

Pythonの場合

デバッグポートとアプリケーションポートの違い

ポート転送（Port Forwarding）機能

ポート転送とは？

ポート転送の使い方

ポートの公開範囲設定

初回利用時のGitHubアカウント連携

スマホから確認する方法

ポート番号のトラブルシューティング

トラブル1：「ポートが既に使用中」エラー

トラブル2：ポート転送が失敗する

トラブル3：スマホからアクセスできない

トラブル4：デバッグが正しいポートで起動しない

トラブル5：複数のポートを同時に転送できない

トラブル6：自動ポート転送を無効にしたい

フレームワーク別のポート番号設定

React（Create React App）

Node.js（Express）

Vue.js（Vue CLI）

Next.js

Python Flask

Python Django

まとめ

Youtube

カテゴリー別人気記事

コメント