はじめに

表題の通りです。
今までDockerもVSCodeも別々に使っていました。
今更ですがDockerでVSCodeを使えるようにしていきます。

Remote Development with VS Code

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

その前に

まず、使わないやり方
・ローカルで開発したソースをDockerにコピーする
・ローカルの特定ディレクトリをDockerにマウントする

ローカルで開発したソースをDockerにコピーする

以前、使わないやり方でRust公式ドキュメントを試したことがあるので内容はこちらを参考にしてください。

Rust公式ドキュメントをDockerコンテナ上で進めてみる(1. 事始め, 2.数当てゲーム)

こちらでは、以下の役割分担となっていました。

作業ローカル環境(PC)開発環境(Docker)Rustのインストールー○Rustのコーディング○ーRustのビルドー○Rustの実行ー○

使っていた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.

スクリーンショット 2021-08-01 14.58.45.png

設定

まずは、適用するプロジェクトを新規に用意します。
※すでにDockerfileを使っているものへの適用も可能です。

予めGitHubから適用するプロジェクト作成しクローンします。

$ git clone git@github.com:c3drive/smart_dog.git

お試しでクイックスタートに従って進める

インストール同様こちらの手順から進めます。
Developing inside a Container - Quick start

スクリーンショット 2021-08-01 16.19.25.png
スクリーンショット 2021-08-01 17.08.02.png

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

スクリーンショット 2021-08-01 17.15.45.png
スクリーンショット 2021-08-01 17.19.21.png
スクリーンショット 2021-08-01 17.23.34.png

問題なさそうです。

実践

スクリーンショット 2021-08-01 18.00.10.png
スクリーンショット 2021-08-01 18.27.46.png
// 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"
}

コンテナの設定を変更した時

スクリーンショット 2021-08-01 18.37.40.png

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

スクリーンショット 2021-08-01 18.47.33.png

その他

スクリーンショット 2021-08-01 18.53.03.png
スクリーンショット 2021-08-01 19.17.57.png

また、コネクション切断をせずにVSCodeを終了させるとコンテナは起動し続けます。

おわりに

簡単にDockerでの開発ができるようになったのでこれから、Webアプリを作ろうと思います。
ここまで、読んでいただきありがとうございました。

[追記]Docker+VSCode環境にて、RustでWebアプリ作りました。

こちらにはGitHubのソースパスも貼っていますが、Docker-Composeを使いました。

参考

今回は、以下サイトを参考にさせていただきました。

    • Developing inside a Container

 

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

 

    Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット
广告
将在 10 秒后关闭
bannerAds