VSCodeのポート開放（ポート転送）完全ガイド！ローカルサーバーを外部公開する方法

「VSCodeでローカルサーバーを立ち上げたけど、スマホで確認したい」
「チームメンバーに開発中のアプリを見せたい」
「ngrokみたいなツールなしで外部公開できないの？」

実は、VSCodeにはポート転送（Port Forwarding）機能が標準で搭載されています。

この機能を使えば、ローカル環境で動いているWebサーバーやアプリケーションを、外部から簡単にアクセスできるようにできるんです。

この記事では、VSCodeのポート転送機能の使い方を、初心者の方にもわかりやすく解説します。

スポンサーリンク
  1. VSCodeのポート転送とは
    1. なぜポート転送が必要？
    2. VSCodeポート転送の仕組み
    3. いつから使える？
  2. ポート転送を使う準備
    1. 必要なもの
    2. GitHubアカウントでログイン
  3. ポート転送の基本的な使い方
    1. 手順1：ローカルサーバーを起動
    2. 手順2：PORTSパネルを開く
    3. 手順3：ポート番号を入力
    4. 手順4：GitHub認証（初回のみ）
    5. 手順5：外部URLを取得
    6. 手順6：外部URLにアクセス
  4. 公開範囲の設定（Private / Public）
    1. Private（プライベート）
    2. Public（パブリック）
    3. 公開範囲の変更方法
  5. 便利な機能
    1. ポートにラベルをつける
    2. ポート転送を停止する
    3. ブラウザで直接開く
    4. 自動的にポート転送する
  6. よくある使い方シーン
    1. シーン1：スマホで表示確認
    2. シーン2：デザイナーに確認してもらう
    3. シーン3：チームレビュー
    4. シーン4：フロントエンドとバックエンドを同時に公開
  7. Remote SSHでのポート転送
    1. 使い方
  8. WSL（Windows Subsystem for Linux）での使い方
    1. 基本的な流れ
  9. 注意点とセキュリティ
    1. セキュリティリスク
    2. VSCodeを閉じたらアクセスできなくなる
    3. 長時間の公開には向かない
  10. トラブルシューティング
    1. Q1. PORTSタブが表示されない
    2. Q2. 「Forward a Port」ボタンが押せない
    3. Q3. URLにアクセスしても表示されない
    4. Q4. 「Too many redirects」エラーが出る
    5. Q5. スマホからアクセスできない
    6. Q6. 複数のポートを同時に転送できる？
    7. Q7. 転送したポートのURLを変更できる？
    8. Q8. ポート転送に料金はかかる？
    9. Q9. ngrokとの違いは？
    10. Q10. ポート転送が遅い
  11. まとめ：ポート転送を活用しよう！

VSCodeのポート転送とは

ポート転送（Port Forwarding）とは、ローカル環境（あなたのパソコン）で動いているサーバーを、インターネット経由で外部からアクセスできるようにする機能です。

なぜポート転送が必要？

通常、ローカルで開発しているWebサイトやアプリケーションは、localhost（127.0.0.1）でしかアクセスできません。

つまり、あなたのパソコンからしか見られないんです。

でも、こんなシーンで困りますよね。

困るシーン：

  • スマホでの表示を確認したい
  • デザイナーやクライアントに開発中の画面を見せたい
  • チームメンバーとレビューしたい
  • 外出先から自宅の開発環境にアクセスしたい

ポート転送を使えば：

  • 外部からアクセス可能なURLが発行される
  • そのURLを共有するだけで、誰でもアクセスできる
  • ngrokなどの外部サービスを使わなくてもOK

VSCodeポート転送の仕組み

VSCodeのポート転送は、GitHubのサーバーを経由してトンネルを作成します。

流れ：

  1. あなたのパソコンでlocalhost:3000でサーバーを起動
  2. VSCodeのポート転送機能で3000番ポートを転送
  3. https://xxx.tunnel.vscode.devのような外部URLが発行される
  4. このURLにアクセスすると、GitHubサーバー経由であなたのローカルサーバーに届く

安全に外部公開できるように、GitHubアカウントで認証されます。

いつから使える？

この機能は、VSCode version 1.82（2023年9月リリース）から標準搭載されています。

最新版のVSCodeを使っていれば、誰でも無料で使えます。

ポート転送を使う準備

必要なもの

  1. VSCode version 1.82以降
  2. GitHubアカウント（無料で作成可能）

GitHubアカウントでログイン

ポート転送機能を使うには、VSCodeでGitHubアカウントにログインする必要があります。

ログイン方法：

  1. VSCode左下のアカウントアイコン（人型アイコン）をクリック
  2. 「GitHubでサインイン」を選択
  3. ブラウザが開くので、GitHubの認証画面で許可

これで準備完了です。

ポート転送の基本的な使い方

実際にポート転送を使ってみましょう。

手順1：ローカルサーバーを起動

まず、ローカルでWebサーバーを起動します。

例1：Live Serverを使う場合

VSCodeの拡張機能「Live Server」をインストールしている場合：

  1. HTMLファイルを開く
  2. 右下の「Go Live」ボタンをクリック
  3. ブラウザでlocalhost:5500が開く

例2：Node.jsサーバーを起動

# Reactアプリの場合
npm start
# ブラウザでlocalhost:3000が開く

# Next.jsの場合
npm run dev
# ブラウザでlocalhost:3000が開く

# Expressサーバーの場合
node server.js
# ターミナルに"Server running on port 3000"と表示

例3：Pythonの簡易サーバー

python -m http.server 8000
# ブラウザでlocalhost:8000にアクセス

どの方法でもOKです。まずはローカルでサーバーが動いていることを確認してください。

手順2：PORTSパネルを開く

VSCodeの画面下部（パネル）を見てください。

「ターミナル」「問題」などのタブの中に、「PORTS」（または「ポート」）というタブがあります。

開き方：

方法1：タブをクリック

  • パネル下部の「PORTS」タブをクリック

方法2：ショートカットキー

  • パネルが表示されていない場合は、Ctrl + J（MacはCmd + J）でパネルを開く
  • その後、「PORTS」タブをクリック

方法3：ステータスバーから

  • 画面右下のステータスバーにある「電波塔のようなアイコン」をクリック

手順3：ポート番号を入力

PORTSパネルを開くと、「Forward a Port」というボタンが表示されています。

操作：

  1. 「Forward a Port」ボタンをクリック
  2. 画面上部にポート番号の入力欄が表示される
  3. サーバーが動いているポート番号を入力（例：3000）
  4. Enterキーを押す

手順4：GitHub認証（初回のみ）

初めて使う場合は、ブラウザが開いてGitHub認証画面が表示されます。

表示されるメッセージ：
「次の場所の開発者用トンネルに接続しようとしています」

操作：

  1. 内容を確認
  2. 「Allow」または「続行」をクリック

これで、GitHubサーバー経由でポート転送が有効になります。

手順5：外部URLを取得

認証が完了すると、PORTSパネルに転送されたポート情報が表示されます。

表示される情報：

  • Port：ポート番号（例：3000）
  • Local Address：ローカルアドレス（localhost:3000）
  • Forwarded Address：外部URLアドレス（例：https://xxx-3000.tunnel.vscode.dev）
  • Visibility：公開範囲（Private または Public）

手順6：外部URLにアクセス

Forwarded Addressに表示されているURLをコピーして、ブラウザでアクセスしてみましょう。

初回アクセス時：

警告画面が表示されます。

「次の場所の開発者用トンネルに接続しようとしています」

操作：
「続行」ボタンをクリック

これで、ローカルで動いているサーバーに外部からアクセスできます！

公開範囲の設定（Private / Public）

デフォルトでは、転送されたポートはPrivate（プライベート）に設定されています。

Private（プライベート）

特徴：

  • GitHubアカウントにログインしないとアクセスできない
  • あなたのGitHubアカウントでログインした人だけが見られる

使いどころ：

  • セキュリティを重視したい
  • 限定されたメンバーとだけ共有したい

Public（パブリック）

特徴：

  • GitHubログインなしで誰でもアクセスできる
  • URLを知っていれば誰でも見られる

使いどころ：

  • デザイナーやクライアントに見せたい（GitHubアカウントを持っていない人）
  • スマホで確認したい
  • 幅広い人に共有したい

公開範囲の変更方法

手順：

  1. PORTSパネルで、変更したいポートを右クリック
  2. 「Port Visibility」→「Public」を選択

または

  1. 「Visibility」列をクリック
  2. 「Public」に変更

これで、誰でもアクセスできるようになります。

便利な機能

ポートにラベルをつける

複数のポートを転送している場合、ラベルをつけると管理しやすくなります。

手順：

  1. PORTSパネルで、ラベルをつけたいポートを右クリック
  2. 「Set Port Label」を選択
  3. ラベル名を入力（例：「フロントエンド」「API サーバー」）
  4. Enterキーを押す

ポート転送を停止する

転送を停止したい場合は、簡単に削除できます。

手順：

  1. PORTSパネルで、停止したいポート上で右クリック
  2. 「Stop Forwarding Port」を選択

または

  1. ポートを選択
  2. PORTSパネル右上の「ゴミ箱アイコン」をクリック

VSCodeを閉じても、自動的に転送は停止されます。

ブラウザで直接開く

転送したURLを、VSCodeから直接ブラウザで開けます。

手順：

  1. PORTSパネルで、開きたいポート上で右クリック
  2. 「Open in Browser」を選択

自動的にポート転送する

毎回同じポートを使う場合、自動的に転送するように設定できます。

手順：

  1. プロジェクトのルートに.vscodeフォルダを作成（なければ）
  2. .vscode/settings.jsonを開く（または作成）
  3. 以下を追加：
{
  "remote.autoForwardPorts": true,
  "remote.portsAttributes": {
    "3000": {
      "label": "フロントエンド",
      "onAutoForward": "notify"
    },
    "8000": {
      "label": "バックエンド",
      "onAutoForward": "openBrowser"
    }
  }
}

これで、サーバーを起動すると自動的にポート転送が開始されます。

よくある使い方シーン

シーン1：スマホで表示確認

手順：

  1. PCでローカルサーバーを起動
  2. VSCodeでポート転送を設定（Publicに）
  3. 発行されたURLをスマホのブラウザで開く

レスポンシブデザインの確認に便利です。

シーン2：デザイナーに確認してもらう

手順：

  1. VSCodeでポート転送を設定（Publicに）
  2. 発行されたURLをSlackやメールで共有
  3. デザイナーがブラウザでURLにアクセス

GitHubアカウントがなくても、URLだけで見てもらえます。

シーン3：チームレビュー

手順：

  1. VSCodeでポート転送を設定（Privateのまま）
  2. URLを共有（チームメンバーはGitHubアカウントでログイン）
  3. 全員で同じ開発環境を確認

セキュリティを保ちつつ、レビューできます。

シーン4：フロントエンドとバックエンドを同時に公開

手順：

  1. フロントエンドサーバーを起動（localhost:3000）
  2. バックエンドAPIサーバーを起動（localhost:8000）
  3. 両方のポートを転送
  4. それぞれのURLでアクセス

複数のサーバーを同時に公開できます。

Remote SSHでのポート転送

VSCodeのRemote SSH機能を使っている場合も、ポート転送が使えます。

使い方

リモートサーバーに接続している状態で、通常と同じ手順でポート転送を設定できます。

自動転送：

Remote SSH接続中は、リモートサーバーでサーバーを起動すると、VSCodeが自動的に検知してポート転送してくれます。

手動で追加：

  1. Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開く
  2. 「Forward a Port」と入力
  3. ポート番号を入力

リモートサーバーのポートが、あなたのローカル環境に転送されます。

WSL（Windows Subsystem for Linux）での使い方

WSLで開発している場合も、ポート転送が使えます。

基本的な流れ

  1. WSL内でサーバーを起動
  2. WSL側では自動的にWindowsホストにポートが転送される
  3. Windows側のVSCodeで「ポートの転送」を実行
  4. 外部URLが発行される

WSLを使っている場合、2段階のポート転送になりますが、操作は同じです。

注意点とセキュリティ

セキュリティリスク

ポート転送は便利ですが、セキュリティリスクもあります。

リスク：

  • 外部にサーバーが公開される
  • URLを知っている人がアクセスできる（Publicの場合）
  • 機密情報が漏れる可能性

対策：

  • 本番環境のデータは使わない
  • 開発用のテストデータを使う
  • 必要がなくなったらすぐに転送を停止する
  • Publicは慎重に使う（基本はPrivateで）

VSCodeを閉じたらアクセスできなくなる

ポート転送は、VSCodeが起動している間だけ有効です。

VSCodeを閉じると、外部URLにアクセスできなくなります。

一時的な確認用として使いましょう。

長時間の公開には向かない

ポート転送は、あくまで一時的な確認・共有用です。

長時間公開したい場合は、以下を検討してください。

  • Vercel、Netlifyなどのホスティングサービス
  • Heroku、AWSなどのクラウドサービス
  • Docker、クラウドのテスト環境

トラブルシューティング

Q1. PORTSタブが表示されない

A: VSCodeのバージョンが古い可能性があります。

確認方法：

  1. メニューから「ヘルプ」→「バージョン情報」
  2. version 1.82以降かチェック

古い場合は、VSCodeを最新版にアップデートしてください。

Q2. 「Forward a Port」ボタンが押せない

A: GitHubアカウントでログインしているか確認してください。

左下のアカウントアイコンから、GitHubでサインインしてください。

Q3. URLにアクセスしても表示されない

A: 以下を確認してください。

  1. ローカルサーバーが起動しているか
  2. ポート番号が正しいか
  3. VSCodeが起動しているか
  4. 公開範囲が正しいか（Publicにしたか）

Q4. 「Too many redirects」エラーが出る

A: ブラウザのキャッシュをクリアしてみてください。

または、シークレットモード（プライベートブラウジング）で試してみてください。

Q5. スマホからアクセスできない

A: 公開範囲がPublicになっているか確認してください。

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

Q6. 複数のポートを同時に転送できる？

A: はい、できます。

「Forward a Port」を複数回実行すれば、複数のポートを同時に転送できます。

Q7. 転送したポートのURLを変更できる？

A: いいえ、URLは自動生成されます。

カスタムURLは設定できません。

Q8. ポート転送に料金はかかる？

A: いいえ、完全無料です。

VSCodeとGitHubアカウントがあれば、追加費用なしで使えます。

Q9. ngrokとの違いは？

A: 主な違い：

VSCodeポート転送：

  • VSCode標準機能
  • 無料
  • GitHubアカウントが必要
  • VSCodeから簡単に操作

ngrok：

  • 独立したツール
  • 無料プラン・有料プランあり
  • カスタムドメイン設定可能（有料）
  • より柔軟な設定が可能

簡単な確認ならVSCodeポート転送で十分です。

Q10. ポート転送が遅い

A: GitHubサーバーを経由するため、多少のレイテンシ（遅延）があります。

ローカルで確認するよりは遅くなることを理解しておきましょう。

まとめ：ポート転送を活用しよう！

VSCodeのポート転送機能についてまとめます。

ポート転送とは：

  • ローカルサーバーを外部からアクセスできるようにする機能
  • GitHubサーバー経由でトンネルを作成
  • VSCode version 1.82から標準搭載

基本的な使い方：

  1. GitHubアカウントでログイン
  2. ローカルサーバーを起動
  3. PORTSパネルで「Forward a Port」をクリック
  4. ポート番号を入力
  5. 外部URLが発行される

公開範囲：

  • Private：GitHubログインが必要（安全）
  • Public：誰でもアクセス可能（便利だけど注意）

よく使うシーン：

  • スマホでの表示確認
  • デザイナーやクライアントへの共有
  • チームレビュー
  • リモート開発環境での作業

注意点：

  • セキュリティリスクに注意
  • あくまで一時的な確認用
  • VSCodeを閉じるとアクセスできなくなる
  • 機密情報は公開しない

メリット：

  • 外部ツール不要
  • 無料
  • 設定が簡単
  • VSCodeから直接操作できる

ポート転送機能を使えば、ngrokなどの外部サービスを使わずに、簡単にローカルサーバーを外部公開できます。

特に、スマホでの表示確認やチームメンバーとの共有に便利です。

ぜひ、この記事を参考に、VSCodeのポート転送機能を活用してみてください！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました