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

公開: 2021-11-24

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

新しいプロジェクトの要件により、SDKのバージョンと、ローカルにインストールしたツールを変更して環境をデバッグしなければならないことがよくあります。これにより、すべてが期待どおりに機能するまで数日が失われます。

ベータ段階またはプレビュー段階にあるバージョンを検討すると、事態はさらに複雑になります。 これを防ぐために、GitHubコードスペースを紹介します。これにより、アプリケーションが必要とする開発環境をコンテナー内で生成できるだけでなく、どこからでも、どのデバイスからでも開発できるようになります。

さぁ、始めよう！

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

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

リポジトリにアクセスしてピリオド「キー」を押すたびに、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は、リモートコンテナーまたは開発コンテナーと呼ばれる拡張機能を提供します。これにより、コンテナー内でアプリケーションに必要な開発環境を生成できます。 このようにして、プロジェクトに取り組んでいるチーム内のすべての開発者は、自動的に同じ開発環境を持ちます。

これにより、プロジェクトを可能な限り機敏に開始できるようになります。また、環境を定義した場合は、同じマシン上で異なる構成を使用して、プロジェクトごとに複数の作業環境を分離できます。 かっこいい？

どうすれば始められますか？

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

最初に行う必要があるのは、ルートディレクトリに.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：12.16.1-alpine imageを使用して、この開発環境内での構成が、Node.jsのバージョン14を使用しているローカルでの構成とは異なることを示しています。 一方、開発中に使用するNodemonモジュールに加えて、git、bash、cURLなどのユーティリティをインストールします。

  • fordwardPorts ：これらは、ローカルマシンからアクセスできるようにアプリケーションが使用するポートであり、デバッグが簡単です。
  • 設定：この例では、複数の環境がある場合に非常に便利です。VisualStudioCodeテーマを変更して、IDEのそのインスタンスのローカル環境にいないことが明らかになるようにしました。 私は通常ダークバージョンを使用しますが、ここではライトバージョンを設定しました。
  • 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 StudioCodeウィンドウになります。

そして最良の部分は次のとおりです。この構成はプロジェクトリポジトリでバージョン管理されているため、すべてのメンバーが使用できます。 単に壮観です！

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

構成を最初から開始する必要はありません。また、オタクタッチを完了するためにどこにタッチする必要があるかをすでに知っています。

GithubSpacesに戻る

ここでは、Visual Studioリモートコンテナーで使用したのと同じプロジェクトを使用しますが、今回はGitHubを使用します。 これがコードセクションで行われると、コードスペースと呼ばれる新しいオプションがあります。

ここで、この特定のリポジトリで作業する必要があるマシンのタイプを選択できます。

マシンのサイズを選択してください

選択すると、作成プロセスが開始されます。 リモートコンテナ用に作成した.devcontainerフォルダーの構成を使用して、環境を構成します。

プロセスが完了すると、ローカルシステムで実行したのと同じ方法で、アプリケーションが実行された状態でVisual StudioCodeがWeb形式で表示されることがわかります。

最後の言葉

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

タグ：
  • DevOps