Visual Studio CodeのRemote Development 機能を使い、Docker Desktopで動かしているコンテナにアクセスする
目次
はじめに
本記事ではタイトルの通り、Visual Studio CodeのRemote Development 機能を使い、Docker Desktopで動作させているコンテナ内のソースコードをWindows上で動作しているVisual Studioで表示編集できるようにしましょう、という記事になります。
Remote Development環境を調べ始めたけど、どう使えば良いかイメージが湧かない、という方やDocker Desktopのファイル共有の仕組みを使っているけど遅すぎて使い物にならない、あるいはWindows上に開発環境を作りたいけどちょっと面倒、という方向けの記事となります。
このVisual Studio CodeのRemote Development環境については公式で以下の説明となっています。
https://code.visualstudio.com/docs/remote/remote-overview
そしてこちらが公式から引用した動作のイメージ図。わかるようでわからない…というのが私でした！
本記事では Local OS をWindowsとし、Remote OSをDocker for Windowsで動かしているUbuntuのコンテナ、とした際の設定方法について記載します。
Docker for WindowsでUbuntu環境を構築する手段についてはこちらの記事をご参照下さい。
実施内容
事前準備
アクセス先のコンテナでSSHによるアクセスを許可している必要があります。ポート22のSSHでも問題ありませんし、上記の記事で書いているように49555を使用するSSHでも問題はありません。
事前に対象にアクセスが出来るは確認しておきましょう。
Visual Studio Code Remote – SSH のインストール
ここまでで作業が半分終わっています。Extensionのタブからremoteと検索し、Remote – SSHをダウンロードしましょう。
アクセス情報の設定
Remote – SSHの extensionがインストールされると左のタブにRemote Connectionのタブが追加されます。
SSH TARGETの歯車マークをクリックすることで”接続先”リスト”を編集することが可能です。
接続先リストはuser名の下にある.ssh/configにします。
以下のように、configファイルを記載しました。パスワードはここでは入力しません。接続先が自分のPCでない場合はHostnameにIPアドレスを指定する良いかと思います。
Visual Studio CodeからDockerコンテナにアクセス
上記の設定が完了すると接続先リストが表示されるようになりますので、接続先の右側のフォルダをクリックします。
対象がLinuxなのでLinuxを選択します。
迷わずContinueを選択します。
こちらで接続先のユーザーのパスワードを入力します。
ここまで問題がなければ左下の表示がこのようになります。
接続した際、自動でフォルダを開いてはくれませんので、画面左のフォルダメニューを開きます。
開くフォルダを聞かれるので、選択して下さい。
パスワードの再確認が行われ、その後、作成者を信用するか？というダイアログボックスが出ますので、Yesとして下さい。
無事、Dockerコンテナ内のファイルにVisual Studio Codeからアクセス出来ることが確認出来ました。
おまけ
Docker desktop for windowsで動かしているDockerコンテナの場合、Remote – SSHのExtensionを利用せずとも、DockerのExtensionを入れることで以下のようにファイルの参照が行うことが可能です。私の場合はこっちの方が簡単で良かったかもしれません。。
さいごに
本記事ではVisual Studio CodeのRemote – SSHのExtensionを利用して、Dockerコンテナ内のファイルをVisual Studio Codeから参照・編集するための設定方法について説明しました。
こちらの記事がこれからVisual Studio Codeを利用される方の一助になれば幸いです。