はじめに
表題の通りです。
今までDockerもVSCodeも別々に使っていました。
今更ですがDockerでVSCodeを使えるようにしていきます。
Remote Development with VS Code
この機能を使うと、以下の3つの環境にVSCodeからリモート接続して開発できるようになります。
その前に
まず、使わないやり方
・ローカルで開発したソースをDockerにコピーする
・ローカルの特定ディレクトリをDockerにマウントする
ローカルで開発したソースをDockerにコピーする
以前、使わないやり方でRust公式ドキュメントを試したことがあるので内容はこちらを参考にしてください。
Rust公式ドキュメントをDockerコンテナ上で進めてみる(1. 事始め, 2.数当てゲーム)
こちらでは、以下の役割分担となっていました。
使っていたDockerfile
FROM rust:latest
WORKDIR /usr/src/projects
COPY . .
# 2.数当てゲームをプログラミングする
RUN cargo init guessing_game --bin && \
cd /usr/src/projects/guessing_game && \
cargo build
WORKDIR /usr/src/projects/guessing_game
CMD ["cargo", "run"]
ローカルでuessing_game/main.rcを作成しディレクトリごとCOPY . .でDocker側にコピーしています。
ローカルを汚さないコンセプトでやっていたのでVSCodeにRust拡張を入れることもしませんでした。
公式ドキュメントをなぞるだけであれば問題ないですが、通常は動作確認が不可になるのでローカルにもRustを入れてビルド実行できるようにするかと思います。
以下はWeb上でRustの動作確認ができますので、ビルドが通ることの確認だけでしたらばローカルにIDEを入れる必要もないですがきちんとサービスを開発するのには向かないです。
https://play.rust-lang.org/
ローカルの特定ディレクトリをDockerにマウントする
開発とDocker内での動作確認(ビルド)を並行できる点が利点。
コピーとの違いは、DockerfileからCOPYとCMDを削除し、run時に以下を実行
# フルパスにしないとマウントされないので注意(空のフォルダがコンテナに作成されるだけ)
$ docker run -it -v /Users/yukokanai/work/docker/bootstrap/mounted_folder/{開発ごとに作成}:/new_dir {image名}
—
どちらの方法もターミナルウィンドウをいくつか準備したりとちょっと手間でした。
インストール
こちらの手順からインストールを進めます。
Developing inside a Container - Installation
VSCodeとDockerはローカル端末に入っているので以下の手順はスキップします。
1.Install and configure Docker for your operating system.
2.Install Visual Studio Code or Visual Studio Code Insiders.

設定
まずは、適用するプロジェクトを新規に用意します。
※すでにDockerfileを使っているものへの適用も可能です。
予めGitHubから適用するプロジェクト作成しクローンします。
$ git clone git@github.com:c3drive/smart_dog.git
お試しでクイックスタートに従って進める
インストール同様こちらの手順から進めます。
Developing inside a Container - Quick start


ファイルを作成・変更してみる



問題なさそうです。
実践


// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/rust
{
"name": "Rust",
"build": {
"dockerfile": "Dockerfile"
},
"runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],
// Set *default* container specific settings.json values on container create.
"settings": {
"lldb.executable": "/usr/bin/lldb",
// VS Code don't watch files under ./target
"files.watcherExclude": {
"**/target/**": true
}
},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"rust-lang.rust",
"bungcip.better-toml",
"vadimcn.vscode-lldb",
"mutantdino.resourcemonitor"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "rustc --version",
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "vscode"
}
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/docker-existing-dockerfile
{
"name": "Existing Dockerfile",
// Sets the run context to one level up instead of the .devcontainer folder.
"context": "..",
// Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
"dockerFile": "../Dockerfile",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
"extensions": []
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Uncomment the next line to run commands after the container is created - for example installing curl.
// "postCreateCommand": "apt-get update && apt-get install -y curl",
// Uncomment when using a ptrace-based debugger like C++, Go, and Rust
// "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],
// Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
// "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],
// Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
// "remoteUser": "vscode"
}
コンテナの設定を変更した時

コンテナのコネクション切断と再接続

その他


また、コネクション切断をせずにVSCodeを終了させるとコンテナは起動し続けます。
おわりに
簡単にDockerでの開発ができるようになったのでこれから、Webアプリを作ろうと思います。
ここまで、読んでいただきありがとうございました。
[追記]Docker+VSCode環境にて、RustでWebアプリ作りました。
こちらにはGitHubのソースパスも貼っていますが、Docker-Composeを使いました。
参考
今回は、以下サイトを参考にさせていただきました。
-
- Developing inside a Container
-
- Dockerで立ち上げた開発環境をVS Codeで開く!
- Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット