vscodeおすすめ拡張機能（docker）

前提

vscodeとdockerのインストールが完了していることを前提とします。まだインストールしていないという方は以下参考にしてみてください。

vscodeが未インストールの方：「vscodeをインストールする（Windows）」

dockerが未インストールの方：「dockerをインストールする（Windows）」

vscodeでwslに接続する

まずはvscodeでWSLに接続してみましょう。vscodeを開いて左下の「><」のようなマークをクリックしましょう。

するとリモートウィンドウを何で開くか聞かれるので、WSLを選択します。（これを選択すると自動で拡張機能「WSL」がインストールされます。）

vscodeが開き直されて、「WSL: Ubuntu」に接続されます。下図のようになっていれば問題なく接続できています。

拡張機能Dockerのインストール

早速、拡張機能のインストールを行っていきましょう。

拡張機能Dockerを検索してインストールする

「拡張機能： マーケットプレイス」で「ms-azuretools.vscode-docker」と検索すると拡張機能Dockerが見つかります。

「拡張機能：マーケットプレイス」
ms-azuretools.vscode-docker

インストールを押下すると下図のようにアクティビティバーにDockerのアイコンが表示されます。

以上で拡張機能Dockerのインストール完了です。

「Failed to connect. Is Docker installed?」が表示されたら

「Failed to connect. Is Docker installed?」が表示される場合は「Docker Desktop」が起動していない可能性があります。

以下の手順で「Docker Desktop」を起動してみましょう。

まず、「Docker Desktop」を検索します。

「Docker Desktop」を選択して起動します。

「Docker Desktop」が起動したら、拡張機能Dockerのリロードボタンを押下してみましょう。すると下図のように「Failed to connect. Is Docker installed?」が消えて、コンテナが表示できると思います。

拡張機能Dockerを体験する

拡張機能Dockerを体験していきましょう。今回はおおむね「dockerを体験してみよう！」の手順をもとに拡張機能Dockerを使用すると、どのようになるのか見ていきましょう。

概要はpythonのイメージが作成されるようにDockerfileを作成し、実際にpythonを実行するような手順になっています。

Dockerfileを作成

まず「フォルダーを開く」を押下し、作業を行うフォルダーを開きましょう。

ディレクトリを選択します。ご自身で作業したいディレクトリを選択すればOKです。

今回はWSLで作成しているユーザの直下で作業していきます。

以下の内容でDockerfileを作成しましょう。

Dockerfile
FROM python:3.11.10

docker build 、images

次は「docker build」していきましょう。作成したDockerfileを右クリックして「Build image...」を押下しましょう。

次にイメージの名前を付けましょう。今回はわかりやすいように「python」としておきます。

イメージ名を入力して「Enter」を押下すると、下図のようにビルドが開始され、「IMAGES」に「python」のイメージが追加されていると思います。 この「IMAGES」欄が「docker images」相当の結果を表示していますね。

docker run 、ps

次は、作成したイメージをもとにコンテナを作成してみましょう。「python」イメージの「>」を押して「latest」を右クリックし、「Run Interactive」を押下しましょう。

ターミナルが起動し、pythonのコンテナに入った状態で表示されると思います。

本当にpythonの構文が実行できるのか、以下を張り付けて確認してみましょう。

ターミナル
import sys
print(sys.version)

上図を見ると、pythonしっかり動いていそうですね。また、「CONTAINERS」の欄に「python」が起動中で表示されているので、「docker ps」相当の動きをしていますね。

コンテナの停止・削除、イメージを削除

最後にコンテナの削除やイメージを削除を見ていきましょう。

以下コマンドでpythonを終了しましょう。

Ubuntuターミナル
exit()

下図を見ると「CONTAINERS」の欄から「python」が削除されましたね。コンテナ作成時にコンテナが停止するときに併せてコンテナを削除するオプションを付与しているようです。

イメージも削除しましょう。イメージを右クリックして、「Remove...」を押下すると確認ダイアログが表示されるので「Remove」で削除できます。

下図の「IMAGES」の欄から「python」のイメージが削除されましたね。以上で「コンテナの停止・削除、イメージを削除」完了です。

最後に

今回はvscodeの拡張機能Dockerを使用してdockerを操作してみました。特にimagesやpsコマンドは実行しなくても「IMAGES」や「CONTAINERS」の欄を見ればわかりそうですね。その他の操作も視覚的に操作できるので使いやすいと思います。