LoginSignup
8
6

More than 1 year has passed since last update.

VSCodeで"Docker"拡張機能を使ってみる

Last updated at Posted at 2021-12-13

はじめに

今日からはVSCodeとDockerを組み合わせながら色々使っていこうと思います。まずは、Ubuntuコンテナを作成し、それを"Docker"拡張機能で操作してみたいと思います。Docker Desktopは既にWindows10仮想マシンにインストール済みです。詳しくはこちらの投稿をご覧下さい。

また、VSCodeもインストール済みで、"Japanese Language Pack for Visual Studio Code"拡張機能で日本語化済みです。
スクリーンショット1.png

環境構築手順

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

VSCodeに"Docker"拡張機能をインストールします。
左側タブで[拡張機能]タブに切り替え、"Docker"というキーワードで検索。すると、検索結果に"Docker"拡張機能が現れるので、[インストール]ボタンをクリック。
スクリーンショット2.png
インストールが完了すると、左側タブに[Docker]タブが出現します。
スクリーンショット3.png

Docker Hubアカウントの作成

VSCodeの左側タブで[Docker]タブに切り替えてみると、こんな感じの画面。
スクリーンショット4.png
"Connect Registry..."のところが目についたので、Docker Hubアカウントも作成してみる事にします。アカウント作成しなくてもイメージは引っ張れるので、この作業は必須ではありません。今のところ、Dockerリポジトリに自作イメージを公開する予定もないのですが興味が湧いたので。

アカウント作成は簡単で、以下のURLにアクセスして、[Docker ID][Email][Password]を入力して、"規約への同意"と"ロボットじゃない"にチェックを入れ、[Sign Up]ボタンをクリック。
 https://hub.docker.com
スクリーンショット5.png
Choose a Plan画面が表示されるので[Continue with Free]ボタンをクリック(無料プランを選択)。
スクリーンショット6.png
Please verify your email address画面が表示されるので、メールが届いているか確認。
スクリーンショット7.png
無事メールが届いていたので、[Verify email address]ボタンをクリック。
スクリーンショット8.png
Welcome to Docker画面が表示されれば、アカウントの作成は完了です。
スクリーンショット9.png
ちなみに、Welcomeメールも届くのですが、"Whalecome to Docker"とは中々ユーモアがあっていいですね♪
スクリーンショット10.png
再び、VSCodeの左側タブで"Docker"タブに切り替え、[REGISTRIES]→[Connect Registry]ボタンをクリック。画面上部に表示される[Select the provider for your registry]からDocker Hubを選択。
スクリーンショット11.png
[Enter your Docker ID]にDocker IDを入力して[Enter]キーを押す。
スクリーンショット12.png
[Enter your password or personal access token]にパスワードを入力して[Enter]キーを押す。アクセストークンでもいいみたいです。私はパスワードにしました。
スクリーンショット13.png
無事Docker Hubにつながりました。
スクリーンショット14.png
Docker Hubのツリーを展開したけど、自作イメージがないからこれ以上は何もできない感じです。今のところは深追いしない事にしました。使いこなすのはだいぶ先になりそう・・・
スクリーンショット15.png

Ubuntuコンテナの作成

Ubuntuコンテナを作成します。下記投稿の「お試しでUbuntuコンテナを作成」セクションを参考にして作成してみます。

VSCodeのターミナルを開き、Ubuntuイメージをダウンロード。

実行コマンド
docker image pull ubuntu

"Docker"拡張機能上でUbuntuイメージが表示された。
スクリーンショット16.png
イメージを展開して右クリックすると、こんな感じのメニューが出現。
スクリーンショット17.png
イメージを走らせたり、削除したりできる模様。
再びVSCodeのターミナルに戻り、Ubuntuイメージからコンテナを作成。

実行コマンド
docker container create --name linuc -it ubuntu

"Docker"拡張機能上でUbuntuコンテナが表示された。
スクリーンショット18.png
コンテナを右クリックすると、こんな感じのメニューが出現。
スクリーンショット19.png
コンテナを開始したり、削除したりできる模様。
試しに[Start]を選択。
スクリーンショット20.png
コンテナが開始した。
コンテナを展開してみるとこんな感じ。コンテナの中身が見れます。
スクリーンショット21.png
コンテナが開始している状態で、コンテナを右クリックすると、こんな感じのメニューが出現。
スクリーンショット22.png
コンテナを修正したり、削除したりできる模様。
試しに[Attach Shell]を選択。
VSCodeだけでUbuntuコンテナの中に入れた。もう他のターミナルソフト要らないですね。便利すぎる!
スクリーンショット23.png
今日触った範囲では、Docker Desktop画面で見れる情報や出来る操作は、"Docker"拡張機能でも同様に出来るといった印象を持ちました。その他にも、docker-compose.ymlやDockerfileファイルの入力補完や文法エラーチェックをする機能もあるようで、どちらかと言うとそちらの方が重宝されているようですので、それは後日Docker Composeを使ってコンテナ作成にチャレンジする時に試したいと思います。

お疲れ様でした!

8
6
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
8
6