Skip to main content
ドキュメントには頻繁に更新が加えられ、その都度公開されています。本ページの翻訳はまだ未完成な部分があることをご了承ください。最新の情報については、英語のドキュメンテーションをご参照ください。本ページの翻訳に問題がある場合はこちらまでご連絡ください。
 

Setting up your Node.js project for Codespaces

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

GitHub Codespaces is available for organizations using GitHub Team or GitHub Enterprise Cloud. 詳しい情報については「GitHubの製品」を参照してください。

はじめに

このガイドでは、JavaScript、Node.js、または TypeScript プロジェクトを Codespaces で設定する方法を説明します。 codespace でプロジェクトを開き、テンプレートから開発コンテナ設定を追加および変更する例を紹介します。

必要な環境

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

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

  1. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, click Create codespace on main.

    [New codespace] ボタン

    If you don’t see this option, Codespaces isn't available for your project. See Access to Codespaces for more information.

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

vCPU と RAM の量を調整したり、ドットファイルを追加して環境をパーソナライズしたり、インストールされているツールやスクリプトを変更したりして、codespace をカスタマイズできます。

Codespacesはdevcontainer.jsonというファイルを使って、codespaceで作業する際に使用する開発コンテナを設定します。 それぞれのリポジトリには1つ以上のdevcontainer.jsonファイルを含めて、codespaceでコードの作業をするのに必要なとおりの開発環境を提供できます。

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

Step 2: Add a dev container configuration to your repository from a template

The default development container, or "dev container," for GitHub Codespaces will support running Node.js projects like vscode-remote-try-node out of the box. However, we recommend that you configure your own dev container, as this allows you to define any particular tools and scripts your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.

カスタムの開発コンテナを使うようにリポジトリをセットアップするには、1つ以上のdevcontainer.jsonファイルを作成しなければなりません。 これらはVisual Studio Code内でテンプレートから追加することも、独自に書くこともできます。 開発コンテナの設定に関する詳しい情報については「開発コンテナの紹介」を参照してください。

  1. Visual Studio Codeコマンドパレットにアクセスし(Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux))、 "dev container"と入力し始めてください。 Codespaces: Add Development Container Configuration Files...(Codespaces: 開発コンテナ設定ファイルを追加...)を選択してください。

    Visual Studio Codeコマンドパレットでの"Codespaces: Add Development Container Configuration Files..."

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

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

  3. Click the recommended version of Node.js.

    Node.js バージョンの選択

  4. Visual Studio Codeコマンドパレットにアクセスし(Shift + Command + P / Ctrl + Shift + P)、"rebuild"と入力し始めてください。 Codespaces: Rebuild Container(Codespaces: コンテナをリビルド)を選択してください。

    コンテナリビルドの選択肢

開発コンテナの構造

Adding the Node.js dev container template adds a .devcontainer directory to the root of your project's repository with the following files:

  • devcontainer.json
  • Dockerfile

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

devcontainer.json

// フォーマットの詳細は https://aka.ms/devcontainer.json を参照します。 設定オプションについては、次の README を参照します。
// 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" }
    },

    // コンテナの作成時に*デフォルト*のコンテナ固有の settings.json 値を設定します。
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // コンテナの作成時にインストールする拡張機能の ID を追加します。
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],

    // 'forwardPorts' を使用して、コンテナ内のポートのリストをローカルで使用できるようにします。
    // "forwardPorts": [],

    // コンテナの作成後にコマンドを実行するには、「postCreateCommand」を使用します。
    // "postCreateCommand": "yarn install",

    // 代わりに、connect を root としてコメントアウトします。 詳細は https://aka.ms/vscode-remote/containers/non-root を参照します。
    "remoteUser": "node"
}
  • name - You can name your dev container anything, this is just the default.
  • ビルド - ビルドプロパティです。
    • dockerfile - In the build object, dockerfile contains the path to the Dockerfile that was also added from the template.
    • args
      • variant: This file only contains one build argument, which is the node variant we want to use that is passed into the Dockerfile.
  • settings - These are Visual Studio Code settings that you can set.
    • terminal.integrated.shell.linux - While bash is the default here, you could use other terminal shells by modifying this.
  • 機能拡張 - これらはデフォルト設定で含まれている機能拡張です。
    • dbaeumer.vscode-eslint - ES lint is a great extension for linting, but for JavaScript there are a number of great Marketplace extensions you could also include.
  • forwardPorts - ここにリストされているポートはすべて自動的に転送されます。 For more information, see "Forwarding ports in your codespace."
  • postCreateCommand - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
  • 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 ファイルを変更する

With your dev container configuration added and a basic understanding of what everything does, you can now make changes to customize your environment further. この例では、codespace の起動時に npm をインストールするためのプロパティを追加し、コンテナ内のポートのリストをローカルで使用できるようにします。

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

    devcontainer.json file in the Explorer

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

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

    devcontainer.jsonファイルで可能な設定とプロパティについては、VS Code ドキュメントの 「devcontainer.json リファレンス」を参照してください。

  3. Visual Studio Codeコマンドパレットにアクセスし(Shift + Command + P / Ctrl + Shift + P)、"rebuild"と入力し始めてください。 Codespaces: Rebuild Container(Codespaces: コンテナをリビルド)を選択してください。

    コンテナリビルドの選択肢

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

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

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

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

    npm をターミナルで開始

  2. プロジェクトが開始されると、プロジェクトが使用するポートに接続するためのプロンプトが表示されたトーストが右下隅に表示されます。

    ポートフォワーディングトースト

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

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

詳しい情報については「codespaceでのソースコントロールの利用」を参照してください。

次のステップ

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