Go
Docker
VSCode

Dockerで立ち上げた開発環境をVS Codeで開く!

待望のリモート開発機能がやってきました!

発表記事はこちら Remote Development with VS Code

この機能を使うと、以下の3つの環境にVSCodeからリモート接続して開発することができるようになります。


  • Docker上で動作しているWorkspace

  • SSHで接続可能なリモートサーバーで動作しているWorkspace

  • WindowsのWSLで動作しているWorkspace


Docker開発環境への接続を試す

個人的に一番欲しかった Docker への接続をGoの開発環境に追加する形で試してみます。


試した環境


  • macOS Mojave 10.14.4

  • Docker Desktop 2.0.0.3

  • Docker Engine 18.09.2

  • VS Code 1.34.0-insider


VS Code の設定

2019/05/03時点で試すには、 Visual Studio Code - Insiders が必要なので、開きます。

スクリーンショット 2019-05-03 14.23.22.png

Remote - Containers のExtensionを Insiders にインストール。 (まだ発表されたばかりで表示順序が低いのでスクロールして探す)

スクリーンショット 2019-05-03 14.35.12.png


開発リポジトリの設定

Quick Start として各開発環境をDockerで動かす例が用意されているので、参考にしつつ進めていきます。

https://github.com/Microsoft/vscode-remote-try-go を参考にしますが、docker-compose ベースではなかったので、docker-composeが使えるように少し変更を加えたものを用意したので、その環境をまず動かしてみましょう。

git clone https://github.com/yoskeoka/remote-dev-go

いつもならこのCloneしたディレクトリに移動するところですが、このディレクトリを Remote - Containers Extension で開きます。

開いたら、左下の緑のアイコンをクリック。

スクリーンショット 2019-05-03 17.03.58.png

Remote-Containers: Open Folder in Container... を選択します。

スクリーンショット 2019-05-03 17.04.10.png

remote-dev-go を Clone した先のディレクトリを開きます。

開くと、 docker-compose の build が走るのでしばらく待ちます。

スクリーンショット 2019-05-03 17.27.34.png

これでDocker内部で動作している開発環境(これを リモート開発環境 といいます)にVS Code で接続出来ました。

通常通りに開発できますし、~/.gitconfig をコピーしているので、Gitの操作もローカル開発環境と同じように出来ます。

試しに Goのコードを動かしてみます。

https://github.com/Microsoft/vscode-remote-try-go から拝借した server.go を起動して、自動リロードがかかるようにMakefile を用意しているので、それを実行します。

VS Codeの TERMINAL タブで bash を起動して make を実行します。


リモート開発環境

$ make start

reflex -g '**/*.go' -s -- sh -c "make build && ./bin/server"
[00] Starting service
[00] make[1]: Entering directory '/root/workspace'
[00] go build -o bin/server server.go
[00] make[1]: Leaving directory '/root/workspace'
[00] Server listening on port 9080

実行したものは docker-compose.yml に Port Forward の設定をしているため、ローカル開発環境からでも curl 等で実行できます。


ローカル開発環境

$ curl localhost:9080

Hello remote world!


Git 操作

Tips にある .gitconfig の共有を行なっているため、リモート開発環境から、 VS CodeのGit統合機能で操作することも、 git コマンドで操作することも出来ます。


リモート開発環境の設定を変更した場合

リモート開発環境に接続している場合は、左下の緑ボタンから Remote Containers: Rebuild Container を選択して反映することができます。


リモート開発環境へ再接続する

VS Code を開いた状態で、 左下の緑アイコンまたは、コマンドパレットから Remote-Containers: Open Folder in Container... を選択して、remote-dev-go リポジトリのディレクトリを再度開きます。


リモート開発環境を完全に停止する

docker-compose で起動しているため、docker ps などで Docker Container を削除して下さい。

$ docker ps

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
dd24fb7b0c8a remote-dev-go_remote-dev-go "sleep infinity" 25 minutes ago Up 25 minutes 0.0.0.0:9080->9080/tcp remote-dev-go_remote-dev-go_1
f9f88e005b5a phpmyadmin/phpmyadmin "/run.sh supervisord…" About an hour ago Up About an hour 9000/tcp, 0.0.0.0:8080->80/tcp remote-dev-go_phpmyadmin_1
93a095708b76 mysql:8 "docker-entrypoint.s…" About an hour ago Up About an hour 0.0.0.0:3306->3306/tcp, 33060/tcp remote-dev-go_mysql_1


リモート開発環境の管理


VSCode Extensions の管理

リモート開発環境は ローカル開発環境とは別で VS Code Extensionsを追加することが可能です。

スクリーンショット 2019-05-03 17.47.44.png


settings.json の管理

.devcontainer/settings.vscode.json の内容をコピーする記述がリモート開発環境の.devcontainer/Dockerfile にあります。

今回用意している例では、 GOPATHをVS Codeに明示するために以下のようになっています。


.devcontainer/settings.vscode.json

{

"go.gopath": "/go"
}


開発用のコマンドの管理

Goで開発しているサーバーをコードの変更を検知して自動リロードをかけるための reflex コマンドのインストールを、 .devcontainer/Dockerfile に記述しています。

必要に応じて Dockerfileに使用するコマンドのインストールを追記していけば、開発チーム内で環境の共有が簡単に出来そうです。


既存の開発用コンテナとの共存

コンテナベースでのデプロイのためのDockerfileや、ローカル開発環境でNginx, MySQL等の依存をdocker-composeを使って管理している場合は多いと思います。

自分の普段開発している環境でもdocker-compose.ymlで色々と立ち上げているので、その辺とうまく共存できるようにリモート開発環境が立ち上がるように設定を導入してみました。

具体的には、プロジェクトルートに元々ある(という想定の) docker-compose.yml には一切リモート開発環境関連の記述を入れず、.devcontainer/docker-compose.extend.yml にリモート開発環境の記述をしています。


.devcontainer/docker-compose.extend.yml

version: '3'

services:
dev:
build:
context: .devcontainer
dockerfile: Dockerfile
volumes:
- .:/root/workspace
- ~/.gitconfig:/root/.gitconfig
ports:
- 9080:9080
command: sleep infinity

この追加の Docker Compose 設定については、 .devcontainer/devcontainer.json


.devcontainer/devcontainer.json(一部)

    "dockerComposeFile": [

"../docker-compose.yml",
"docker-compose.extend.yml"
],

のように書いておくことで、リモート開発環境の起動時に次のように両方をうまく読み込んでくれるため、既存のDocker関連の設定を壊す必要はありません。


リモート開発環境起動時に実行されるdocker-compose

docker-compose -f /元々の/docker-compose.yml -f /リモート開発環境用の/docker-compose.extend.yml up -d --build



まとめ

これで開発のための環境をローカルに構築しなくても、 Docker と VSCode がインストールしてあれば開発出来るようになりそうです。

VS Code は Code Server として動作させ、ブラウザから操作するということも出来るようになってきているようなので、組み合わせれば Docker とブラウザさえあればどんな開発環境でもローカル環境を汚すことなく起動できるようになるかもしれません。

また、発表当日からドキュメントExamplesの充実具合が凄いです。

この開発リソースの多さが VS Code の強みと言えると思います。


参考

リモートサーバーにSSHする場合の記事もありました。