1. はじめに
- 転職によって、これまで主で開発していたC++に加えて、他の言語でのソフトウェア開発も実施する必要が生じました。
- 勉強のため、自分の個人利用するUbuntuに開発環境をDockerで整えようと思ったのですが、開発ではいちいち「コンテナにログインして〜」をやりたくない（コンテナを意識したくない）と思いました。
- SW開発環境の現場では、Dockerに慣れていない人もいるので、開発環境の配布を意識するならば、Dockerを意識させたくない、という気持ちもあります。
- そのため、VSCodeからDockerコンテナの生成＆そのままコーディングができるRemote-Containersをお試ししてみようと思います。
- 例として、typescriptの環境を構築します。
2. 参考ページ
-
Microsoft社提供のNode.js & TypeScript
Microsoft社がGithub上でMITライセンスで公開しているdevcontainerのサイト。基本的な使い方はこのページに記載されています。 -
【図解】VScodeのRemote Container拡張機能とは？わかりやすく
Remote Containerの構成をわかりやすく図解していただいています。全体像を把握する際に参考にさせていただきました。 -
UbuntuにVSCodeをインストールする3つの方法
UbuntuへのVSコードのインストール方法を参照しました。 -
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コンテナを生成します。
- 押下すると、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を入れ込みたいくらいです。