VS CodeでEC2にアクセスして開発する方法を模索してる、その1:Remote-SSH

ローカルに立てていたApache+PHP環境をEC2にも置く必要が出てきました。
こういうとき、昔はFTPツールでいちいちソースファイルをアップロードしていたけれど、今はもっと便利にできるんじゃないかなあ。

最近よく使っているVS Codeではどうかな、と調べたところ

  • Remote-SSH

  • SFTP

プラグインが良さそう。
まずはRemote-SSHを試してみようと思います。

私の場合は複数の開発端末から日替わりでアクセスしたりするので、最終的にはEC2にGit cloneして、各開発端末からSSH Remoteで直接いじるとラクそうです。
が、それはもう少し時間がとれた時に、さらにGit慣れしてからにいたします。
今はGitはSourceTreeに任せっぱなしのため、CUI Gitは戸惑いそうなので。

SourceTreeのローカルリポジトリの場所にEC2を指定しちゃえないかなあ、とも思ったんです。
例えばMac端末からは、sshfsでFinderでEC2をマウントして、そこをローカルリポジトリの場所に指定して…とか。
が、Permissionがどうのこうのと怒られました。
そもそも無理なのか、何かの原因で失敗しているだけなのか切り分けられてないので、こちらも機会があれば再チャレンジしてみたいと思います。

あとあと、Remote Developmentプラグインも気になってる。
これもそのうち…。

Remote-SSH

SSH-Remote

最初にこのプラグインを知ったとき感動しました。
無料エディタなのにこんなことできちゃうんだ?
というか、これの存在を知ってから、VS Codeをメイン使いしだしました。

名前のまんま、VS CodeからSSHできちゃうってやつです。
それならVS Code内のターミナルでいいじゃんって話ですが、もちろんこいつはそれにとどまりません。
これを使うと、SSH接続した相手マシン内のファイルをローカルファイルと同じ感覚で扱うことができ、やー便利便利。

設定と使い方がシンプルなのも、いいですね。

OSも、WindowsMac、各種UnixLinuxはもちろん、ARM UbuntuRaspberry Pi OS*1にも対応しています。
ということはこれで直接Raspberry Piをいじれちゃうわけで。
便利がすぎる!

以下にプラグインのインストールから初期設定までと、簡単な使い方を。
接続先のSSH設定は終わっているものとします。

インストール

Extensions(VS Codeの左下、四角が4つのアイコン)画面を開いて、Remote-SSHを探してインストールボタンを押します。
検索窓に「SSH」と入力すると、たぶんトップに出てきます。

ちなみに、2020年9月現在、Remote-SSH(Nightly)というのもあります。
これはVS Code Insidersという、いわゆるベータ版VS Code向けのRemote-SSHプラグイン
Insidersを使ってない方は、このNightly版は無視しましょう。

初期設定

VS Codeの左にモニターのようなアイコンが増えます(Remote Explorerという名前)のでクリック。

Remote-SSHアイコン

SSH TARGETのところに歯車アイコンがいるので、そこをクリック。

Remote-SSH設定

コマンドパレットが開くのでSSH用のconfigファイルを作成します。
すでに.ssh/configを使っていれば、それで問題ありません。(そこがまた便利)

configファイルに接続したいサーバ情報を追記すれば完了です。
書き方は.ssh/configと同じ。

以下、EC2接続時の設定例です。参考までに。

Host XXXX                                          # 接続名、なんでもOK
  HostName XXXX                                    # 接続先のHost名。IP指定でも
  User XXXX                                        # ログインに使うユーザ名
  IdentityFile ~/.ssh/xxxx.pem                     # 秘密鍵の場所

SSH接続してみる

Remote-SSHアイコンを選択してRemote Explorerの画面を開きましょう。
SSH TARGETSに、先ほどconfigに追加したホスト名が出ています。
ホスト名を選択すると右の方に接続するためのアイコンが出てくるのでそれをクリック。
新しいWindowが開いて接続処理が走ったら…、はい、もうSSH接続できました。
EXPLORER画面から開きたいディレクトリを開いて、コードを思うがままに編集できます。

リモート先に必要なプラグインをインストール

とても簡単にSSH接続できましたが、もうひと手間かけるとさらに便利になります。
(というか、ここが真骨頂だと思ってる)

たとえばSSH接続しているVS CodeEXPLORER画面でソースファイルを表示したとき、まっさら状態だとOUTLINEには何も表示されません。

OUTLINE 設定前

例としてPHPのコードでしたら、リモート側のWindowでExtensionsを開き、PHPプラグインをインストールします。
そんで再起動してプラグインを読み込み直すと…

OUTLINE 設定後

はい、リモート側でもOUTLINEが表示されました。

こんな感じでプラグインを追加していくと、本当に、ローカルと同じ感覚でリモート開発ができます。
当然、単語入力中の補完だって効いちゃうんです。
リモート側のコードにこんな簡単に解析がかけられるとか、しかもサクサク軽いとか、ちょっとすごくないですか。
普通ですか? 令和ではこんなの普通なんでしょうか?

プラグインは、すべてをリモート側に置くわけではないようで。
UI系のものはローカルにとか、そういう工夫があっての、軽快な動きのようです。
ちょっとすごくないですか。
無料なのに(またそこ)。

これ、たとえば、リモート側にPHPインストールしてたら、ローカル側にはPHPインストール不要で開発とかもできますね。
夢が広がるよね。

ターミナルも実行できる

リモート側のWindowでターミナルを開くと、それはすでにリモート側のターミナルです。
ちょっと言ってることがわかりませんか? そうですね。

つまりですね、これまでだと開発中に「あ、リモート側であのコマンドたたきたいなあ」と思ったら、

 ターミナル立ち上げて~
 ターミナル上でSSH接続して~
 (あれ、このケースのコマンドのオプションなんだっけ~、メモどこだ…なども含む)
 よし、コマンドを~

って感じだったと思うのですが、これが、

 VS Codeのリモート側Windowでターミナルを開く
 コマンドをうつ

だけで済んじゃうってことです。

文字で表現するとピンとこないかもしれませんが、実際に手を動かすとその差は歴然。
地味にすごく便利。

まとめ

Remote-SSH、すごく良かったです。

*1:一部の拡張機能x86専用なので、当然そういうのは動きません