VSCode + Remote Container でtypescriptの開発環境を試す。

1. はじめに

• 転職によって、これまで主で開発していたC++に加えて、他の言語でのソフトウェア開発も実施する必要が生じました。
• 勉強のため、自分の個人利用するUbuntuに開発環境をDockerで整えようと思ったのですが、開発ではいちいち「コンテナにログインして〜」をやりたくない（コンテナを意識したくない）と思いました。
  • SW開発環境の現場では、Dockerに慣れていない人もいるので、開発環境の配布を意識するならば、Dockerを意識させたくない、という気持ちもあります。
• そのため、VSCodeからDockerコンテナの生成＆そのままコーディングができるRemote-Containersをお試ししてみようと思います。
  • 例として、typescriptの環境を構築します。

2. 参考ページ

1. Microsoft社提供のNode.js & TypeScript
   
   Microsoft社がGithub上でMITライセンスで公開しているdevcontainerのサイト。基本的な使い方はこのページに記載されています。
2. 【図解】VScodeのRemote Container拡張機能とは？わかりやすく
   
   
   Remote Containerの構成をわかりやすく図解していただいています。全体像を把握する際に参考にさせていただきました。
3. UbuntuにVSCodeをインストールする3つの方法
   
   UbuntuへのVSコードのインストール方法を参照しました。
4. VSCodeのRemote-ContainerでReact(Node.js+TypeScript)環境をサクッと構築する。
   
   今回の検証内容は、ほぼこちらのページに記載されている内容をベースとしています。

3. 動作環境

3.1 ホストサーバ

• OS : Ubuntu 20.04
• CPU : Intel(R) Pentium(R) CPU G4560 @ 3.50GHz
• RAM : 8GB
• Software
  • Docker : 20.10.5
  • VSCode : 1.59.0

前提事項

• 参考ページ[3]に記載されるMicrosoft社のリポジトリからVSCodeをインストールしています。
• 参考ページ[4]に記載されるVSCodeプラグインのDockerとRemote-Containers、日本語化はインストール済みとしています。

4. おためし

4.1. Microsofts社のdevcontainer

• 適当にプロジェクトフォルダを定めて、VSCodeの「フォルダを開く」からフォルダを開く。
  • ここでは「typescript-dev」というフォルダで作業します。typescriptフォルダは空フォルダです。
• 「表示」→「コマンドパレット」を開きます。
  
• コマンドパレットに「type」と入力して、補完される「Node.js & TypeScript」を選択します。選択すると、Node.jsのバージョンを聞かれるので、defaultの16を選択します。
  
  
• プロジェクトフォルダにtypescriptのremote container関連のコンフィグがダウンロードされます。
  
• VSCode左下にある「＞＜」みたいなボタンを押下して、「Reopen in Container」を押下します。
  • 押下すると、VSCodeがtypescript開発用のdockerコンテナを生成します。
    
• 左側のツリーが下図のようになり、コンテナ内での開発環境を示すようになります。
  
• ターミナルでコンテナの稼働状態を確認すると、以下のようになります。

$ docker container ls
CONTAINER ID   IMAGE                                                     COMMAND                  CREATED         STATUS         PORTS     NAMES
f1b712497ba1   vsc-typescript-dev-845af54d9de0baec27ffa4e44fac638d-uid   "/bin/sh -c 'echo Co…"   4 minutes ago   Up 4 minutes             blissful_ishizaka

$ docker image ls
（必要な箇所のみ）
REPOSITORY                                                TAG     IMAGE ID       CREATED         SIZE
vsc-typescript-dev-845af54d9de0baec27ffa4e44fac638d-uid   latest  153522c4976f   15 hours ago    1.12GB
mcr.microsoft.com/vscode/devcontainers/typescript-node    0-16    74a984db505d   4 days ago      1.12GB

• VSCode左下にある「＞＜」みたいなボタンを押下して、「Show Container Log」を押下して、コンテナ起動までのログを確認すると、build -> runの順で起動がしていることがわかります。
  • 起動時に、ホスト側のプロジェクトフォルダを/workspace以下にマウントしているようです。
  • VSCode右下のターミナルエリアで、「＋」を押下するとコンテナ内ターミナルを開くことができます。
    

（中略）
Run: docker build -f /（プロジェクトdirのパス）/typescript-dev/.devcontainer/Dockerfile -t vsc-typescript-dev-845af54d9de0baec27ffa4e44fac638d --build-arg VARIANT=16 /（プロジェクトdirのパス）/typescript-dev/.devcontainer
（中略）
Run: docker run --sig-proxy=false -a STDOUT -a STDERR --mount type=bind,source=/（プロジェクトdirのパス）/typescript-dev,target=/workspaces/typescript-dev --mount type=volume,src=vscode,dst=/vscode -l vsch.local.folder=/（プロジェクトdirのパス）/typescript-dev -l vsch.quality=stable -l vsch.remote.devPort=0 --entrypoint /bin/sh vsc-typescript-dev-845af54d9de0baec27ffa4e44fac638d-uid -c echo Container started

• VSCodeのツリーからプロジェクトフォルダ直下にHelloWorld.tsファイルを作成し、以下のようなHelloWorldを記述します。
  

console.log("HelloWorld! TypeScript.");

• VSCode上部の「実行」→「デバッグなしで実行」を実行したとき、デバッグコンソールエリアに「HelloWorld! TypeScript.」が表示されれば成功です。
  • または、ターミナルエリアでコマンドでコンパイルすることもできます。

node ➜ /workspaces/typescript-dev $ ls
HelloWorld.ts
node ➜ /workspaces/typescript-dev $ tsc HelloWorld.ts 
node ➜ /workspaces/typescript-dev $ ls
HelloWorld.js  HelloWorld.ts
node ➜ /workspaces/typescript-dev $ nodejs HelloWorld.js
HelloWorld! TypeScript.
node ➜ /workspaces/typescript-dev $ 

• 終了するときは、VSCode左下にある「＞＜」みたいなボタンを押下して、「リモート接続を終了する」を押下することで終了できます。
  • コンテナはstop状態となる。（rmはされない）

4.2. 所感

• 使用してみたところ、そのまま使うと、毎回Docker buildが実行されて、コンテナイメージが増得てしまうことが微妙に感じました。
  • ただし、これはdevcontainer.jsonの設定でdockerComposeFileを指定すればよさそうです。
  • ↑　docker-compose.ymlでimageを指定できるのですが、指定したimageをベースにVSCodeがさらにdocker buildしてしまう状態です。UIDに基づいてbuildが走っているっぽいのですが、原因がよくわからないです。（ご存知の方がいらっしゃいましたら教えていただきたく。。。）
• ただ、VSCodeの「Reopen in Container」でコンテナを開かなくても動作中のコンテナにattachすることもできるので、その方式でも良い気がします。

4.3. Attachでコンテナ接続

• フォルダ内のファイル構成は以下のような感じです。
  • docker-compose.ymlで指定するimageは4.1.で利用したMicrosoft社提供のイメージを使用します。

$ tree ../typescript-dev/
../typescript-dev/
├── HelloWorld.ts
└── docker-compose.yml

0 directories, 2 files

$ cat docker-compose.yml 
version: '3'
services:
  develop-env:
    image: mcr.microsoft.com/vscode/devcontainers/typescript-node:0-16-buster
    volumes:
      - ./:/workspace/
    command: sleep infinity

• VSCodeを開き、プロジェクトのフォルダを開きます。
• docker-compose.ymlファイルで右クリック→「Compose Up」でコンテナを起動させます。

• VSCode左下にある「＞＜」みたいなボタンを押下して、「Attach to Running Container...」を選択します。
  • どのコンテナにアタッチするか問われるので、コンテナを選択します。
  • 選択後、コンテナにアタッチした状態で別ウィンドウでVSCodeが開きます。
  • コンテナにアタッチしたVSCodeにて、プロジェクトフォルダを開けば開発ができる。

• 終わりするときは、docker-compose.ymlファイルで右クリック→「Compose Down」でコンテナを停止＆削除させます。

5. おわりに

• Remote Container便利ですね。巷でみなさんが活用されているのがよくわかりました。
• docker-compose.yml指定時のdevcontainerの挙動（再度buildが走る）がちょっとよくわからないです。。。
• Attachが使えるだけでもすごく便利です。既存の開発環境コンテナにVSCode Serverを入れ込みたいくらいです。