VScodeでリモートサーバ接続

リモートサーバの操作は、SSH接続してターミナルコマンドを駆使して行う必要があります(GUIは使えない)

そのためファイルの編集は、操作感がいまいちなターミナルエディタ(vim, nano など)を使って行わなければなりません

しかし、VSCodeエディタにはこういったリモートファイルの編集をシームレスに行うための Remote Development プラグインがあり、これが大変便利でしたのでご紹介いたします



VSCode Remote Development プラグインの導入

VSCodeを起動し、Shift + Ctrl + X キーを押してプラグイン検索窓を開きます

Remote Development で検索し、プラグインをインストールしてください

remote-development.png


サーバ接続設定

サーバへのSSH接続設定を行います

VSCodeで Shift + Ctrl + @ キーを押してターミナル(WindowsであればPowerShell)を開きます

vscode-terminal.png

その後、以下のコマンドを打ち込むことで SSH接続設定ファイルを編集することができます

# PowerShellの場合も同じコマンドでファイルを開くことが可能(VSCodeがPATHに追加されていれば)
$ mkdir ~/.ssh/ # .ssh ディレクトリがなければ作成
$ code ~/.ssh/config # ファイルをVSCodeで開く

# Linux環境で上記コマンドでファイルが開けない場合、以下の設定コマンドを実行してからリトライ
$ echo 'export DISPLAY=:0.0' >> ~/.bashrc
$ source ~/.bashrc

~/.ssh/config

SSH接続設定を記述するファイルであり、基本的には以下のような形式で記述します

~/.ssh/config
Host <接続情報名>
    HostName <ホスト名 or IPアドレス>
    Port <ポート番号: 省略した場合は 22>
    User <ユーザー名>
    IdentityFile <鍵ファイルのパス>

IndentityFile は公開鍵認証方式でSSH接続する場合に指定する項目です

例として、GitHubに接続するための設定は以下のような感じになります

~/.ssh/config
Host github
    HostName github.com
    User git
    # 自分のGitHubアカウントに登録した秘密鍵を指定
    IdentityFile ~/.ssh/github-id_rsa

上記の設定は以下のSSH接続コマンドと同義になります

$ ssh -i ~/.ssh/github-id_rsa git@github.com 

なお、パスワード認証の場合は少し面倒な設定が必要です


サーバ接続

VSCode上で Shift + Ctrl + P キーを押してコマンドパレットを表示し、connectと打つと Remote-SSH: Connect to Host... というコマンドが出てくるはずなので、このコマンドを実行します

remote-ssh.png

~/.ssh/configファイルに記述された接続情報名がリスト表示されるため、接続したいサーバホストを選択します

すると、新規VSCodeが起動します(これがサーバに接続した状態のVSCode)

このVSCode上で Shift + Ctrl + @ キーを押すと、接続したサーバのターミナルが起動するため、サーバの操作はこのターミナル上で行います

このターミナル上で code <ファイル名> というコマンドを実行すると、接続しているVSCode上でファイルが開かれるため、ローカルでファイル編集するのと同じ感覚で操作ができます

Avatar
Ameno Yoya
Webプログラマ

経験はログに残して初めて資産となる

comments powered by Disqus