Vim
SSH
EC2
拡張機能
VSCode

リモートサーバでVimを使いたくない人が入れておくべきVSCodeの拡張機能 ~ EC2を例に ~

More than 1 year has passed since last update.

この記事はVisual Studio Code Advent Calendar 2017の10日目の記事です

早速ですが、皆さんはリモートサーバのファイルをいじる時、どんなエディタを使っていますか?

普段はIDEを使ってるけど、仕方なくVimで、、、という人も多いと思います(自分です)
Vimはいつか使いこなせるように、、、と思いつつ、まだまだコマンドとか覚えきれてないのが現実です、、、

しかし、1つの拡張機能と簡単な設定をするだけで、みんな大好きVSCodeでもファイルの編集をすることができます!

今回は、EC2インスタンス上のファイルをVSCodeで編集できるようにしてみましょう〜

最終的にできること

  • VSCode内のターミナルから、EC2インスタンスにsshで入り、
  • EC2上のファイルをローカルのVSCodeと同期し、そのまま編集、保存する
  • ローカルでの変更がEC2上のファイルにも反映されている!

必要なもの、設定

リモートサーバ側(EC2)

  • rmateのインストール
  • ポートを開ける
    • 今回はAWS上でのセキュリティグループの設定

ローカル側(VSCode)

  • Remote VSCode(VSCodeの拡張機能)のインストール
  • sshのconfigの設定
    • Remote VSCodeで指定したポートにsshで入るため

まずはローカル側の設定

あらかじめSSHのconfigを設定しておく

楽にリモート側へ入れるように、sshのcondigの設定をあらかじめしておく

~/.ssh/configで設定できます

Host hoge
  HostName hoge.jp //EC2インスタンスのグローバルIP
  User ec2-user
  IdentityFile ~/hoge //秘密鍵が置かれているところ
  IdentitiesOnly yes
  ForwardAgent yes
  RemoteForward 52698 127.0.0.1:52698

最後の2行が大事。あとはよしなに。

VSCodeに拡張機能を入れる(Remote VSCode)

名前をそのまま検索して、インストールすればOK
設定を確認する(settings)

// Port number to use for connection.
    "remote.port": 52698,

// Launch the server on start up.
    "remote.onstartup": true

remote.onstartupはtrueでもfalseでもどちらでも良い
起動した時に、Remote VSCodeが立ち上がっているかどうか。

Remote VSCodeを立ち上げる

  • F1でcommand paletteを表示
  • Remote:Start serverでRemote VSCodeのサーバを起動

これでローカル側の準備は完了です!

次はリモートサーバ側の設定

セキュリティグループの設定

Remote VSCodeはポート52698を使用するので、あらかじめ開けておく(インバウンド、アウトバウンド両方)

  • タイプ:カスタムTCPルール
  • プロトコル:TCP
  • ポート範囲:52698
  • ソース:許可したいIPアドレス

みたいな感じでOK
このセキュリティグループをEC2インスタンスに設定しておく

インスタンスにログインし、rmateをインストールする

VSCodeの統合ターミナルから、以下のコマンドでリモートサーバへ入りましょう

ssh hoge

設定がうまくいってれば、これで入れればとりあえずOK

ダメだった場合は、ローカルで設定したsshのconfig、もしくはEC2インスタンスのセキュリティグループを見直しましょう

リモートに入れたら、パスが通ってるところに、rmateをインストールします

wget -O /usr/bin/rmate https://raw.github.com/aurora/rmate/master/rmate
chmod a+x /usr/bin/rmate

これで全ての準備がOK

実際にリモートサーバのファイルをローカルのVSCodeに同期してみる

VSCodeでいじりたいファイルを、以下のコマンドでローカルに持ってくることができる

rmate index.html

VSCodeにファイルが同期されれば、バッチグーです。

そのままファイルを編集、保存すると、リモート側のファイルも変更が加わっています
別のファイルを変更する際は、上記のコマンドで改めてVSCodeと同期しましょう

あとは開発を進めていくだけですね!

まとめ

  • Remote VScodeを使えば、リモートサーバでもVimを使わなくていい
  • 他のIDEでも似たような機能はあるので、色々調べてみましょう
  • でも本当はVimを使いこなせたほうがいい
  • Vimのコマンドをちゃんと覚えて、IDEに頼らないようにしましょう

参考資料