GitHub Codespaces 用の Node.js プロジェクトを設定する

はじめに

このガイドでは、Node.js プロジェクトの例の設定方法を紹介します Visual Studio Code Web クライアントを使用する GitHub Codespaces で。 codespace でプロジェクトを開き、事前定義済みの開発コンテナーの構成を追加および変更するプロセスについて説明します。

このチュートリアルを完了すると、VS Code Web クライアントまたは VS Code デスクトップ アプリケーションを使用して、独自のリポジトリに開発コンテナー構成を追加できるようになります。

dev コンテナーの詳細については、「開発コンテナーの概要」を参照してください。

ステップ 1: codespace でプロジェクトを開く

1. まだサインインしていない場合は、GitHub.com にサインインします。

2. https://github.com/microsoft/vscode-remote-try-node にアクセスします。

3. [このテンプレートを使用する] をクリックし、 [codespace で開く] を選びます。

   

codespace を作成すると、プロジェクトが専用のリモート仮想マシン上に作成されます。 既定では、codespace のコンテナーには、Node.js、JavaScript、TypeScript を含む多くの言語とランタイムがあります。 また、nvm、npm、yarn、git、wget、rsync、openssh、nano などの一般的なツール セットも含まれています。

codespace をカスタマイズするには、vCPU と RAM の量を調整するか、dotfile を追加して環境をカスタマイズするか、インストールされているツールやスクリプトを変更します。 詳しくは、「codespace のカスタマイズ」を参照してください。

GitHub Codespaces は、devcontainer.json というファイルを使って、codespace で作業するときに使う開発コンテナーを構成します。 各リポジトリには 1 つ以上の devcontainer.json ファイルを含めることができ、codespace でコードを操作するために必要な開発環境を正確に提供できます。

起動時に、GitHub Codespaces は devcontainer.json ファイルと、開発コンテナーの構成を設定する依存ファイルを使って、ツールやランタイムをインストールし、プロジェクトが必要とするその他のセットアップ タスクを実行します。 詳しくは、「開発コンテナーの概要」を参照してください。

ステップ 2: 開発コンテナー構成を追加する

GitHub Codespaces の既定の開発コンテナー ("dev container") を使用すると、vscode-remote-try-node などの Node.js プロジェクトで正常に作業することができます。 ただし、独自の開発コンテナーを構成して、プロジェクトに必要なすべてのツールとスクリプトを含めることをお勧めします。 これにより、リポジトリのすべての GitHub Codespaces ユーザーに対して、完全に再現可能な環境が保証されます。

カスタム開発コンテナーを使用するようにリポジトリを設定するには、devcontainer.json ファイルを 1 つ以上作成する必要があります。 これは、定義済みの構成テンプレートから追加するか、Visual Studio Code 内に追加するか、または独自に記述することができます。 dev コンテナーの構成の詳細については、「開発コンテナーの概要」を参照してください。

1. Visual Studio Code Command Palette にアクセス (Shift + Command + P / Ctrl + Shift + P) し、「開発の追加」と入力します。 [Codespaces: 開発コンテナー構成ファイルの追加] をクリックします。

   

2. [新しい構成の作成] をクリックします。

3. この例では、codespace を作成したテンプレート リポジトリに既に開発コンテナー構成が含まれているため、構成ファイルが既に存在することを示すメッセージが表示されます。 既存の構成ファイルを上書きするので、 [続行] をクリックします。

4. [すべての定義を表示する] をクリックします。

   

5. 「node」と入力して、 [Node.js と JavaScript] をクリックします。 プロジェクトで特定のツールを使用している場合は、その他のオプションを使用できます。 たとえば、Node と MongoDB です。

   

6. プロジェクトに使用する Node.js のバージョンを選択します。 この場合は、"(既定値)" とマークされたバージョンを選択します。

   

7. 追加機能のリストが表示されます。 JavaScript コードのエラーを検出するためのコード品質ツールである JSHint をインストールします。 このツールをインストールするには、「js」と入力し、JSHint (via npm) を選んで [OK] をクリックします。

   

8. 開発コンテナー構成ファイルが既に存在することを示すメッセージが表示されます。 [上書き] をクリックします。

   devcontainer.json ファイルが作成され、エディターで開きます。

カスタム開発コンテナー構成の詳細

Visual Studio Code エクスプローラーを見ると、devcontainer.json ファイルを含むプロジェクトのリポジトリのルートに .devcontainer ディレクトリが追加されていることがわかります。 これは、このリポジトリから作成された codespace のメイン構成ファイルです。

devcontainer.json

追加した devcontainer.json ファイルには、name、image、および features プロパティの値が含まれます。 便利なプロパティがいくつか含まれていますが、コメントアウトされています。

選んだイメージに応じて、ファイルは次のようになります。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
  "name": "Node.js",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
  "features": {
    "ghcr.io/devcontainers-contrib/features/jshint:2": {}
  }

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Configure tool-specific properties.
  // "customizations": {},

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}

• name: 開発コンテナーには任意の名前を付けることができます。 既定値が指定されています。
• image: codespace の開発コンテナーの作成に使われるコンテナー レジストリ (DockerHub、GitHub Container registry、またはAzure Container Registry) 内の画像の名前。
• features: 1 つ以上のオブジェクトの一覧。各オブジェクトは、使用可能な開発コンテナー機能のいずれかを参照します。 機能とは自己完結型であり、インストール コードと開発コンテナーの構成の共有可能なユニットです。 これらは、開発コンテナーにツール、ランタイム、またはライブラリの機能を追加する簡単な方法を提供します。 機能追加は、VS Code または、GitHub 上の devcontainer.json エディターで行えます。 詳細については、「devcontainer.json ファイルへの機能の追加」の Visual Studio Code または Web ブラウザー タブをクリックしてください。
• forwardPorts - ここにリストされているポートはすべて自動的に転送されます。 詳しくは、「codespace でのポートの転送」を参照してください。
• postCreateCommand: codespace が作成された後にコマンドを実行するには、このプロパティを使います。 これは、文字列 (上記のとおり)、配列、またはオブジェクトとして書式設定できます。 詳しくは、開発コンテナーの Web サイトの開発コンテナーの仕様をご覧ください。
• customizations: このプロパティを使用すると、codespace での作業に使用される場合、特定のツールまたはサービスをカスタマイズできます。 たとえば、VS Code の特定の設定と拡張機能を構成できます。 詳細については、開発コンテナー Web サイトの「サポート ツールとサービス」を参照してください。
• remoteUser: 既定では、vscode ユーザーとして実行されていますが、必要に応じてこれを root に設定することができます。 使用可能なプロパティの完全な一覧については、開発コンテナーの Web サイトの開発コンテナーの仕様に関するページを参照してください。

追加の開発コンテナー構成ファイル

Docker に慣れている場合は、Dockerfile または Docker Compose を使用して、devcontainer.json ファイルに加えて codespace 環境を構成できます。 これを行うには、devcontainer.json ファイルと一緒に Dockerfile または docker-compose.yml ファイルを追加します。 詳細については、開発コンテナー Web サイトの「イメージ、Dockerfiles、Docker Compose の使用」を参照してください。

ステップ 3: devcontainer.json ファイルを変更する

開発コンテナーの構成を追加し、すべての機能を基本的に理解したので、変更を行って環境をさらにカスタマイズできます。 この例では、次の動作を行うプロパティを追加します。

• 開発コンテナーの作成後に npm install を実行して、package.json ファイルに一覧表示されている依存関係をインストールします。
• この codespace に VS Code 拡張機能を自動的にインストールします。

1. devcontainer.json ファイルで、features プロパティの後にコンマを追加し、機能に関するコメントアウトされた 2 つの行を削除します。

   JSON

     "features": {
       "ghcr.io/devcontainers-contrib/features/jshint:2": {}
     },
   
     // Features to add to the dev container. More info: https://containers.dev/features.
     // "features": {},
   

2. postCreateCommand プロパティをコメント解除し、コマンド npm install を割り当てます。

   JSONC

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": "npm install",
   

3. customizations プロパティのコメントを解除し、次のように編集して、"Code Spell Checker" VS Code 拡張機能をインストールします。

   JSONC

   // Configure tool-specific properties.
   "customizations": {
     // Configure properties specific to VS Code.
     "vscode": {
       // Add the IDs of extensions you want installed when the container is created.
       "extensions": [
         "streetsidesoftware.code-spell-checker"
       ]
     }
   }
   

   選んだイメージに応じて、devcontainer.json ファイルは次のようになります。

   // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
   {
     "name": "Node.js",
     // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
     "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
     "features": {
       "ghcr.io/devcontainers-contrib/features/jshint:2": {}
     },
   
     // Use 'forwardPorts' to make a list of ports inside the container available locally.
     // "forwardPorts": [],
   
     // Use 'postCreateCommand' to run commands after the container is created.
     "postCreateCommand": "npm install",
   
     // Configure tool-specific properties.
     "customizations": {
       // Configure properties specific to VS Code.
       "vscode": {
         // Add the IDs of extensions you want installed when the container is created.
         "extensions": [
           "streetsidesoftware.code-spell-checker"
         ]
       }
     }
   
     // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
     // "remoteUser": "root"
   }
   

4. 変更を保存します。

5. VS Code Command Palette にアクセス (Shift+Command+P / Ctrl+Shift+P) し、「リビルド」と入力します。 [Codespaces: コンテナーのリビルド] をクリックします。

   

   ヒント: キャッシュをクリアし、新しいイメージを使用してコンテナーを再構築するために、完全なリビルドを実行することが必要になる場合があります。 詳しくは、「codespace でのコンテナーのリビルド」を参照してください。

リポジトリに変更をコミットする前に、codespace 内でリビルドすることにより期待どおりに変更が動作します。 何らかの失敗があった場合、コンテナの調整を継続するためにリビルドできるリカバリコンテナを備えた codespace に配置されます。

開発コンテナーが再構築され、codespace が再び使用可能になると、postCreateCommand が実行され、npm がインストールされ、"Code Spell Checker" 拡張機能が使用できるようになります。

手順 4:アプリケーションを実行する

前のセクションでは、postCreateCommand を使用して、一連のパッケージを npm install コマンドを使ってインストールしました。 依存関係がインストールされたら、アプリケーションを実行できます。

1. ご自分の codespace のターミナルで、「npm start」と入力します。

   

2. プロジェクトが開始されると、VS Code の右下隅に "トースト" 通知メッセージが表示され、転送されたポートでアプリケーションが使用できることがわかります。 実行中のアプリケーションを表示するには、 [ブラウザーで開く] をクリックします。

   

ステップ 5: 変更をコミットする

新しいコードであれ、構成の変更であれ、codespace に変更を加えたら、その変更をコミットしたくなるでしょう。 リポジトリに構成の変更をコミットすると、このリポジトリから codespace を作成する他の人が、同じ構成を使用するようにできます。 VS Code 拡張機能の追加など、行うすべてのカスタマイズをすべてのユーザーが使えるようになります。

このチュートリアルでは、テンプレート リポジトリから codespace を作成したので、codespace 内のコードはまだリポジトリに格納されていません。 現在のブランチを GitHub に発行することで、リポジトリを作成できます。

詳しくは、「Codespace でソースコントロールを使用する」をご覧ください。

次のステップ

カスタム開発コンテナー構成を独自の Node.js、JavaScript、または TypeScript プロジェクトに追加できるようになりました。

より高度なシナリオ向けの追加のリソースは次のとおりです。

• devcontainer.json ファイルへの機能の追加
• GitHub Codespaces のアカウント固有のシークレットの管理
• 「GitHub Codespaces の GPG 検証を管理する」
• 「codespace でのポートの転送」