※この記事は、Visual Studio Code Advent Calendar 2022の5日目の記事です。
はじめに
私は、ずっとVSCodeを使ってて、VS Code Meetupでも何回か発表もさせていただきました。
その中で「Remote-Containerでnext.js 環境を作った話」をした際に「Remote Development」「Remote Containers」などがごちゃごちゃになっている方も多かったので(私もそうでした)、ここでそれをまとめた記事にしようと思いました。
Remote Developmentってなに？
まず「Remote Development」ですが、これは下記3つの拡張機能がセットになった拡張機能パッケージのことです。
下記3つの拡張機能のインストールをまとめてRemote Development1回のインストールで済ますことができます。(もちろん、機能なども単体で入れた場合と全く同じです)
- Dev Containers(旧Remote Containers。コンテナ環境での開発に便利)
- Remote SSH(SSHを利用したリモートホストでの開発に便利)
- WSL(ローカルフォルダをWSL環境で開く(=Linuxのように扱える))
たまにRemote DevelopmentとRemote Containersを混同しているブログなどを見かけますが(=私もそうだった)、先述の通りRemote Developmentはあくまで拡張機能パッケージであり、Remote Development自体は拡張機能ではありません。
昔はDev ContainersがRemote Containersという名前だったので、余計ややこしかったのもあるんでしょうね。
実際にインストールされる拡張機能について
Dev Containers(Remote Containers)
これはコンテナ環境での開発をサポートしてくれる拡張機能です。
ローカル環境からイメージビルド＆コンテナ作成を行ったり、実際にコンテナ内に入ってVSCodeで開発・テストなどを行うことができます。
これについてはちょうど前回のStreamWest-1629さんが[https://zenn.dev/streamwest1629/articles/vscode_wanderer-in-devcontainer:title]という内容で投稿されているので、詳しくはそちらを読むのがよいと思います。
Remote SSH
これは名前の通りSSH接続を行う拡張機能です。
SSHを用いてリモートホストに接続したり、接続先のリモートホスト環境でVSCodeで開発・テストなどを行うことができます。
その他、設定ファイルに接続設定を残して、マウス操作だけで簡単にリモートホストに接続が行えたりします。
なお設定ファイルにOSのhostsファイルを使うこともできますが、その場合は管理者権限でVSCodeを開かないといけないので、個人的にはRemote SSH用の設定ファイルを作成することをお勧めします。(もちろんRemote SSHのGUI操作で作成可能)
WSL
これはWindows上のフォルダをWSLとして開くことができる拡張機能です。
WSLとして開く≒Linuxとして開けるということになるので、Linuxに慣れている人には使いやすい拡張機能です。
また、最近は実際のサーバーはLinux環境で動かすことが多いので、そういう意味でもより実際のサーバーに近い感覚で操作することができます。
まとめ
以上、Remote Development(＆その拡張機能)について説明しました。
Remote ContainersがDev Containersに名前が変わったので、だいぶ区別がつきやすくなりましたが、もしこのあたりがごちゃごちゃになっている人がいたら、そういう人たちの理解の助けになれば、と思います。
それでは、今回はこの辺で。