Skip to main content
Snyk ブログ

In this article

GitHub CodespacesでDeno Dev Containerをセットアップする方法

著者
Headshot of Liran Tal

Liran Tal

blog feature snyk container pink

2024年7月18日

0 分で読めます

GitHub CodespacesのようなクラウドIDEでDenoを使ったWeb開発を始めるためのガイドやチュートリアルをお探しなら、この記事が役立ちます。

この記事では、Deno、GitHub Codespaces、Dev Containersについて解説し、クラウド上で開発環境を効率よくセットアップするために必要な知識を紹介します。主な対象読者は、特にJavaScriptやNode.jsのエコシステムに携わる開発者です。

Denoとは？簡単な紹介

Denoは、JavaScriptとTypeScript向けのセキュアなランタイムです。Rustで構築され、Node.jsのいくつかの課題を解決することを目的としています。Node.jsのオリジナル開発者であるRyan Dahlによって作られ、TypeScriptの標準サポート、組み込みのパッケージマネージャー、サンドボックス化によるセキュリティの強化など、いくつかの重要な違いがあります。

// Example of a simple Deno script
import { serve } from "https://deno.land/std@0.76.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}


上記のコードは、Denoで書かれたシンプルなHTTPサーバーです。URLからserve関数を直接インポートしている点に注目してください。これはDeno独自の機能の一つで、モジュールにURLを使用するため、package.jsonファイルやnode_modules ディレクトリが不要になります。

GitHub Codespacesとは？

GitHub Codespacesは、クラウド上だけで開発を行える開発環境です。GitHub内で数秒で起動する、機能が充実したクラウドホスト型の開発環境を利用できます。つまり、ローカルマシンに何もセットアップすることなく、Webブラウザーから直接プロジェクトへの貢献、コードレビュー、マージコンフリクトの修正ができます。

Dev Containersとは？

Dev Containers（Development Containers）は、Visual Studio CodeのRemote - Containers拡張機能の一部です。devcontainer.jsonファイルを使って開発環境をコードとして定義し、分離されたDockerコンテナ内でプロジェクトを実行できます。これにより、一貫性があり再現可能な開発環境をチームで共有でき、「自分のマシンでは動くのに」という問題を解消できます。

// Example of a devcontainer.json file
{
  "name": "My Project",
  "dockerFile": "Dockerfile",
  "appPort": [3000],
  "extensions": ["dbaeumer.vscode-eslint"]
}

このdevcontainer.jsonファイルは、シンプルなJavaScriptプロジェクト向けのDev Containerを定義しています。同じディレクトリにあるDockerfileを使ってコンテナをビルドすること、ポート3000を転送すること、ESLint拡張機能をコンテナにインストールすることが指定されています。

以下は、プロジェクトのリポジトリにコミットできるdevcontainer.jsonの別の例です。

{
    "name": "My Project",
    "dockerFile": "Dockerfile",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": ["dbaeumer.vscode-eslint"],
    "postCreateCommand": "yarn install"
}

上記の例では、devcontainer.jsonファイルによって、Visual Studio CodeまたはGitHub Codespacesに、同じディレクトリにあるDockerfileを使って新しいDockerコンテナを作成するよう指示しています。ターミナルのデフォルトシェルにBashを設定し、eslint拡張機能をインストールします。コンテナ作成後にpostCreateCommandが実行され、この場合はyarn installを実行してプロジェクトの依存関係をインストールします。

Dev Containersが開発者の課題をどう解決するか

Dev Containersには、次のようなメリットがあります。

  • 一貫性のある開発環境 - 従来、開発環境のセットアップには、開発者のマシンにソフトウェアを手動でインストールして設定する必要がありました。この作業では、開発環境の違いにより、ある開発者のマシンでは正常に動作するコードが別のマシンでは失敗する「自分のマシンでは動く」症候群が起こりがちです。Dev Containersでは開発環境をコードとして定義することでこの問題を解決し、プロジェクトに携わるすべての開発者が同じ環境を使えるようにします。

  • 開発者のオンボーディングを簡素化 - 新しい開発者をプロジェクトに迎える際は、開発環境をセットアップし、必要なソフトウェアの正しいバージョンがそろっていることを確認するために、時間がかかることがあります。Dev Containersを使えば、このプロセスを大幅に簡素化できます。新しい開発者はプロジェクトをクローンし、Visual Studio CodeまたはGitHub Codespacesで開くだけで、devcontainer.jsonファイルに基づいて開発環境が自動的にセットアップされます。

  • CI/CDを効率化 - Dev Containersは開発者を支援するだけでなく、継続的インテグレーション／継続的デリバリー（CI/CD）プロセスの効率化にも役立ちます。開発環境はコードとして定義されているため、CI/CD環境の基盤としても利用できます。これにより、開発時と同一の環境でコードをテストし、デプロイできます。

Dev Containersは、一貫性があり再現可能な開発環境を実現する強力なツールです。GitHub CodespacesでDenoをセットアップするにあたり、Dev Containersの役割とメリットを理解しておくことが重要です。

GitHub CodespacesでDenoをセットアップする

GitHub CodespacesにDenoを導入すると、ブラウザー上でDenoアプリケーションを直接作成、実行、デバッグできる、柔軟で効率的な開発環境が実現します。

Denoのセットアップに必要なもの

始める前に、以下を用意してください。

  • GitHubアカウント。

  • GitHub Codespacesへのアクセス。アクセス方法の詳細は、GitHub Codespacesのドキュメントをご覧ください。

  • Denoとその環境に関する基本的な知識。Denoを初めて使う場合は、Deno公式ドキュメントをご覧ください。

  • GitHubでホストされているDenoのコードリポジトリ

GitHub Codespaceを起動する

現在のコードリポジトリにDev Containerの設定がなくても（ルートに.devcontainer/ディレクトリがないことで確認できます）、GitHub Codespaceを起動できます。デフォルトのクラウド開発環境が作成されます。

GitHubのWeb UIで、メインのリポジトリページにあるCodeボタンをクリックし、Codespacesタブに移動して、Codespaceの作成を選択します。

GitHub Codespaceを作成する

Deno開発用のdevcontainer.jsonを作成する

Denoの開発環境をセットアップするには、リポジトリの.devcontainerディレクトリにdevcontainer.jsonファイルを作成する必要があります。

残念ながら、DenoプロジェクトにはDev Containerの公式サポートがありません。サポートがあればVS CodeやGitHub Codespacesですぐに使えるはずです。2023年3月には、開発者からDeno Dev Containerの必要性が提起されました。いずれ対応されるかもしれません。

ですが、希望を捨てないでください。開発者コミュニティのおかげで、Dev Containerの定義ファイルを一から作る必要はありません。追加できるコミュニティ管理の機能一覧が公開されています。

コミュニティが管理するDeno Dev Containerを追加するには、次の手順に従ってください。

  1. GitHub CodespaceでCMD+SHIFT+Pを押し、VS Codeのコマンドパレットを開きます

  2. Codespaces: Add a Dev Container Configuration Files…を選択し、選択肢が表示されたらCreate a new configurationを選びます。

  3. 数秒後、事前設定済みのDev Container構成の一覧が表示されます

  4. 「Show all definitions」を選び、「Node.js & TypeScript」を選択してから、ベースのDockerイメージに「bulleyes」を選びます。

  5. 最後に「Deno」と入力し、「Deno (via GitHub Releases)」を選択して、「Keep defaults」を選びます。

GitHub CodespacesでDeno Dev Containerを作成

選択内容を確定すると、VS Code IDEが開き、リポジトリ内に.devcontainer/devcontainer.jsonファイルが新しく作成されます。内容は次のとおりです。

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

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

ファイルをリポジトリにコミットし、新しいDeno Dev Containerの開発環境を使えるよう、GitHub Codespaceを再起動しましょう。

  1. もう一度CMD+SHIFT+Pを押して、VS Codeのコマンドパレットを開きます

  2. Codespaces: Full Rebuild Containerを選択します

選択を確定すると、ページが新しい環境で再読み込みされます。

画像が見つかったこと、コンテナのビルド失敗、復旧の試行が表示されたCodespacesのセットアップ画面。

Deno Dev Containerをテストする

新しいDeno Dev Containerの開発環境が準備できたら、Terminalパネルを開き、Node.jsとDenoのバージョンが正しく設定され、コーディングを始められることを確認します。

GitHub Codespaces上のDeno Dev Container開発環境

DenoとTypeScriptにおすすめのVS Code拡張機能

VS Codeを使っている方なら、ソフトウェア開発を効率化するさまざまな拡張機能と、そのメリットをご存じでしょう。拡張機能は機能を追加し、開発ワークフローを改善して、コーディングをより快適かつ生産的にします。

VS Codeの拡張機能はエディターの基本機能を強化するプラグインです。その多くはコミュニティによって開発、提供されているため、マルウェアやセキュリティ上の問題を招かないよう、十分に監査・確認する必要があります。2021年にSnykが実施したセキュリティ調査で、VS Code拡張機能に多数の脆弱性が見つかったことが理由です。詳しくはSnykが実施したセキュリティ調査をご覧ください。IDE拡張機能をインストールする際は、責任を持って判断してください。

Deno開発向けコードリンター

Denoのエコシステムは比較的新しいものの、急速に成熟し、独自の機能に対応するVS Code拡張機能も増えています。Deno開発におすすめの拡張機能をいくつか紹介します。

  1. Deno (denoland.vscode-deno)：Deno公式のVS Code拡張機能です。Denoプロジェクト向けに、IntelliSense、リンティング、フォーマット、デバッグ機能を提供します。ワークスペースのルートにあるdeno.jsonまたはdeno.jsoncファイルに基づいて、プロジェクトの設定を自動的に推定します。

       {
       "compilerOptions": {
           "lib": ["deno.ns", "deno.unstable"]
       }
   }


    denoland.vscode-deno VS Code拡張機能をDev Containerに追加するには、devcontainer.jsonファイルにextensionsフィールドを追加するのが最適です。そのファイルのextensions配列にdenoland.vscode-denoを追加します。


    設定方法は次のとおりです。

    {
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  "extensions": [
    "denoland.vscode-deno"
  ]
}


    この設定により、コンテナ内でプロジェクトを開くと、VS Codeがdenoland.vscode-deno拡張機能をDev Containerに自動的にインストールします。

  2. Deno Standard Library Snippets (justjavac.vscode-deno)：Deno標準ライブラリ向けの便利なスニペットを提供する拡張機能です。プロジェクトでDeno公式モジュールを簡単に使えるようになります。

SnykでDenoのコードをセキュリティ対策

ソフトウェアアプリケーションが複雑化し、Node.jsやDenoの開発でオープンソースのnpmライブラリが広く使われるなか、コードセキュリティの重要性はかつてないほど高まっています。コードに潜む脆弱性一つが、データ侵害、金銭的損失、ブランドの評判低下など、深刻な結果を招くおそれがあります。

セキュアなコードベースを構築することは、攻撃を防ぐだけではありません。ユーザーとの信頼関係を築くことにもつながります。ユーザーは、自分のデータが安全であり、使用しているソフトウェアがセキュリティを考慮して作られていると知る必要があります。

JavaScriptの世界では、Node.js、Deno、さらにはBunを使う開発者が、開発をスピードアップし、アプリケーションの効率を高めるために、数多くのライブラリやパッケージを利用します。しかし、npmレジストリからサードパーティの依存関係を追加するたびに、潜在的なリスクが生じます。そこで役立つのがSnykです。

Snykは開発者ファーストのセキュリティツールです。開発者がオープンソースの依存関係やコードに含まれる脆弱性を見つけ、修正できるよう支援します。

Denoコードやネストされた依存関係に含まれるセキュリティ脆弱性を見つけたいですか？Snyk VS Code拡張機能をインストールして有効にし、Deno Dev Containerに追加しましょう。

{
  "name": "...",
  "image": "...",
  "extensions": [
    "snyk-security.snyk-vulnerability-scanner"
  ]
}

コード内でシームレスにリアルタイムのセキュリティリンターを利用できます。たとえば、Node.jsコードに次のようなSQLインジェクションにつながる脆弱なコードパスがある場合、Snykが検出できます。

VS CodeでのSQLインジェクション

セキュアコーディングとSQLインジェクションについて詳しく知りたい方は、JavaScript開発者向けのコードセキュリティを扱うSnyk Learnのインタラクティブなチュートリアルをご覧ください。

DenoとTypeScript開発向け拡張機能

TypeScriptは、JavaScriptを拡張した静的型付け言語です。オプションの型やクラス、モジュールを追加します。現代のWeb開発で広く使われており、TypeScriptの開発を支援・強化するVS Code拡張機能も数多くあります。

  1. TypeScript Hero (rbbit.typescript-hero)：TypeScript Heroは、自動インポート、コード生成、リファクタリングなどの高度なTypeScript機能を提供します。

  2. TSLint (ms-vscode.vscode-typescript-tslint-plugin)：TSLintはTypeScript用のリンターです。コーディングスタイルのルールを適用し、開発プロセスの早い段階でよくあるエラーを見つけられるようにします。

  3. Prettier - Code formatter (esbenp.prettier-vscode)：Prettierは、独自の方針に基づいてコードを整形するフォーマッターです。TypeScriptで使用すると、コードを一貫したスタイルに自動整形できます。

TypeScriptでPrettierを有効にするには、.prettierrcファイルに次の設定を追加します。

   {
       "semi": true,
       "trailingComma": "all",
       "singleQuote": true,
       "printWidth": 80,
       "tabWidth": 2
   }

拡張機能を選ぶ際は、プロジェクトの要件やコーディングスタイルに合ったものを選びましょう。ここで紹介した拡張機能は、VS Code、Deno、Snyk、TypeScriptでできることを探るための出発点にすぎません。

カテゴリー:
コンテナセキュリティエンジニアリング

続きを読む

feature insights context
Blog

自律型攻撃はすでに始まっている。防御もそのスピードに追いつかなければならない。

自律型攻撃者によって、防御に使える時間は短くなっています。継続的な検出、修復、検証、予防で、セキュリティチームが攻撃に歩調を合わせる方法をご紹介します。

feature insights context
Blog

予防は、本質的に解決済みの問題なのでしょうか？

エージェントが生成するコードの予防策はアーキテクチャ上解決されていますが、開発を遅らせることなくセキュリティを守る制御を選ぶことが、依然として課題です。

Live Stream

修正エージェントをわかりやすく解説：見つけるより直すことが重要な理由

SnykのRemediation Agentが、セキュリティインテリジェンス、破壊可能性分析、検証を活用して、脆弱性をマージ可能なプルリクエストに変える仕組みをご覧ください。