Skip to main content

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

カスタム開発コンテナーを作成して、GitHub Codespaces で JavaScript、Node.js または TypeScript プロジェクトを始めます。

はじめに

このガイドでは、JavaScript、Node.js または TypeScript プロジェクトの設定方法を紹介します Visual Studio Code デスクトップ アプリケーションか VS Code Web クライアントのいずれかが使用されている Codespaces で。 codespace でプロジェクトを開いて開発コンテナーの構成を変更する例について紹介します。

前提条件

  • GitHub.com のリポジトリに既存の JavaScript、Node.js、または TypeScript プロジェクトがあります。 プロジェクトがない場合は、次の例を使用してこのチュートリアルを試すことができます: https://github.com/microsoft/vscode-remote-try-node
  • Organization で GitHub Codespaces を有効にする必要があります。

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

  1. リポジトリ名の下で、 コード のドロップダウン メニューを使い、 [Codespaces] タブでプラス記号 をクリックします。

    [New codespace] ボタン

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

You can customize your codespace by adjusting the amount of vCPUs and RAM, adding dotfiles to personalize your environment, or by modifying the tools and scripts installed. For more information, see "Customizing your codespace."

GitHub Codespaces uses a file called devcontainer.json to configure the development container that you use when you work in a codespace. Each repository can contain one or more devcontainer.json files, to give you exactly the development environment you need to work on your code in a codespace.

On launch, GitHub Codespaces uses a devcontainer.json file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "Introduction to dev containers."

ステップ 2: テンプレートからリポジトリに開発コンテナーの構成を追加する

GitHub Codespaces の既定の開発コンテナーでは、vscode-remote-try-node などの Node.js プロジェクトをすぐに実行できます。 ただし、独自の開発コンテナーを構成することをお勧めします。プロジェクトで必要な特定のツールとスクリプトを定義できるからです。 これにより、リポジトリのすべての GitHub Codespaces ユーザーに対して、完全に再現可能な環境が保証されます。

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

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

    Visual Studio Code Command Palette の「コードスペース: 開発コンテナー構成ファイルの追加...」

  2. この例では、 [Node.js] をクリックします。 追加機能が必要な場合は、Node に固有の任意のコンテナ、または Node と MongoDB などのツールの組み合わせを選択できます。

    リストから Node オプションを選択

  3. Node.js の推奨バージョンをクリックします。

    Node.js バージョンの選択

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

    コマンド パレットのコンテナーのリビルド コマンドのスクリーンショット

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

開発コンテナの構造

Node.js 開発コンテナー テンプレートを追加すると、次のファイルを含む .devcontainer ディレクトリが、プロジェクトのリポジトリのルートに追加されます。

  • devcontainer.json
  • Dockerfile

新しく追加された devcontainer.json ファイルでは、サンプルの後に説明されるいくつかのプロパティを定義します。

devcontainer.json

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/javascript-node
{
    "name": "Node.js",
    "build": {
        "dockerfile": "Dockerfile",
        // Update 'VARIANT' to pick a Node version: 10, 12, 14
        "args": { "VARIANT": "14" }
    },

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],

    // 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",

    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "node"
}
  • name - 開発コンテナーには任意の名前を付けることができます。これは既定値です。
  • build - ビルドのプロパティ。
    • dockerfile - build オブジェクトの dockerfile には、やはりテンプレートから追加された Dockerfile へのパスが含まれます。
    • args
      • バリアント: このファイルにはビルド引数が 1 つだけ含まれています。それは使用するノード バリアントで、Dockerfile に渡されます。
  • settings - これらは、ユーザーが設定できる Visual Studio Code の設定です。
    • terminal.integrated.shell.linux - ここでは bash が既定値ですが、これを変更すると他のターミナル シェルを使用できます。
  • extensions - これらは既定で含まれる拡張機能です。
    • Dbaeumer.vscode-eslint - ES lint は lint の優れた機能拡張ですが、JavaScript の場合は、Marketplace の優れた機能拡張も多数含めることができます。
  • forwardPorts - ここにリストされているポートはすべて自動的に転送されます。 詳細については、「codespace でのポートの転送」を参照してください。
  • postCreateCommand - codespace が作成された後に、Dockerfile で定義されていないコマンドを実行するには、これを使います。
  • remoteUser - 既定では、vscode ユーザーとして実行されていますが、必要に応じてこれを root に設定することができます。

Dockerfile

# [Choice] Node.js version: 14, 12, 10
ARG VARIANT="14-buster"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

# [Optional] Uncomment if you want to install more global node modules
# RUN su node -c "npm install -g <your-package-list-here>"

Dockerfile を使用して、コンテナレイヤーを追加し、コンテナに含める OS パッケージ、ノードバージョン、またはグローバルパッケージを指定できます。

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

開発コンテナーの構成を追加し、すべての機能を基本的に理解したので、変更を行って環境をさらにカスタマイズできます。 この例では、codespace の起動時に npm をインストールするためのプロパティを追加し、コンテナ内のポートのリストをローカルで使用できるようにします。

  1. エクスプローラーで、ツリーから devcontainer.json ファイルを選択してそれを開きます。 表示するには、.devcontainer フォルダーを展開する必要がある場合があります。

    エクスプローラーの devcontainer.json ファイル

  2. extensions の後で、devcontainer.json ファイルに次の行を追加します。

    JSON
    "postCreateCommand": "npm install",
    "forwardPorts": [4000],

    devcontainer.json ファイルで設定できる設定とプロパティについて詳しくは、開発コンテナー Web サイトの「仕様」をご覧ください。

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

    コマンド パレットのコンテナーのリビルド コマンドのスクリーンショット

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

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

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

前のセクションでは、postCreateCommand 使用して、一連のパッケージを npm を介してインストールしました。 これを使用して、npm でアプリケーションを実行できます。

  1. ターミナルで npm start を使用して start コマンドを実行します。

    npm をターミナルで開始

  2. プロジェクトが始まると、VS Code の右下隅に "トースト" 通知メッセージが表示されるはずです。プロジェクトで使用されるポートに接続するように促されます。

    ポート転送の "トースト" 通知

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

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

詳細については、「コードスペースでソース管理を使用する」を参照してください。

次のステップ

これで、GitHub Codespaces で JavaScript プロジェクトの開発を始める準備ができました。 より高度なシナリオ向けの追加のリソースは次のとおりです。