vscodeを用いてdockerをクリックのみで操作する

3 min read

概要

この記事はvscodeの拡張機能とdocker-compose.ymlを用いることで、初心者には入力が難しいdockerコマンドを使わずにvscode上のクリック操作のみでdockerを使用(コンテナの起動・停止・削除)する方法について紹介します。

docker始めたけど、コマンド覚えるの面倒だな~という方には良いかもしれません。

本記事はdockerとdocker-composeがインストールされていることを前提としています。
お使いの環境がWindows10 Homeの場合は下記の記事を参考にしてください。 Windows10の場合、Docker for Desktopをインストールするとdocker-composeも入ります。

https://zenn.dev/nkys39/articles/install-docker-win10

今回使うvscodeの拡張機能

DockerRemote Developmentを拡張機能からインストールします。
インストールすると左のサイドバーにDockerロゴ、左下にRemote Developmentロゴが現れます。

vscodeを用いてdockerをクリックのみで操作する使い方

今回は例題としてUbuntu18.04のイメージを操作してみます。

新規フォルダの作成

まず、新しいフォルダを作ります。フォルダ名はdockerにしました。
そのフォルダをvscodeで開きます。

Dockerfiledocker-compose.ymlの作成

下記のような感じになっていると思いますので、フォルダ名の横の「新しいファイル」ボタンをクリックして、Dockerfile,docker-compose.ymlというファイルを作成します。

それぞれのファイルには下記のように記載します。

Dockerfile
FROM ubuntu:18.04
docker-compose.yml
version: '3'
services:
  test:
    build: .
    stdin_open: true
    tty: true

Dockerfileは特に説明不要かと思いますが、ubuntuの18.04イメージを基にしています。
docker-compose.ymlは、version3としています。
services:は全体の構成をするコンテナの設定をするという意味。
test:はコンテナ名で任意です。
build: ..で同階層にあるDockerfileを指定してビルドし、イメージを作成します。
stdin_open: truetty: trueはコンテナを起動直後に閉じないようにするためのもので、docker runコマンドのオプション-itに相当します。-i=stdin_open,-t=ttyになります。

クリック操作でdockerコンテナを立ち上げてみる

これで準備が整ったので、docker-compose.ymlを右クリックします。
すると、下に4つのCompose~という項目があります。
Compose Upを選択すると$ docker-compose -f "docker-compose.yml" up -d --buildが実行され、実行結果が下部のターミナルに表示されます。
特にエラーなくdoneが出れば成功で、コンテナが起動しています。
コンテナが起動しているのを確かめるため、サイドバーのdockerロゴをクリックします。
Compose Downはコンテナの終了(削除),Compose RestartはDown + Upです。

クリック操作でdockerコンテナの中に入る

サイドバーのdockerロゴをクリックすると、下記のようにCONTAINERSの場所に起動しているコンテナが表示されます。表示されているコンテナ名docker_testはdocker-compose.ymlのフォルダ名_コンテナ名となっております。
これを右クリックし、Attach Shellをクリックすることで、$ docker execが実行され、コンテナの中に入り、下のターミナルで操作することができます。
また、Removeをクリックすることで、コンテナを削除できます。

また、Attach Visual Studio Codeをクリックすることで、新規のvscodeが立ち上がり、dockerコンテナ内のファイルを編集できます。さらにこのウインドウ上タブの「ターミナル」⇒「新しいターミナル」を選択することでコマンド操作も可能です。

クリック操作でdockerイメージを操作する

CONTAINERSの下にあるIMAGESにはdockerイメージが表示されます。各イメージのタグを右クリックすることで、Runでの起動やRemoveでの削除などが実行できます。

注意点

Dockerfileを試行錯誤していると下記のようにIMAGESの場所に<none>というイメージができます。これは上書きされた残骸なのでPrune...ボタンをクリックすると一括で削除できます。

まとめ

vscodeの拡張機能DockerRemote Developmentをインストールして、新しいフォルダにDockerfiledocker-compose.ymlファイルを設置するだけで、vscode上のクリック操作のみでdockerが使用できました。
長々と入力していたdockerコマンドは全てdocker-compose.ymlの形式に置き換えられると思いますので、是非お試しください。

参考ページ

Dockerfileの書き方

https://docs.docker.jp/engine/articles/dockerfile_best-practice.html

docker-compose.ymlの書き方

https://qiita.com/zembutsu/items/9e9d80e05e36e882caaa#devices

https://zenn.dev/suiudou/articles/3b32a846655aef

Discussion

ログインするとコメントできます