Visual Studio Code の GitHub コードスペースを使用したコードとしての IDE

開発者にとって最も難しいことの 1 つは、すでに進行中のプロジェクトを開始することです。

新しいプロジェクトの要件により、環境をデバッグするためにローカルにインストールした SDK やツールのバージョンを変更する必要が生じることがよくあり、すべてが期待どおりに動作するまで数日を失うことになります。

ベータ版またはプレビュー段階にあるバージョンを考慮すると、事態はさらに複雑になります。そうならないために、アプリケーションに必要な開発環境をコンテナ内に生成できるだけでなく、場所やデバイスを問わず開発できるようにする GitHub Codespaces をご紹介します。

さぁ、始めよう！

GitHub コードスペースとは何ですか?

Github codespaces はブラウザからアクセスでき、専用コードの開発に必要な機能をすべて備えたクラウド環境です。

リポジトリ内でピリオドの「キー」を押すたびに、GitHub の発表を見たことがあるかもしれません。 Web エディタが 開き 、問題のリポジトリが表示 されます。

ただし、ターミナルは単なる Web エディタであり、バックエンド マシンがないため、ターミナルを実行することはできません。場合によっては、これで十分すぎる場合もありますが、環境を実行したりプロジェクトをコンパイルする必要があるが、ニーズを満たすシステム (iPad、Surface Go など) が手元にないことを想像してください。

GitHub Codespaces は、クラウド内で IDE を実行して、ローカル システムを使用しているかのように動作し、指定した構成でも動作できるようにすることで、この問題を解決します。

注: この機能は、 チーム アカウントとエンタープライズ アカウント でのみ使用できます。

サンプルコード

この例では、非常に単純な Node.js アプリケーションを使用します。

 const express = require('express');
const app = express();
const port = 8080;
app.use(express.static('public'));
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
})

上記のコードは次の構造になっています。

Node.js、git、およびこの言語のプロジェクトに役立つ VS Code 拡張機能がインストールされている限り、このプロジェクトをローカルで問題なく起動できます。アプリケーションを自動的に更新する Nodemon などのツールを使用することもできます。

問題は、この構成を使用するだけでなく、.NET Core、Python、Docker、Kubernetes を使用した開発など、他の多くの構成を利用する場合に発生します。そのため、必ずしも必要ではないツールや拡張機能をさらにインストールすることになります。開発環境のパフォーマンスに悪影響を与える可能性があります。

問題はあなた自身のパフォーマンスに限定されません。他の誰かがチームに参加し、アプリケーションの起動に必要なツールやフレームワークを使ってシステムを「準備」する必要がある場合、その人も数時間を失い、チーム全体のパフォーマンスに悪影響を及ぼします (自分が参加している場合、状況はさらに悪化します)異なるオペレーティング システムを使用して動作します)。

リモートコンテナの操作

Visual Studio Code は、 Remote Containers または Dev Containers と呼ばれる拡張機能を提供しており、これを使用すると、アプリケーションが必要とする開発環境をコンテナ内に生成できます。このようにして、プロジェクトに取り組んでいるチーム内のすべての開発者が自動的に同じ開発環境を使用できるようになります。

これにより、プロジェクトを開始するエクスペリエンスが可能な限り機敏になり、また、環境を定義した人であれば、同じマシン上で異なる構成を持つプロジェクトごとに複数の作業環境を分離することができます。クールですね？

どうやって始めればいいですか？

この機能を使用するには、コンテナーがマシン上で実行されるため、マシンに Docker がインストールされている必要があります。開発環境の構築に役立つ Remote Containers 拡張機能をインストールすることも必要です。

最初に行う必要があるのは、ルート ディレクトリに .devcontainer というフォルダーを作成することです。これは、拡張機能に含まれる指示を含むコンテナーをマウントする構成があるかどうかを確認するために、拡張機能が識別しようとするものです。

その中には、環境構成を含む devcontainer.json という名前のファイルが少なくとも 1 つ必要です。

この例では、次のものを使用しました。

 {
    "name": "dev-demo",
    "dockerFile": "Dockerfile",
    "forwardPorts": [
        8080
    ],
    "settings": {
        "workbench.colorTheme": "Visual Studio Light"
    },    
    "containerEnv": {
        "NODE_ENV": "development",
    },
    "extensions": [
        "coenraads.bracket-pair-colorizer-2",
        "eg2.vscode-npm-script",
        "christian-kohler.npm-intellisense",
        "dbaeumer.vscode-eslint",
        "streetsidesoftware.code-spell-checker",
        "formulahendry.auto-close-tag",
        "mikestead.dotenv",
        "christian-kohler.path-intellisense",
        "davidanson.vscode-markdownlint",
        "pkief.material-icon-theme",
        "humao.rest-client"
    ],
	"postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh",
    "postAttachCommand": "nodemon server.js"
}

ご覧のとおり、これはさまざまなセクションを持つ JSON です。

• name : 開発コンテナーが持つ名前です。理想的には、これはわかりやすい名前である必要があります。
• dockerFile : 環境の作成に使用する Dockerfile の名前を示すために使用されます。私の場合、同じ .devcontainer フォルダー内に次のようなフォルダーがあります。

 FROM node:12.16.1-alpine
WORKDIR /code
RUN apk update && apk upgrade \
    && apk add git bash curl \
    && npm install -g nodemon
COPY . .

この例では、単にこの開発環境内の構成が、Node.js のバージョン 14 を使用しているローカルの構成とは異なることを示すために 、node: 12.16.1-alpine イメージ を使用しています。一方、開発中に使用する Nodemon モジュールに加えて、git、bash、cURL などのいくつかのユーティリティをインストールします。

• fordwardPorts : これらはアプリケーションがローカル マシンからアクセスできるように使用するポートであり、デバッグが簡単です。
• settings : この例では、複数の環境がある場合に非常に便利です。IDE のそのインスタンスのローカル環境にいないことが明らかになるように、Visual Studio Code テーマを変更しました。普段はダークバージョンを使用していますが、ここではライトバージョンを設定しています。
• ContainerEnv : 環境変数も追加しました。これは通常、開発時に非常に役立ちます。
• postCreateCommand : このプロパティを追加したので、開発コンテナのライフサイクル中にコマンドまたはスクリプトを実行できることがわかります。この場合、作成完了時にこのスクリプトが起動されます。その内容は次のとおりです。

   #!/bin/bash
  # this runs in background after UI is available
  #Remove node_modules folder
  echo "Remove node_modules folder first"
  rm -rf node_modules
  #Install npm dependencies
  echo "Install dependencies"
  npm install

• postAttachCommand: 最後に、nodemon server.js コマンドをこのプロパティに追加しました。これにより、コンテナーにフックするたびに、デフォルトでアプリケーションが起動されるようになります。

devcontainer.json ファイルには さらに多くのオプション を追加できます。これは、実行できることのごく小さな例にすぎません。

このフォルダー内のすべての内容と、定義された構成がどのように機能するかがわかったところで、これをどのように起動すればよいでしょうか?

最も簡単な方法は、このボタンを使用することです。

[コンテナで再度開く] オプションを選択すると、コンテナとカスタム IDE の作成プロセスが開始されます。結果は次のようになります。

この場合、最終的には、特定の Node.js バージョン、より快適に開発するために選択されたいくつかの拡張機能、およびポート 8080 で既に実行され公開されているアプリケーションを備えた、Light テーマを持つ Visual Studio Code ウィンドウが表示されます。

そして最も重要なのは、この構成はプロジェクト リポジトリ内でバージョン管理されているため、どのメンバーでも使用できることです。ただただ壮観です！

ここまでを見て、すべての手順を理解しました。.devcontainer フォルダーを削除し、左下のアイコンを再度選択し、 もう一度 [コンテナーで再開] を選択します。今回は、いくつかの事前設定の中から選択できることがわかります。 -構築された構成。

設定を最初から開始する必要はありません。また、オタク風に仕上げるためにどこを変更する必要があるかはすでにわかっています。

Github スペースに戻る

最後の言葉 👩‍💻

上の例でわかるように、リモート コンテナを使用した Github コードスペースは、構成と開発環境を複製するという問題に対する優れた解決策であり、チームのパフォーマンスを向上させる優れた方法でもあります。