Skip to main content
ドキュメントへの更新が頻繁に発行されており、このページの翻訳はまだ行われている場合があります。 最新の情報については、「英語のドキュメント」を参照してください。

codespace でのポートの転送

アプリケーションのテストとデバッグのために、codespace中のポートをフォワードできます。 また、ポート プロトコルを管理し、組織内またはパブリックにポートを共有することもできます。

メモ: JetBrains IDE での GitHub Codespaces の使用は現在、パブリック ベータ版であり、変更される場合があります。

転送されるポートについて

ポート転送を使用すると、Codespaces 内で実行されている TCP ポートにアクセスできます。 たとえば、codespace の特定のポートで Web アプリケーションを実行している場合は、そのポートを転送できます。 これにより、テストやデバッグのために、ローカル コンピューター上のブラウザーからアプリケーションにアクセスできます。

codespace 内で実行されているアプリケーションが、localhost URL (http://localhost:PORThttp://127.0.0.1:PORT など) を含むターミナルに出力すると、ポートが自動的に転送されます。 ブラウザーまたは Visual Studio Code で GitHub Codespaces を使用している場合、ターミナルの URL 文字列はリンクに変換され、それをクリックするとローカル コンピューターで Web ページを表示できます。 既定では、GitHub Codespaces は HTTP を使ってポートを転送します。

自動ポート転送

また、ポートの手動転送、転送されるポートへのラベル付け、Organization のメンバーとの転送されるポートの共有、転送されるポートのパブリックな共有、codespace の構成への転送されるポートの追加などを行うこともできます。

: 組織の所有者は、転送ポートを公開し組織内で使用できるようにする機能を制限できます。 詳細については、「転送されたポートの可視性の制限」を参照してください。

ポートの転送

自動的に転送されなかったポートを手動で転送できます。 1. codespace でターミナルを開きます。

  1. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  2. ポートの一覧で、 [ポートの追加] をクリックします。

    [ポートの追加] ボタンのスクリーンショット

  3. ポート番号またはアドレスを入力し、Enter キーを押します。

    ポート番号の入力のスクリーンショット

HTTPS 転送の使用

既定では、GitHub Codespaces は HTTP を使ってポートを転送しますが、必要に応じて、HTTPS を使うように任意のポートを更新できます。 パブリック表示を使ってポートを HTTPS を使えるように更新すると、ポートの表示は自動的にプライベートに変更されます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. 更新するポートを右クリックし、 [ポートのプロトコルの変更] をポイントします。

    ポートのプロトコルを変更するオプションのスクリーンショット

  4. このポートに必要なプロトコルを選択します。 選択したプロトコルは、codespace の有効期間中、このポートに対して記憶されます。

ポートの共有

注: Organization が GitHub Team または GitHub Enterprise Cloud を使用している場合にのみ、ポートを Organization に対してプライベートにすることができます。

転送されるポートを他のユーザーと共有する場合は、ポートを Organization に対してプライベートにするか、ポートをパブリックにすることができます。 ポートを Organization に対してプライベートにすると、そのポートの URL がわかっている組織内のすべてのユーザーが、実行中のアプリケーションを表示できます。 ポートをパブリックにすると、URL とポート番号を知っているすべてのユーザーが、認証を必要とせずに、実行中のアプリケーションを表示できます。

注: ポートの可視性オプションの選択は、Organization 用に構成されたポリシーによって制限される場合があります。 詳細については、「転送されるポートの可視性の制限」を参照してください。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. 共有するポートを右クリックし、 [ポートの可視性] をクリックしてから、 [Organization にプライベート] または [パブリック] をクリックします。

    右クリック メニューの [ポートの可視性] オプションのスクリーンショット

  4. ポートのローカル アドレスの右側にあるコピー アイコンをクリックします。

    ポートの URL のコピー アイコンのスクリーンショット

  5. コピーした URL を、ポートを共有するユーザーに送信します。

コマンド ライン ツールと REST クライアントを使用してポートにアクセスする

ポートを転送すると、https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-4000.preview.app.github.dev のような URL でアプリケーションを使えるようになります。 VS Code デスクトップ アプリケーションからプライベート ポートを転送した場合、アプリケーションは 127.0.0.1:4000 のような localhost ポートでも使えるようになります。

Postman などの REST クライアントや curl などのコマンド ライン ツールを使ってアプリケーションにアクセスするとき、localhost ポートを使っている場合、またはリモート ドメインのパブリック ポートにアクセスしている場合は、認証を行う必要はありません。 ただし、リモート ドメインでプライベート ポートに接続するには、要求で GITHUB_TOKEN アクセス トークンを使って認証を行う必要があります。

: GITHUB_TOKEN は、codespace を開始するときに自動的に作成され、codespace セッションの期間を通じて変わりません。 codespace を停止してから再起動すると、新しい GITHUB_TOKEN が生成されます。

### 接続先のアドレスを見つける
  1. codespace でターミナルを開きます。

  2. [ポート] タブをクリックします。これにより、転送したすべてのポートの一覧が表示されます。

  3. 接続するポートを右クリックし、 [ローカル アドレスのコピー] をクリックします。

    右クリック メニューの [ローカル アドレスのコピー] のスクリーンショット

  4. 後で使うため、コピーしたアドレスをどこかに貼り付けます。

GITHUB_TOKEN を見つける

  1. codespace のターミナルで、「echo $GITHUB_TOKEN」と入力します。

    トークンは、ghu_ で始まる文字列です。

  2. トークンをコピーします。

    重要: このアクセス トークンを誰とも共有しないでください。

    ### curl を使用して転送されたポートにアクセスする

ローカル コンピューターのターミナルで、次のように入力します。

curl ADDRESS -H "X-Github-Token: TOKEN"

ADDRESSTOKEN は、前にコピーした値に置き換えます。

Postman を使用して転送されたポートにアクセスする

  1. Postman を開きます。

  2. 新しい GET 要求を作成します。

  3. 前にコピーしたアドレスを要求 URL として貼り付けます。

    Postman に貼り付けた URL のスクリーンショット

  4. [ヘッダー] タブで、キーとして "X-Github-Token"、値として前にコピーした GITHUB_TOKEN を指定して、新しいエントリを作成します。

    Postman でのキーとトークンのスクリーンショット

  5. [送信] をクリックします。 ## ポートのラベル付け

ブラウザーまたは VS Code デスクトップ アプリケーションで codespace を開くと、転送されたポートにラベルを付けて、リストで識別しやすくすることができます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. ラベルを付けるポートをポイントして、ラベル アイコンをクリックします。 ポートのラベル アイコン 1. ポートのラベルを入力し、Enterを押してください。 ポートのラベルを入力するためのテキスト ボックス ## codespace 構成へのポートの追加

転送されるポートをリポジトリの GitHub Codespaces 構成に追加し、リポジトリから作成されるすべての codespace でポートが自動的に転送されるようにすることができます。 変更を適用するには、構成を更新した後、以前に作成した codespace をリビルドする必要があります。 詳細については、開発コンテナーの概要に関するページをご覧ください。

forwardPorts プロパティを使用して .devcontainer.json ファイル内の転送ポートを手動で構成することも、ブラウザーまたは VS Code デスクトップ アプリケーションで開いた codespace の [ポート] パネルを使用することもできます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. codespace の構成に追加するポートを右クリックして、 [ラベルを設定して devcontainer.json を更新する] をクリックします。 右クリック メニューでラベルを設定し devcontainer.json にポートを追加するオプション 1. ポートのラベルを入力し、Enterを押してください。 ポートのラベルを入力するためのテキスト ボックス

codespace 内で実行されているアプリケーションが、localhost URL (http://localhost:PORThttp://127.0.0.1:PORT など) を含むターミナルに出力すると、ポートが自動的に転送されます。 ブラウザーまたは Visual Studio Code で GitHub Codespaces を使用している場合、ターミナルの URL 文字列はリンクに変換され、それをクリックするとローカル コンピューターで Web ページを表示できます。 既定では、GitHub Codespaces は HTTP を使ってポートを転送します。

自動ポート転送

また、ポートの手動転送、転送されるポートへのラベル付け、Organization のメンバーとの転送されるポートの共有、転送されるポートのパブリックな共有、codespace の構成への転送されるポートの追加などを行うこともできます。

: 組織の所有者は、転送ポートを公開し組織内で使用できるようにする機能を制限できます。 詳細については、「転送されたポートの可視性の制限」を参照してください。

ポートの転送

自動的に転送されなかったポートを手動で転送できます。 1. codespace でターミナルを開きます。

  1. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  2. ポートの一覧で、 [ポートの追加] をクリックします。

    [ポートの追加] ボタンのスクリーンショット

  3. ポート番号またはアドレスを入力し、Enter キーを押します。

    ポート番号の入力のスクリーンショット

ポートの共有

注: Organization が GitHub Team または GitHub Enterprise Cloud を使用している場合にのみ、ポートを Organization に対してプライベートにすることができます。

転送されるポートを他のユーザーと共有する場合は、ポートを Organization に対してプライベートにするか、ポートをパブリックにすることができます。 ポートを Organization に対してプライベートにすると、そのポートの URL がわかっている組織内のすべてのユーザーが、実行中のアプリケーションを表示できます。 ポートをパブリックにすると、URL とポート番号を知っているすべてのユーザーが、認証を必要とせずに、実行中のアプリケーションを表示できます。

注: ポートの可視性オプションの選択は、Organization 用に構成されたポリシーによって制限される場合があります。 詳細については、「転送されるポートの可視性の制限」を参照してください。

1. codespace でターミナルを開きます。 1. **[ポート]** タブをクリックします。

[ポート] タブのスクリーンショット

  1. 共有するポートを右クリックし、 [ポートの可視性] をクリックしてから、 [Organization にプライベート] または [パブリック] をクリックします。

    ポートをパブリックにする、右クリック メニューのオプションのスクリーンショット

  2. ポートのローカル アドレスの右側にあるコピー アイコンをクリックします。

    ポートの URL のコピー アイコンのスクリーンショット

  3. コピーした URL を、ポートを共有するユーザーに送信します。

コマンド ライン ツールと REST クライアントを使用してポートにアクセスする

ポートを転送すると、https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-4000.preview.app.github.dev のような URL でアプリケーションを使えるようになります。 VS Code デスクトップ アプリケーションからプライベート ポートを転送した場合、アプリケーションは 127.0.0.1:4000 のような localhost ポートでも使えるようになります。

Postman などの REST クライアントや curl などのコマンド ライン ツールを使ってアプリケーションにアクセスするとき、localhost ポートを使っている場合、またはリモート ドメインのパブリック ポートにアクセスしている場合は、認証を行う必要はありません。 ただし、リモート ドメインでプライベート ポートに接続するには、要求で GITHUB_TOKEN アクセス トークンを使って認証を行う必要があります。

: GITHUB_TOKEN は、codespace を開始するときに自動的に作成され、codespace セッションの期間を通じて変わりません。 codespace を停止してから再起動すると、新しい GITHUB_TOKEN が生成されます。

### 接続先のアドレスを見つける
  1. codespace でターミナルを開きます。

  2. [ポート] タブをクリックします。これにより、転送したすべてのポートの一覧が表示されます。

  3. 接続するポートを右クリックし、 [ローカル アドレスのコピー] をクリックします。

    右クリック メニューの [ローカル アドレスのコピー] のスクリーンショット

  4. 後で使うため、コピーしたアドレスをどこかに貼り付けます。

GITHUB_TOKEN を見つける

  1. codespace のターミナルで、「echo $GITHUB_TOKEN」と入力します。

    トークンは、ghu_ で始まる文字列です。

  2. トークンをコピーします。

    重要: このアクセス トークンを誰とも共有しないでください。

    ### curl を使用して転送されたポートにアクセスする

ローカル コンピューターのターミナルで、次のように入力します。

curl ADDRESS -H "X-Github-Token: TOKEN"

ADDRESSTOKEN は、前にコピーした値に置き換えます。

Postman を使用して転送されたポートにアクセスする

  1. Postman を開きます。

  2. 新しい GET 要求を作成します。

  3. 前にコピーしたアドレスを要求 URL として貼り付けます。

    Postman に貼り付けた URL のスクリーンショット

  4. [ヘッダー] タブで、キーとして "X-Github-Token"、値として前にコピーした GITHUB_TOKEN を指定して、新しいエントリを作成します。

    Postman でのキーとトークンのスクリーンショット

  5. [送信] をクリックします。 ## ポートのラベル付け

ブラウザーまたは VS Code デスクトップ アプリケーションで codespace を開くと、転送されたポートにラベルを付けて、リストで識別しやすくすることができます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. ラベルを付けるポートをポイントして、ラベル アイコンをクリックします。 ポートのラベル アイコン 1. ポートのラベルを入力し、Enterを押してください。 ポートのラベルを入力するためのテキスト ボックス ## codespace 構成へのポートの追加

転送されるポートをリポジトリの GitHub Codespaces 構成に追加し、リポジトリから作成されるすべての codespace でポートが自動的に転送されるようにすることができます。 変更を適用するには、構成を更新した後、以前に作成した codespace をリビルドする必要があります。 詳細については、開発コンテナーの概要に関するページをご覧ください。

forwardPorts プロパティを使用して .devcontainer.json ファイル内の転送ポートを手動で構成することも、ブラウザーまたは VS Code デスクトップ アプリケーションで開いた codespace の [ポート] パネルを使用することもできます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. codespace の構成に追加するポートを右クリックして、 [ラベルを設定して devcontainer.json を更新する] をクリックします。 右クリック メニューでラベルを設定し devcontainer.json にポートを追加するオプション 1. ポートのラベルを入力し、Enterを押してください。 ポートのラベルを入力するためのテキスト ボックス

GitHub CLI の詳細については、「GitHub CLI について」を参照してください。

ポートを転送するには、gh codespace ports forward サブコマンドを使用します。 codespace-port:local-port を、接続するリモート ポートとローカル ポートに置き換えます。 コマンドを入力した後、表示される codespace の一覧から選択します。

gh codespace ports forward CODESPACE-PORT:LOCAL-PORT

このコマンドの詳細については、GitHub CLI に関するマニュアルを参照してください。

転送されるポートの詳細を表示するには、gh codespace ports を入力して codespace を選択します。

ポートの共有

注: Organization が GitHub Team または GitHub Enterprise Cloud を使用している場合にのみ、ポートを Organization に対してプライベートにすることができます。

転送されるポートを他のユーザーと共有する場合は、ポートを Organization に対してプライベートにするか、ポートをパブリックにすることができます。 ポートを Organization に対してプライベートにすると、そのポートの URL がわかっている組織内のすべてのユーザーが、実行中のアプリケーションを表示できます。 ポートをパブリックにすると、URL とポート番号を知っているすべてのユーザーが、認証を必要とせずに、実行中のアプリケーションを表示できます。

注: ポートの可視性オプションの選択は、Organization 用に構成されたポリシーによって制限される場合があります。 詳細については、「転送されるポートの可視性の制限」を参照してください。

転送されるポートの可視性を変更するには、gh codespace ports visibility サブコマンドを使用します。 3 種類の可視性の設定があります。

  • private - 自分にのみ表示されます。 これはポートを転送するときの既定の設定です。
  • org - リポジトリを所有する組織のメンバーに表示されます。
  • public - URL とポート番号を知っているすべてのユーザーに表示されます。

codespace-port を、転送されるポート番号に置き換えます。 setting を、privateorg、または public に置き換えます。 コマンドを入力した後、表示される codespace の一覧から選択します。

gh codespace ports visibility CODESPACE-PORT:SETTINGS

1 つのコマンドを使用して、複数のポートの可視性を設定できます。 次に例を示します。

gh codespace ports visibility 80:private 3000:public 3306:org

このコマンドの詳細については、GitHub CLI に関するマニュアルを参照してください。

コマンド ライン ツールと REST クライアントを使用してポートにアクセスする

ポートを転送すると、https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-4000.preview.app.github.dev のような URL でアプリケーションを使えるようになります。 VS Code デスクトップ アプリケーションからプライベート ポートを転送した場合、アプリケーションは 127.0.0.1:4000 のような localhost ポートでも使えるようになります。

Postman などの REST クライアントや curl などのコマンド ライン ツールを使ってアプリケーションにアクセスするとき、localhost ポートを使っている場合、またはリモート ドメインのパブリック ポートにアクセスしている場合は、認証を行う必要はありません。 ただし、リモート ドメインでプライベート ポートに接続するには、要求で GITHUB_TOKEN アクセス トークンを使って認証を行う必要があります。

: GITHUB_TOKEN は、codespace を開始するときに自動的に作成され、codespace セッションの期間を通じて変わりません。 codespace を停止してから再起動すると、新しい GITHUB_TOKEN が生成されます。

接続先のアドレスを見つける

転送されたポートのアドレスを見つけるには、「gh codespace ports」と入力します。 複数の codespace がある場合は、表示される一覧から適切な codespace を選びます。

後で使うため、アドレスをコピーしてどこかに貼り付けます。

GITHUB_TOKEN を見つける

  1. codespace の SSH セッションを開始します。

    gh codespace ssh
    
  2. 複数の codespace がある場合は、表示される一覧から適切な codespace を選びます。

  3. GITHUB_TOKEN を表示します。

    echo $GITHUB_TOKEN
    

    トークンは、ghu_ で始まる文字列です。

  4. トークンをコピーします。

    重要: このアクセス トークンを誰とも共有しないでください。

  5. SSH セッションを終了します。

    exit
    

curl を使用して転送されたポートにアクセスする

ローカル コンピューターのターミナルで、次のように入力します。

curl ADDRESS -H "X-Github-Token: TOKEN"

ADDRESSTOKEN は、前にコピーした値に置き換えます。

Postman を使用して転送されたポートにアクセスする

  1. Postman を開きます。

  2. 新しい GET 要求を作成します。

  3. 前にコピーしたアドレスを要求 URL として貼り付けます。

    Postman に貼り付けた URL のスクリーンショット

  4. [ヘッダー] タブで、キーとして "X-Github-Token"、値として前にコピーした GITHUB_TOKEN を指定して、新しいエントリを作成します。

    Postman でのキーとトークンのスクリーンショット

  5. [送信] をクリックします。 ## ポートのラベル付け

ブラウザーまたは VS Code デスクトップ アプリケーションで codespace を開くと、転送されたポートにラベルを付けて、リストで識別しやすくすることができます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. ラベルを付けるポートをポイントして、ラベル アイコンをクリックします。 ポートのラベル アイコン 1. ポートのラベルを入力し、Enterを押してください。 ポートのラベルを入力するためのテキスト ボックス

codespace の転送されたポートを一覧表示するとき、ポート ラベルを表示できます。 これを行うには、gh codespace ports コマンドを使用し、codespace を選択します。

codespace 構成へのポートの追加

転送されるポートをリポジトリの GitHub Codespaces 構成に追加し、リポジトリから作成されるすべての codespace でポートが自動的に転送されるようにすることができます。 変更を適用するには、構成を更新した後、以前に作成した codespace をリビルドする必要があります。 詳細については、開発コンテナーの概要に関するページをご覧ください。

forwardPorts プロパティを使用して .devcontainer.json ファイル内の転送ポートを手動で構成することも、ブラウザーまたは VS Code デスクトップ アプリケーションで開いた codespace の [ポート] パネルを使用することもできます。

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

  2. [ポート] タブをクリックします。

    [ポート] タブのスクリーンショット

  3. codespace の構成に追加するポートを右クリックして、 [ラベルを設定して devcontainer.json を更新する] をクリックします。 右クリック メニューでラベルを設定し devcontainer.json にポートを追加するオプション 1. ポートのラベルを入力し、Enterを押してください。 ポートのラベルを入力するためのテキスト ボックス

ポートの転送

ローカル コンピューターのポートに codespace のポートを転送する方法については、JetBrains ドキュメントの「セキュリティ モデル」という記事の「ポート転送」を参照してください。

あるいは、GitHub CLI を使用してポートを転送できます。 詳細については、このページの上部にある [GitHub CLI] タブをクリックしてください。