VS Codeでリモートサーバに接続する

VS Codeの拡張機能である「Remote Development」を使えば、リモードサーバ上にあるファイルに対して、あたかも自分のPC上にあるかのように編集をすることが可能です。
非常に便利な拡張機能なので、以下に備忘録として残そうと思います。

導入後のイメージは以下のような感じです。
VS Codeを実行しているのは、Windows10のPC上ですが、そこからリモートサーバ(Ubuntu)に接続して、リモートサーバ上のファイル編集やターミナル操作をすることができます。

目次
事前準備
VSCodeでリモートサーバに接続する
参考

事前準備

この記事では、以下の準備ができている想定です。

VS Codeのインストール
リモートサーバ接続用の公開鍵・秘密鍵の生成
リモートサーバへの公開鍵登録

VS Codeのインストール

もし、VS Codeをインストールしていないなら、以下のURLからインストーラをダウンロードできるので、ご自分の環境にインストールしてください。

Visual Studio Code

リモートサーバ接続用の公開鍵・秘密鍵の生成

公開鍵・秘密鍵の生成については以下の記事でまとめましたので、よろしければ参考にしてください。

リモートサーバへの公開鍵登録

リモートサーバのauthorized_keysに公開鍵を登録方法は、「ConoHa VPSでサーバ構築する」ブログの中でまとめたので、よろしければご覧になってください。

VSCodeでリモートサーバに接続する

VS Codeでリモートサーバに接続する方法を記載する。(Windows PCからの接続を想定)

Remote Developmentの導入

VS Codeを立ち上げて、メニューから「表示 -> 拡張機能」で、Remote Developmentをインストールする。
これはリモートサーバへSSH接続できるようにする拡張機能である。

SSHエージェントの設定

リモートサーバへSSH接続するためには、SSHエージェントが必要だが、Windowsの場合、SSHエージェントがデフォルトでは無効化されているので、これを有効にしてからVS Codeの設定を行う。
以下のようにPowershellを管理者権限で実行し、コマンドを入力する。

> Set-Service ssh-agent -StartupType Automatic
> Start-Service ssh-agent
> Get-Service ssh-agent

最後のコマンドを実行するとssa-agentが起動していることが分かる

Status   Name               DisplayName
------   ----               -----------
Running  ssh-agent          OpenSSH Authentication Agent

sshの設定をする

上でも記載しましたが、事前にリモートサーバに接続できる想定のため、SSHのコンフィグファイルは設定済みだと思いますが、参考に自分の環境で設定した内容をメモしておきます。

VS Code上でF1を実行し、Remote-SSH:Open Configuration File...を開く。

コンフィグファイルが複数表示された場合は、ご自分の環境に合わせて選んでください。自分の環境では、ユーザ配下に.sshを作成し、そこに格納したので、C:\User\ユーザ名.ssh\configでした。

ssh Confファイルを選択し、以下の内容を追記する。

Host <リモードサーバのドメイン名>
    HostName <リモードサーバのドメイン名>
    User <リモードサーバのSSH接続用ユーザ名>
    Port <リモードサーバのSSH接続用ポート番号>
    IdentityFile <自分のPC(VS CodeがインストールされているPC)で秘密鍵が格納されているディレクトリ>

自分の環境に合わせて設定してください。