Denoでの開発環境をdevcontainerを使って整備する

本記事では、Deno の開発環境を Dev Container で整備する方法 を解説します。

Dev Containerを使うと、ローカル環境を汚さずにコンテナ内に開発環境を作れるので、チーム内での環境の差異を無視できたりと、様々なメリットがあります。

具体的には、以下の内容を扱います。

• Deno 用の Dev Container 設定ファイルを作る
• VS Code で Dev Container を利用する
• Deno の開発環境をコンテナ内で実行する

Deno 用の devcontainer 設定ファイルを作る

devcontainer.jsonの設定

{
    "name": "Deno",
    "dockerFile": "Dockerfile",
    "customizations": {
        "vscode": {
            "settings": {
                "terminal.integrated.shell.linux": "/bin/bash"
            },
            "extensions": [
                "denoland.vscode-deno"
            ]
        }
    },
    "forwardPorts": [8080],
	"remoteUser": "vscode"
}

nameはdDev Containerにつける名前なのでなんでもOKです。dockerFileは、コンテナのイメージを何から作成するかの指定で、今回はDockerfileを使うので、"Dockerfile"とします。
dockerComposeFileという設定を使えば、docker-composeも使えるみたいです。

customizationsでは、シェルの設定やpluginの設定をしています。このあたりはプロジェクトによると思いますので割愛します。

forwardPortsでは、ローカルからDev Containerへのポートフォワードの設定をしています。localhost:8080でのアクセスを、devcontainer:8080にポートフォワードしてくれます。ただ、Dev Container側でdenoを立ち上げて特定のportでリッスンしていると、勝手にDev Container側でポートフォワードしてくれるので、設定しなくても今回は動きます。

Dockerfileの設定

Dockerfileの方は、microsoftが用意しているDev Container用のイメージがこちらにあるので、ここから選ぶとsudo, git, curlなど諸々整備されているのでスムーズです。軽量なイメージを自分で指定するのも可能です。

ちなみに、

Due to an issue⁠ with Debian 10 / Buster and Ubuntu 20.04 / Focal that results in segmentation faults in libssl in a variety of scenarios, we only build arm64 architecture images that use one of the following operating systems:
Debian 11 / Bullseye
Debian 9 / Stretch
Ubuntu 21.04 / Hirsute
Ubuntu 18.04 / Bionic
We also do not build for images like dotnet if the related extension (in this case C#) does not support ARM64.

とのことで、M系のMacbookを使っている場合は使えないイメージもあるので注意してください。

FROM mcr.microsoft.com/vscode/devcontainers/base:debian-11

ENV DENO_INSTALL=/usr/local
RUN curl -fsSL https://deno.land/x/install/install.sh | sh

debian-11の環境に、denoをインストールするだけのシンプルなDockerfileです。

devcontainerの起動

vscodeにて、Dev Container用のプラグインをインストールします。
https://marketplace.visualstudio.com/items/?itemName=ms-vscode-remote.remote-containers

コマンドパレット（command + shift + p）にて、devcontainerを起動します。

Denoにてサーバーを起動してローカルから接続できることを確認

main.tsなどのファイルを作成し、Denoのサーバーを起動します。

main.ts

Deno.serve({ port: 8080 }, (_req: Request) => {
  return new Response("Hello, world!");
});

そして、 deno run main.ts というコマンドによりサーバーを立ち上げて、ローカルのブラウザでlocalhost:8080 を入力して、Hello, world!が表示されれば、無事Dev Containerでの起動に成功しています。

まとめ

これで、Deno の開発環境を Dev Container で簡単に整備できました。ローカル環境を汚さず、どこでも同じ環境で開発できるので、チーム開発においても非常に便利です。

今後は、この環境をプロダクションで使えるようにさらに整備し、記事にて解説したいと思います。