LoginSignup
1
1

More than 1 year has passed since last update.

DevContainer(Visual Studio Code Dev Containers)を使ってみた。

Last updated at Posted at 2023-01-14

Dockerの勉強を始めて最初にやってみたかったのが、Dockerで開発環境を作るというもの。

環境

VirtualBox6.1
ホストOS: Windows10 Home 20H2
ゲストOS: Ubuntu20.04 + Docker20.10.22 + Visual Studio Code1.74.2

※職場でもとりあえず無料で試してみたいため、Docker for Desktopを利用しない縛りのためこの環境です。
※Docker for Desktopを利用できる環境なら、VirtualBox不要です。
Windows10 + WSL2 + Docker for Desktopでお試しください。

【入門】VSCodeでDocker環境構築
https://qiita.com/tsuyotobi26/items/9d48fa676f4d55170b5e
によりますと

Docker Desktopを使わない場合、WSLでDockerを起動させることが条件となるが、
VSCodeのDefaultの設定ではDevContainersをWSLで実行することが有効になっていないらしい。
Settingsを立ち上げwslと検索し、□Dev>Containers:Execite in WSLにチェックを入れることで解消できる。

とのこと!!!

Visual Studioの準備

拡張機能をインストール
・Visual Studio Code Dev Containers
・Docker for Visual Studio Code
・Japanese Language Pack for VS Code(任意)

VSCode_DevContainers01.png

Dev Containersであらかじめ用意してあるひな形を利用してコンテナを作ってみる

  1. 左下の緑色のところからリモートウインドーを開く
    VSCode_DevContainers02.png

  2. Create Dev Container
    VSCode_DevContainers03.png

  3. Show All Definitions
    VSCode_DevContainers04.png

  4. 適当なのを選ぶ
    VSCode_DevContainers05.png

  5. Additional Options
    VSCode_DevContainers06.png

  6. 適当なのを選ぶ
    VSCode_DevContainers07.png

  7. 適当なのを選んでOK
    VSCode_DevContainers08.png

  8. 信用するのかの確認
    VSCode_DevContainers09.png

  9. 作成が始まって右下に表示が出る。show logをクリックすると
    VSCode_DevContainers10.png

  10. 作成している様子のログを確認することができる。初回はいろいろ元となるDockerイメージをダウンロードするので時間がかかる。
    VSCode_DevContainers11.png

  11. 作成が終わったら自動起動されます。
    VS Codeの中で(?)、コンテナの中のVS Codeが起動している状態です。
    (左下に緑色でDevContainer:Python3と表示が出ているので確認できます。)
    拡張機能を選んでみると、選んだものに応じた拡張機能があらかじめインストールされています。
    VSCode_DevContainers12.png

コンテナの終了

コンテナを終了するには、ファイルメニューから「リモート接続を閉じる」を選びます。

作成されたコンテナとイメージの確認

VS Code で クジラマーク(拡張機能のDocker)をクリック。
VSCode_DevContainers13.png

作成したコンテナをカスタマイズ

将来的には、コンテナをカスタマイズできるようになりたいのですが、ひとまず、今日はここまで!

1
1
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
1
1