Visual Studio Code Remote-Developmentのインストール

  • Remote SSHやRemote Containersが含まれている

RemoteDevelopment width=640

RemoteDevelopment width=640

Visual Studio Code Remote-Containers

Remote-ContainersでContainerを起動する

ローカルのdocker-compose.ymlのフォルダーを開いた状態

VSCodeでContainerを開く1 width=640

Remote-Containersで開く。
左下の><マークからコマンドパレットを開き、Remote-Containers: Open Folder in Container ...を選択

VSCodeでContainerを開く2 width=640

**How would you like to create your container configuraion ?**に対し、From a predefined container configuration definition ...を選択

VSCodeでContainerを開く3 width=640

Select a serviceに対して、docker-compose.ymlで定義したサービス名を選択（ここではweb）

VSCodeでContainerを開く4 width=640

.devcontainerというフォルダーが作成され、設定ファイル等が生成される。

VSCodeでContainerを開く5 width=640

VSCodeでContainerを開く6 width=640

docker-composeコマンドで起動した場合とVisuaStudioCodeでの動作の違い

docker-composeで起動した場合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
PS > docker-compose up -d

…略…

Creating docker_compose_redis_1 ... done
Creating docker_compose_web_1   ... done
PS > docker images -a
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
docker_compose_web   latest              76509309325d        14 seconds ago      213MB
<none>               <none>              5b6b84fd1be8        15 seconds ago      213MB
<none>               <none>              f5dbdf087e9b        15 seconds ago      213MB
<none>               <none>              c842dd8db35b        19 seconds ago      202MB
<none>               <none>              a1924e4016d1        20 seconds ago      202MB
<none>               <none>              55c33e5cf06c        26 seconds ago      98.4MB
<none>               <none>              c04b6508484b        26 seconds ago      98.4MB
<none>               <none>              bd8c16c6f245        26 seconds ago      98.4MB
redis                alpine              a49ff3e0d85f        3 weeks ago         29.3MB
python               3.7-alpine          8922d588eec6        4 weeks ago         98.4MB
PS > docker-compose ps
指定されたパスが見つかりません。
         Name                       Command               State           Ports
----------------------------------------------------------------------------------------
docker_compose_redis_1   docker-entrypoint.sh redis ...   Up      6379/tcp
docker_compose_web_1     flask run                        Up      0.0.0.0:5000->5000/tcp
PS > docker-compose stop
Stopping docker_compose_redis_1 ... done
Stopping docker_compose_web_1   ... done
PS > docker-compose ps  
指定されたパスが見つかりません。
         Name                       Command               State    Ports
------------------------------------------------------------------------
docker_compose_redis_1   docker-entrypoint.sh redis ...   Exit 0
docker_compose_web_1     flask run                        Exit 0

Visual Studio CodeのRemoteContainerで開いた場合

指定したサービス名（今回はweb）のContainerのコマンドが置き換えられている。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
PS > docker-compose ps
指定されたパスが見つかりません。
         Name                       Command               State           Ports
----------------------------------------------------------------------------------------
docker_compose_redis_1   docker-entrypoint.sh redis ...   Up      6379/tcp
docker_compose_web_1     /bin/sh -c while sleep 100 ...   Up      0.0.0.0:5000->5000/tcp
PS > docker-compose images
指定されたパスが見つかりません。
      Container              Repository        Tag       Image Id      Size  
-----------------------------------------------------------------------------
docker_compose_redis_1   redis                alpine   a49ff3e0d85f   27.9 MB
docker_compose_web_1     docker_compose_web   latest   76509309325d   203 MB
PS > docker ps -a
CONTAINER ID        IMAGE                COMMAND                  CREATED              STATUS              PORTS                    NAMES
0251a181bf08        docker_compose_web   "/bin/sh -c 'while s…"   About a minute ago   Up About a minute   0.0.0.0:5000->5000/tcp   docker_compose_web_1
189be0953add        redis:alpine         "docker-entrypoint.s…"   6 minutes ago        Up About a minute   6379/tcp                 docker_compose_redis_1
PS > docker images -a
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
docker_compose_web   latest              76509309325d        6 minutes ago       213MB
<none>               <none>              f5dbdf087e9b        6 minutes ago       213MB
<none>               <none>              5b6b84fd1be8        6 minutes ago       213MB
<none>               <none>              c842dd8db35b        6 minutes ago       202MB
<none>               <none>              a1924e4016d1        6 minutes ago       202MB
<none>               <none>              bd8c16c6f245        7 minutes ago       98.4MB
<none>               <none>              55c33e5cf06c        7 minutes ago       98.4MB
<none>               <none>              c04b6508484b        7 minutes ago       98.4MB
redis                alpine              a49ff3e0d85f        3 weeks ago         29.3MB
python               3.7-alpine          8922d588eec6        4 weeks ago         98.4MB

Remote-ContainersでContainerでの開発

Remote-Containersの基本的な動作

app.pyを編集して、flask runを起動すると新しいアプリで実行できる。

.devcontainerフォルダーには開発用のdocker-compose.ymlが生成され、元のdocker-compose.ymlの設定をオーバーライドする設定が行われている。

  • 開いたローカルホスト側のフォルダーをContainer側のworkspaceディレクトリでマウント
  • commandで指定されたコマンドを/bin/sh -c "while sleep 1000; do :; done"に置き換える

VSCodeでContainerを開いた状態 width=640

拡張機能（Extention）のインストール

対象のContainerで使用する開発言語等の拡張機能は通常Installという表記だが、Install on Dev Container: Existing Docker Compose...という表記となっていて、Container側にインストールされる（Remote-SSHと同様）。

VSCode Remote-Containerへの拡張機能インストール width=640

.devcontainerフォルダーにあるdevcontainer.jsonはVisual Studio Codeの拡張機能を自動インストールする設定がある。
Pythonを使用するなら、ms-python.ptyhonがIDになる。

以下はpython開発で使用する**Python Extension Pack(donjayamanne.python-extension-pack)とDocker(ms-azuretools.vscode-docker)**の場合。

1
2
3
4
"extensions": [
  "donjayamanne.python-extension-pack",
  "ms-azuretools.vscode-docker"
]

docker-compose.ymlや.devcontainersの変更が検知されるとRebuildをするように促される。
Rebuildを実行すると、extentionsで指定した拡張機能がインストールされた状態になっている。

alter_message width=640