Edited at

リモートサーバで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に頼らないようにしましょう

参考資料