Windows上のVisual Studio Codeからサーバー上のファイルを編集する

こんにちは、mtwandこと #00a3af 浅葱です。 最近よくいろんな人に「あさねぎさん」と呼ばれるのですが「あさぎ」です。実は。

さて、今までHoloLensとかUnityとかの話を書いていたのですが、今回はちょっと違う話をします。 まあ、個人でUnityアプリとかHoloLensアプリとかやるのであればサーバーサイドを書く機会もあると思うので、一応関係しているということで。

なぜ?

  • とあるアプリを作っている中で、APIサーバーを立てる必要が出てきたため。
  • 今までは某リンゴ社のいいやつを会社から支給されていたのですが、今は会社が変わり返却してしまったので、Windowsからあれこれする必要が出てきた。
  • Vimが苦手(使えないわけじゃないけど、VS使えるならそっちが良いかなと)
  • rmateがなぜか使えなかった(後々になって ~ポート開放のミス説が浮上~ 色々頑張った結果textmateが必要とか、mac版しかないとか、そもそも必要以上のもの入れたくないとか、いろいろあったので。ただその後rmateを使ってないので不明)

前提

  • サーバーはCentOS
  • ホストはWindows
  • サーバーは最低限構築されている
  • サーバーサイドのSSHは構築済み
  • VSCode
  • 個人開発程度の規模を想定
  • yourname, yourServer.addressなどは適宜置き換えてください
  • 個人的な備忘録も兼ねて書いてます。記述の正確さ・信頼性は担保されるものではありません。

WindowsSSHを入れる

Windowsにはデフォルトで使えるSSHソフトウェアがないので、まずはこちら

github.com からDLします。軽量ですね。

DLできたら解凍して、好きな場所に保存。

f:id:mtwand:20170818021638p:plain

上記のような形で保存先をPATHに追加します。

そうするとこんな感じ

f:id:mtwand:20170818021730p:plain

PowerShellコマンドプロンプト上でSSHが使えるようになります。

(余談ですがインターネットに繋がっているとはいえローカルPCのユーザー名隠すのって何か意味あるんですかね)

FireWallを設定

今のままだと後々ファイルのやり取りをするときに使うポートが引っかかって正常動作しないので、ssh.exeのファイアウォール経由の通信を許可してもらいます。 コントロール パネル\システムとセキュリティ\Windows ファイアウォール\許可されたアプリ を開き、 別のアプリの許可 から先ほど保存したOpenSSH-Win64内部にあるssh.exeを追加しましょう。 サーバーの設置場所がLAN内ならプライベート、LAN外ならパブリックをクリックすればよいです。

SSHのConfigを作成

C:\Users\you\.ssh\config を作成、編集します。中身は

Host yourServer.address
  RemoteForward 52698 localhost:52698
  User yourname

のように記述します。 ちなみにですが、面倒くさがって echo "Host..." > config のようにやるのはやめた方が良いかもしれません。 私は最初これをやって、謎の \337\336 がファイルの先頭に挿入され小一時間悩みました。何だったんだあれは。

ちなみにこの先公開鍵認証などを利用するのであればIdentityFileの設定もやってしまった方が良いでしょう。 その説明は、今回は割愛します。

configの作成までできたら C:\Users\you をPATHに追加してください。sshが読みに行きます。

上記までできたらsshの実行までテストしましょう。

ssh yourServer.com と入力して yourname でログインしようとするよう動作すればよいと思います。

サーバーにrsubを導入

yum install rsub で入ると思います。 yumって使う前に yum update とかあまりしないんでしょうか。 yum check-update をしてカーネルのupdateがないか確認する、なんて記述も見たのでどうもめんどくさいことになるのかもしれないですね。 すみません、そこらへんは無知です。

ポートの開放

firewall-cmd --zone=public --add-port=52698/tcp --permanent で良いと思います。

VSCodeにRemote VSCodeを導入

これ

marketplace.visualstudio.com

いれて、VSCodeのユーザー設定に

//-------- Remote VSCode configuration --------

    // Port number to use for connection.
    "remote.port": 52698,
    // Launch the server on start up.
    "remote.onstartup": true,
    // Address to listen on.
    "remote.host": "127.0.0.1",
    // If set to true, error for remote.port already in use won't be shown anymore.
    "remote.dontShowPortAlreadyInUseError": false

これを記述します。IP等に関わらずまるっとコピペでOKです。

これを記述するとバックグラウンドでrsubとやり取りするためのサーバーが立ち上がります。

失敗すると「接続に失敗。10秒後にやり直します」みたいなアラートが出るのですが、上記設定で失敗した場合の対処方法が現在わからないので、問題が起きたらお教えいただけると嬉しいです。解決法まで教えてくれると万々歳。

なお "remote.onstartup": true の部分がサーバーの自動起動設定になっています。

こちらをfalseにする場合は F1 キーからの Remote: Start server でサーバーを手動で起動する必要があります。

SSHで接続してrsubを起動

もう後は使うだけです。

VSCode上で Ctrl + @ で統合ターミナルが立ち上がるので、統合ターミナルを立ち上げます。 ターミナル上で ssh -R 52698:127.0.0.1:52698 youname@yourServer.address のように記述。ログイン。 うまくsshできたら rsub -p 52698 /path/to/file/ のようにコマンドを実行するとVSCode上でファイルが編集できるようになります。 あとはいつも通り編集して、保存。サーバー側にも反映されます。

rsubはどうやら実行すると転送だけしたらフォアグラウンドでのプロセスは終了するらしいので、複数のファイルを同時にrsubしたり、VSCode上のターミナルでサーバーを操作したりが可能なはずです。試してないけど。

最後に

こういう、Windowsからうまいことサーバー上のファイルをあれこれする、みたいなのほとんど未経験でここまで来たので割と楽しかったです。 でもやっぱりサーバーサイドはmacみたいな優れたUNIX環境で書き上げちゃうのがストレスもないし一番のように思います。

ではまた。