Help us understand the problem. What is going on with this article?

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

参考資料

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした