Visual Studio CodeのRemote Development 機能を使い、Docker Desktopで動かしているコンテナにアクセスする
目次
はじめに
Windows上でDocker Desktopを使ってLinuxコンテナを動かしていると、「コンテナ内のソースコードをそのままVisual Studio Codeで開いて編集したい」という場面に出くわします。Docker Desktopのファイル共有機能でも同期は可能ですが、反映が遅く感じたり、コンテナとホストのパスの違いに悩まされたりしがちです。
そこで役立つのが、Visual Studio CodeのRemote Development機能です。SSH経由でコンテナに直接接続し、あたかもローカルのフォルダを開くような感覚で、コンテナ内のファイルを参照・編集できます。本記事では、Windows上のDocker Desktopで動作しているUbuntuコンテナに対して、Remote Developmentの中でもRemote – SSH拡張機能を使ってアクセスするまでの設定手順を解説します。同じような環境構築を検討している方の参考になれば幸いです。
Remote Development機能についての公式の説明は以下のページにまとまっています。
https://code.visualstudio.com/docs/remote/remote-overview
本記事ではLocal OSをWindows、Remote OSをDocker Desktop for Windowsで動かしているUbuntuコンテナとした場合の設定方法を紹介します。Docker DesktopでUbuntu環境を構築する手順自体は、以下の記事もあわせてご参照ください。
Windows 10 Home で Docker Desktop + WSL2 を使って Ubuntu 20.04 LTS を起動するまでの手順
また、コンテナ内にSSHで接続できるユーザーを作成する手順については、以下の記事で解説しています。
[Dockerfile] Ubuntuのコンテナでユーザー作成とSSHサーバ、nvmもインストールする、あと内容も簡単に解説する
事前準備：コンテナへのSSHアクセスを確認する
課題：Remote – SSHの設定を始める前に、そもそも対象のコンテナにSSHでアクセスできる状態になっているかを確認しておきたい。
解決策：Docker Desktop側でSSH用のポートをホストに公開し、TeraTermなどのSSHクライアントで一度接続確認をしておく。ポート番号自体は22番でも、任意のポート番号でも問題ありません。
事前に対象のコンテナへアクセスできることを確認しておきましょう。
実装内容：Remote – SSHでコンテナに接続する設定手順
1. Visual Studio Code Remote – SSH をインストールする
課題：Visual Studio Code単体ではSSH経由でリモート（コンテナ含む）に接続する機能を持っていない。
解決策：拡張機能タブからremoteと検索し、Remote – SSHをインストールする。これでリモート接続に必要な機能が追加される。
2. 接続先情報を .ssh/config に設定する
課題：接続先のホスト名やポート番号、ユーザー名を毎回手入力するのは手間がかかる。
解決策：Remote – SSHをインストールすると左のタブに追加される「Remote Connection」から、SSH TARGETSの歯車マークをクリックし、接続先リストを編集する。
接続先リストの実体は、ユーザー名フォルダの下にある.ssh/configファイルです。
configファイルには、以下のように接続先の情報を記述します。パスワードはここには記載しません。接続先が自分のPC以外（別のマシンやリモートサーバー）の場合は、HostNameにそのマシンのIPアドレスを指定するとよいでしょう。
Host YOUR_HOST_ALIAS
HostName localhost
User YOUR_USERNAME
Port 49555
3. Visual Studio CodeからDockerコンテナに接続する
課題：configファイルの設定だけでは、実際にコンテナに接続してファイルを開くところまで到達しない。
解決策：接続先リストに表示されたホストの右側にあるフォルダアイコンをクリックし、対話形式でプラットフォームやフォルダを選択していく。
接続先のプラットフォームを聞かれるので、対象がLinuxコンテナの場合はLinuxを選択します。
SSHのフィンガープリント確認が表示されるので、迷わずContinueを選択します。
続いて、接続先ユーザーのパスワードの入力を求められるので入力します。
ここまで問題がなければ、画面左下の表示が接続先のホスト名に変わり、接続が完了したことが確認できます。
接続しただけでは自動でフォルダが開かれないため、画面左のフォルダメニューを開きます。
開くフォルダを聞かれるので、コンテナ内で参照したいフォルダを選択します。
パスワードの再確認と、作成者を信用するかどうかのダイアログボックスが表示されるので、Yesとして進めます。無事、Dockerコンテナ内のファイルにVisual Studio Codeからアクセスできることが確認できました。
おまけ：Docker拡張機能を使う方法もある
Docker Desktop for Windowsで動かしているコンテナの場合、ここまで紹介したRemote – SSHの拡張機能を使わなくても、Dockerの拡張機能を入れることでコンテナ内のファイルを参照できます。SSHの設定をせずに済むため、簡単なファイル確認だけであればこちらの方が手軽かもしれません。
まとめ：Remote – SSHでDockerコンテナ内をシームレスに編集する
本記事では、Visual Studio CodeのRemote – SSH拡張機能を使い、Docker Desktopで動かしているコンテナ内のファイルをVisual Studio Codeから参照・編集するための設定手順を紹介しました。
- 事前のSSH接続確認：Remote – SSHの設定前に、対象のコンテナへSSHでアクセスできる状態になっているかを確認しておく
- .ssh/configへの接続先登録：ホスト名・ユーザー名・ポート番号を
.ssh/configに記述しておくことで、接続先リストから毎回選択するだけで接続できるようになる - プラットフォーム選択とフォルダを開く操作：接続後は自動でフォルダが開かれないため、プラットフォームの選択とフォルダを開く操作を手動で行う必要がある
SSHでの接続さえ通ってしまえば、あとの設定はそれほど難しくありません。Docker拡張機能でも同様のことができるため、用途に応じて使い分けるとよいでしょう。同じような構成を検討している方の参考になれば幸いです。