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

#**はじめに**

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

https://qiita.com/829yasubee/items/e556293639ae5bcad6cb

また、VSCodeもインストール済みで、"Japanese Language Pack for Visual Studio Code"拡張機能で日本語化済みです。
![スクリーンショット1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/5c60f9a9-0237-abf1-437c-8615b6cecab1.png)

#**環境構築手順**
###**"Docker"拡張機能のインストール**
VSCodeに"Docker"拡張機能をインストールします。
左側タブで[拡張機能]タブに切り替え、"Docker"というキーワードで検索。すると、検索結果に"Docker"拡張機能が現れるので、[インストール]ボタンをクリック。
![スクリーンショット2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/b6161a43-6ce2-c081-4d57-7992c59a8b07.png)
インストールが完了すると、左側タブに[Docker]タブが出現します。
![スクリーンショット3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/cb3f22b0-0b06-e57b-0219-c2da2b948833.png)

###**Docker Hubアカウントの作成**
VSCodeの左側タブで[Docker]タブに切り替えてみると、こんな感じの画面。
![スクリーンショット4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/3c68b558-3c1b-cc33-15fa-7b00da2ba190.png)
"Connect Registry..."のところが目についたので、Docker Hubアカウントも作成してみる事にします。アカウント作成しなくてもイメージは引っ張れるので、この作業は必須ではありません。今のところ、Dockerリポジトリに自作イメージを公開する予定もないのですが興味が湧いたので。

アカウント作成は簡単で、以下のURLにアクセスして、[Docker ID][Email][Password]を入力して、"規約への同意"と"ロボットじゃない"にチェックを入れ、[Sign Up]ボタンをクリック。
　[https://hub.docker.com](https://hub.docker.com)
![スクリーンショット5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/2659e26a-237f-c527-2f8c-7f08c3879301.png)
Choose a Plan画面が表示されるので[Continue with Free]ボタンをクリック（無料プランを選択）。
![スクリーンショット6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/f4156d46-c5d3-981f-20ee-f1ea9725628e.png)
Please verify your email address画面が表示されるので、メールが届いているか確認。
![スクリーンショット7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/de1445b0-ca42-b9c4-c271-f4c6e13515ea.png)
無事メールが届いていたので、[Verify email address]ボタンをクリック。
![スクリーンショット8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/57671fb7-fbe5-4f2b-d855-a73a302508b8.png)
Welcome to Docker画面が表示されれば、アカウントの作成は完了です。
![スクリーンショット9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/57d9c20c-1e6d-451b-1197-588048cde384.png)
ちなみに、Welcomeメールも届くのですが、"Whalecome to Docker"とは中々ユーモアがあっていいですね♪
![スクリーンショット10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/3d1fc46d-752c-f40c-5742-7be4e1a7e07d.png)
再び、VSCodeの左側タブで"Docker"タブに切り替え、[REGISTRIES]→[Connect Registry]ボタンをクリック。画面上部に表示される[Select the provider for your registry]からDocker Hubを選択。
![スクリーンショット11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/4922e6e5-49a1-1588-4da7-12c341db62a1.png)
[Enter your Docker ID]にDocker IDを入力して[Enter]キーを押す。
![スクリーンショット12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/5f66c880-fea2-cb6a-de97-95f9c57ec5ee.png)
[Enter your password or personal access token]にパスワードを入力して[Enter]キーを押す。アクセストークンでもいいみたいです。私はパスワードにしました。
![スクリーンショット13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/df0fd73f-5689-b932-9375-61496797361c.png)
無事Docker Hubにつながりました。
![スクリーンショット14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/3930e23f-f34b-0470-3490-9068248556a2.png)
Docker Hubのツリーを展開したけど、自作イメージがないからこれ以上は何もできない感じです。今のところは深追いしない事にしました。使いこなすのはだいぶ先になりそう・・・
![スクリーンショット15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/fc2bc453-cad6-234e-b420-eb93b7dd0d6a.png)

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

https://qiita.com/829yasubee/items/2eaf1dc517c1f3f7b64b

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

```powershell:実行コマンド
docker image pull ubuntu
```

"Docker"拡張機能上でUbuntuイメージが表示された。
![スクリーンショット16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/cdbf7f6e-883f-991e-6618-be57a3efe4fe.png)
イメージを展開して右クリックすると、こんな感じのメニューが出現。
![スクリーンショット17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/470e1c59-ff27-7ecb-63b4-10edaaaab99d.png)
イメージを走らせたり、削除したりできる模様。
再びVSCodeのターミナルに戻り、Ubuntuイメージからコンテナを作成。

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

"Docker"拡張機能上でUbuntuコンテナが表示された。
![スクリーンショット18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/1491021c-9d11-6d69-fcd7-48d57da68066.png)
コンテナを右クリックすると、こんな感じのメニューが出現。
![スクリーンショット19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/2def0014-c9bb-3cee-fa3a-f7c2a8cfad04.png)
コンテナを開始したり、削除したりできる模様。
試しに[Start]を選択。
![スクリーンショット20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/973fa63a-ee6b-6a7f-28e9-97dbc203311e.png)
コンテナが開始した。
コンテナを展開してみるとこんな感じ。コンテナの中身が見れます。
![スクリーンショット21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/6fefa69a-e4cb-6f4e-1496-2cc846cfe6a2.png)
コンテナが開始している状態で、コンテナを右クリックすると、こんな感じのメニューが出現。
![スクリーンショット22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/75a018a7-35e5-edaf-44ac-d910bef15672.png)
コンテナを修正したり、削除したりできる模様。
試しに[Attach Shell]を選択。
VSCodeだけでUbuntuコンテナの中に入れた。もう他のターミナルソフト要らないですね。便利すぎる！
![スクリーンショット23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206277/370ad503-0245-45d9-da42-1d8433799d01.png)
今日触った範囲では、Docker Desktop画面で見れる情報や出来る操作は、"Docker"拡張機能でも同様に出来るといった印象を持ちました。その他にも、docker-compose.ymlやDockerfileファイルの入力補完や文法エラーチェックをする機能もあるようで、どちらかと言うとそちらの方が重宝されているようですので、それは後日Docker Composeを使ってコンテナ作成にチャレンジする時に試したいと思います。

お疲れ様でした！