この記事は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 52698127.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.htmlVSCodeにファイルが同期されれば、バッチグーです。
そのままファイルを編集、保存すると、リモート側のファイルも変更が加わっています
別のファイルを変更する際は、上記のコマンドで改めてVSCodeと同期しましょう
あとは開発を進めていくだけですね！
まとめ
- Remote VScodeを使えば、リモートサーバでもVimを使わなくていい
- 他のIDEでも似たような機能はあるので、色々調べてみましょう
- でも本当はVimを使いこなせたほうがいい
- Vimのコマンドをちゃんと覚えて、IDEに頼らないようにしましょう
参考資料