Skip to main content

GitHub Codespaces クライアントのトラブルシューティング

この記事では、GitHub Codespaces に使用するクライアントで発生する可能性がある issue のトラブルシューティング情報を提供します。

Visual Studio Code Web クライアントのトラブルシューティング

Chromium ベース以外のブラウザーで GitHub Codespaces を使用しているときに issue が発生した場合は、Google Chrome や Microsoft Edge などの Chromium ベースのブラウザーに切り替えてみてください。 また、firefoxsafari など、お使いのブラウザー名のラベルが付いた issue を検索して、microsoft/vscode リポジトリで、お使いのブラウザーに関する既知の issue を確認してください。

Chromium ベースのブラウザーで GitHub Codespaces を使用しているときに issue が発生した場合は、microsoft/vscode リポジトリで、VS Code に関する別の既知の issue が発生しているかどうかを確認できます。

ローカルでの VS Code 内の作業との相違

ブラウザーで VS Code Web クライアントを使用して codespace を開くと、VS Code デスクトップ アプリケーションのローカル ワークスペースで作業する場合といくつか違いがあることに気付くでしょう。 たとえば、一部のキー バインドは異なるか、見つからないか、一部の拡張機能の動作が異なる場合があります。 概要については、VS Code のドキュメントの「既知の制限事項と対応」をご覧ください。

microsoft/vscode リポジトリの VS Code エクスペリエンスを使用して、既知の issue を確認し、新しい issue をログすることができます。

Visual Studio Code Insiders

Visual Studio Code Insiders は、最も頻繁にリリースが行われる VS Code です。 最新の機能とバグ修正がすべて含まれていますが、ビルドが壊れる原因になる新しい問題が含まれる場合もあります。

Insiders ビルドを使用していて正しくない動作に気づいた場合は、Visual Studio Code Stable に切り替えてもう一度やり直してみることをお勧めします。

エディターの左下隅にある をクリックし、 [安定バージョンへの切り替え...] を選択します。VS Code Web クライアントが読み込まれないか、 が利用できない場合、?vscodeChannel=stable を codespace URL に追加し、その URL の codespace を読み込むことで、Visual Studio Code Stable 版に強制的に切り替えることができます。

Visual Studio Code Stable で問題が修正されない場合、既知の issue を確認し、必要に応じて、VS Code エクスペリエンスに関する新しい issue をmicrosoft/vscode リポジトリにログします。

簡易ブラウザーのトラブルシューティング

codespace で Web アプリケーションを開始したら、VS Code に埋め込まれた簡易ブラウザーで実行中のアプリケーションをプレビューできます。 一部のプロジェクトでは、アプリケーションの起動時に、エディターの [簡易ブラウザー] タブでアプリケーションが自動的に開きます。 これは、codespace の devcontainer.json 構成ファイルで、アプリケーションが実行するポートの onAutoForward プロパティが openPreview に設定されている場合に発生します。

"portsAttributes": {
  "3000": {
    "label": "Application",
    "onAutoForward": "openPreview"
  }
}

[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。

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

  2. ポートを右クリックし、 [エディターでプレビュー] をクリックします。

    VS Code の [ポート] タブのポップアップ メニューのスクリーンショット。メニュー エントリ [エディターでプレビュー] が濃いオレンジ色の枠線で強調されています。

簡易ブラウザー タブが自動的に開かない

devcontainer.json 構成ファイルでポートに "onAutoForward": "openPreview" が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。

devcontainer.json で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の settings.json ファイルに構成を書き込みます。 構成が codespace で settings.json に正しく書き込まれたことを確認できます。

  1. codespace のターミナルで、次のコマンドを入力します。

    Bash
    cat ~/.vscode-remote/data/Machine/settings.json
    
  2. settings.json ファイルに、次のような行が含まれていることを確認します。

     "remote.portsAttributes": {
         "3000": {
             "label": "Application",
             "onAutoForward": "openPreview"
         }
     }
    

settings.json ファイルにこれらの設定が含まれていない場合は、ドット ファイルが有効になっているかどうか、およびドット ファイル内の構成で settings.json ファイルが上書きされているかどうかを確認します。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」をご覧ください。

アプリケーションが読み込まれない

[簡易ブラウザー] タブが開き、実行中のアプリケーションではなくエラー ページ アイコンまたは空白ページが表示されることがあります。 これは、読み込む Web アプリケーションに、サイトのページが埋め込まれるドメインを制限するコンテンツ セキュリティ ポリシー (CSP) が含まれている場合に発生する可能性があります。 詳細については、MDN Web サイトの「CSP: frame-ancestors」を参照してください。

アプリケーションの frame-ancestors セキュリティ ポリシーをローカルで変更して、簡易ブラウザーにアプリケーションを表示できる場合があります。 または、frame-ancestors ポリシーによって問題が発生している場合は、簡易ブラウザーではなく、通常のブラウザー タブで開いてアプリケーションを表示する必要があります。 これを行うには、VS Code の [ポート] タブをクリックし、ポートを右クリックして、 [ブラウザーで開く] をクリックします。

VS Code のトラブルシューティング

VS Code デスクトップ アプリケーションで codespace を開くと、ローカル ワークスペースでの作業と比べていくつかの違いに気付くかもしれませんが、エクスペリエンスは似ているはずです。

問題が発生した場合、microsoft/vscode リポジトリの VS Code エクスペリエンスを使用して、既知の issue を確認し、新しい issue をログすることができます。

Visual Studio Code Insiders

Visual Studio Code Insiders は、最も頻繁にリリースが行われる VS Code です。 最新の機能とバグ修正がすべて含まれていますが、ビルドが壊れる原因になる新しい問題が含まれる場合もあります。

Insiders ビルドを使用していて正しくない動作に気づいた場合は、Visual Studio Code Stable に切り替えてもう一度やり直してみることをお勧めします。

Visual Studio Code Stable に切り替えるには、Visual Studio Code Insiders アプリケーションを閉じて、Visual Studio Code Stable アプリケーションを開き、codespace をもう一度開きます。

Visual Studio Code Stable で問題が修正されない場合、既知の issue を確認し、必要に応じて、VS Code エクスペリエンスに関する新しい issue をmicrosoft/vscode リポジトリにログします。

簡易ブラウザーのトラブルシューティング

codespace で Web アプリケーションを開始したら、VS Code に埋め込まれた簡易ブラウザーで実行中のアプリケーションをプレビューできます。 一部のプロジェクトでは、アプリケーションの起動時に、エディターの [簡易ブラウザー] タブでアプリケーションが自動的に開きます。 これは、codespace の devcontainer.json 構成ファイルで、アプリケーションが実行するポートの onAutoForward プロパティが openPreview に設定されている場合に発生します。

"portsAttributes": {
  "3000": {
    "label": "Application",
    "onAutoForward": "openPreview"
  }
}

[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。

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

  2. ポートを右クリックし、 [エディターでプレビュー] をクリックします。

    VS Code の [ポート] タブのポップアップ メニューのスクリーンショット。メニュー エントリ [エディターでプレビュー] が濃いオレンジ色の枠線で強調されています。

簡易ブラウザー タブが自動的に開かない

devcontainer.json 構成ファイルでポートに "onAutoForward": "openPreview" が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。

devcontainer.json で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の settings.json ファイルに構成を書き込みます。 構成が codespace で settings.json に正しく書き込まれたことを確認できます。

  1. codespace のターミナルで、次のコマンドを入力します。

    Bash
    cat ~/.vscode-remote/data/Machine/settings.json
    
  2. settings.json ファイルに、次のような行が含まれていることを確認します。

     "remote.portsAttributes": {
         "3000": {
             "label": "Application",
             "onAutoForward": "openPreview"
         }
     }
    

settings.json ファイルにこれらの設定が含まれていない場合は、ドット ファイルが有効になっているかどうか、およびドット ファイル内の構成で settings.json ファイルが上書きされているかどうかを確認します。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」をご覧ください。

アプリケーションが読み込まれない

[簡易ブラウザー] タブが開き、実行中のアプリケーションではなくエラー ページ アイコンまたは空白ページが表示されることがあります。 これは、読み込む Web アプリケーションに、サイトのページが埋め込まれるドメインを制限するコンテンツ セキュリティ ポリシー (CSP) が含まれている場合に発生する可能性があります。 詳細については、MDN Web サイトの「CSP: frame-ancestors」を参照してください。

アプリケーションの frame-ancestors セキュリティ ポリシーをローカルで変更して、簡易ブラウザーにアプリケーションを表示できる場合があります。 または、frame-ancestors ポリシーによって問題が発生している場合は、簡易ブラウザーではなく、通常のブラウザー タブで開いてアプリケーションを表示する必要があります。 これを行うには、VS Code の [ポート] タブをクリックし、ポートを右クリックして、 [ブラウザーで開く] をクリックします。