LoginSignup
6
7

More than 1 year has passed since last update.

@c3drive

DockerとVisual Studio Codeで開発環境を作る

Last updated at Posted at 2021-08-01

はじめに

表題の通りです。
今まで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.

3.Install the Remote Development extension pack.
VSCodeにて、「Remote Development」を選択し、インストールします。
スクリーンショット 2021-08-01 14.58.45.png

設定

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

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

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

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

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

VSCodeを開き、「Remote-Containers: Open Folder in Container...」を選択します。
スクリーンショット 2021-08-01 16.19.25.png
先ほどクローンしたプロジェクトを選択します。
コンテナのOSイメージはrustを使いたかったので、「Show All Definions...」を選択します。

スクリーンショット 2021-08-01 16.30.35.png
rustを選択すると設定が開始します。
完了後の画面は以下。VSCodeのTERMINALにてcargoが入っていることを確認します。
スクリーンショット 2021-08-01 17.03.02.png
ちなみに私のローカル環境にrustやcargoはインストールしていません。以下はローカルのターミナル画面。
コンテナが起動していることもついでに確認してみます。
スクリーンショット 2021-08-01 17.08.02.png
問題なく、動いていそうです。

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

まずは、VSCodeのTERMINAL（コンテナ）からcargo new
EXPLORERにhello_cargoフォルダが作成されました。
スクリーンショット 2021-08-01 17.11.49.png
ローカル環境でも作成されています。
スクリーンショット 2021-08-01 17.15.45.png

次にVSCodeエディタからファイル変更してみます。
src/main.rcに赤線部分を追記しました。
スクリーンショット 2021-08-01 17.17.15.png
まずはローカル環境で確認
スクリーンショット 2021-08-01 17.19.21.png

VSCodeではビルド実行までしてみます。
スクリーンショット 2021-08-01 17.23.34.png

問題なさそうです。

実践

動作がわかったところで、自身が使うDockerfileを使った環境にしていきます。
プロジェクトは先ほどのものを使いますが、Remote周りで作成されたものはすべて削除し、Dockerfileを作成します。
スクリーンショット 2021-08-01 17.41.24.png
（CMDがあると何か起きるかと思いましたが特に何も起きませんでした）
先ほどと同様に左下のマークから「Remote-Containers: Open Folder in Container...」を選択します。
OSイメージの選択画面が、先ほどとは違う表示となり、Dockerfileの選択肢に表示されているので選択します。
スクリーンショット 2021-08-01 17.49.56.png
無事起動しました。
スクリーンショット 2021-08-01 18.00.10.png

先ほどとはEXPLORERの構成と.devcontainer/devcontainer.jsonが異なります。
スクリーンショット 2021-08-01 18.24.24.png
スクリーンショット 2021-08-01 18.27.46.png
.devcontainer/devcontainer.jsonは、今後変更する必要が出てきそうでしたのでコードでも残しておきます。

用意されたrustを選択した場合
// 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"
}
既存のDockerfileを選択した場合
// 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"
}

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

Dockerfileを変更した時などは、リビルドを行います。
コンテナを起動した状態で左下の緑を選択するとこちらの選択肢が表示されますので、「Rebuild Container」を選択してください。
スクリーンショット 2021-08-01 18.37.40.png

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

コンテナを起動した状態で左下の緑を選択した後の画面をスクロールし、「Close Remote Connection」でコネクションが切れプロジェクトが閉じます。
スクリーンショット 2021-08-01 18.42.02.png
この時、コンテナも停止しします。（わかりづらいですが、今回NAMES「modest_chatelet」のコンテナを利用しており、ないことがわかります）
スクリーンショット 2021-08-01 18.42.57.png
再度コネクションするには、再度左下の緑を選択して、「Open Folder in Container」を選択し、先ほどまでコネクションしていたプロジェクトを選択します。スクリーンショット 2021-08-01 18.47.00.png
つながりました。
スクリーンショット 2021-08-01 18.47.33.png

その他

REMOTE EXPLORERにて、右クリック「Stop Container」を選択すると、停止後リロードを要求され、リロード後即起動されて停止することはできません。
スクリーンショット 2021-08-01 18.53.03.png
この挙動は、ローカルのターミナルから停止コマンドを実行しても同様でした。
再接続の挙動でもVSCodeでContainer接続可能なプロジェクトを開いた瞬間勝手にコネクションされていましたのでそのVSCodeを開いている限り停止はできないと思います。

せっかくなのでコンテナを削除したらどうなるかみておきます。
一度、「modest_chatelet」のコンテナを削除します。
その後、左下の緑を選択して、「Open Folder in Container」を選択し、先ほどまでコネクションしていたプロジェクトを選択します。
スクリーンショット 2021-08-01 19.17.57.png
ビルドが走り、勝手にコネクションされました。NAMESは「competent_allen」となり新しいコンテナで起動しています。

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

おわりに

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

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

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

参考

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

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7