Help us understand the problem. What is going on with this article?

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/06/06 に Visual Studio Code - Stable でも使えるようになりました!!

スクリーンショット 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 で開きます。

開いたら、左下の青のアイコンをクリック。(Insiders を使っている人は緑)

スクリーンショット 2019-06-07 3.08.29.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する場合の記事もありました。

yoskeoka
Gopherです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした