こんにちは、今回は開発に便利なVS Codeの拡張機能「Remote SSH」のご紹介をします。

普段、開発は自身のマシンでプロジェクトを作成して開発することが多いと思いますが、最近はリモートにある仮想サーバー上で開発環境を構築して開発するケースも出てきています。

リモートサーバー上でソースコードを編集してGitにプッシュ、そういった作業をエディタ上でできる便利なVS Codeの拡張機能が「Remote SSH」です。

Remote SSHについて

Remote SSHではSSHでリモートサーバーに接続し、まるでローカルマシンのファイルを編集するようにエディタ上でソースコードを編集できます。
また、エディタにあるターミナルでコマンドを実行できるのはもちろん。VS Codeの拡張機能をリモートサーバー上で直接使うこともできます。

また、VS Codeの開発元であるmicrosoft自身が開発している拡張機能なので、VS Codeの公式ドキュメントにもRemote SSHの使い方が書かれています。

SSHを使用したリモート開発
https://code.visualstudio.com/docs/remote/ssh

Remote – SSH
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

Remote SSHの使い方

拡張機能のインストール

VS Codeの拡張機能からRemote SSHをインストールします。

SSH接続

接続先のサーバーにSSHで接続します。

VS Code上で 、 ⌘+Shift+P でコマンドパレットを開きます。
次に 「remote ssh: ホストに接続」を選択し、username@hostname でSSH接続します。

接続が成功すると、VS Codeがリフレッシュされて空のウィンドウ画面になります。

プロジェクトフォルダを開く

SSH接続後に、エクスプローラーメニューの「Open Folder」メニューからプロジェクトフォルダを開きます。

拡張機能の有効化

最後に開発時に利用する拡張機能をインストールします。
ローカルのVS Codeでインストールしている拡張機能もリモートサーバー上で使いたい場合はインストールし直す必要があります。

Gitまわりの拡張機能等はインストールしておくと便利だと思います。

まとめ

いつもと同じエディターで、リモートサーバー上で開発できるので、環境の差に困ったり、場所に縛られずに開発できるようになって便利ですね。
今後もいろいろな開発のスタイルを経験していきたいです。