14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VSCode Remote Development + SSHトンネルで安全なWebアプリケーション開発

Last updated at Posted at 2019-07-31

2020年11月6日追記
最近のバージョンのVSCodeでは、内蔵のターミナルでTCPを待ち受けするサービスを起動すると自動でポートフォワードされるようになってますね。なのでこの記事は古い内容になりました。いったいどこまで便利になるんだ!

リモート開発でシンクライアント化

VSCodeのRemote Developmentがもう便利すぎです。自分のようなGUI依存のプログラマーには天の恵みです。

これまでMacbook Proほぼ単独で開発を行ってきましたが、Remote Developmentがあれば格安VPSやEC2インスタンス、社内のPCサーバーでリモート開発中心にシフトするのもいいなと思い始めています。

  1. クライアントマシンが非力でもよい
  2. バッテリーが長持ちしそう

バッテリーの浪費は他に原因がありそうですが…

.ssh/config で開発用Webサーバーのポートフォワード

Webアプリケーションのリモート開発で問題となるのがブラウザでの動作確認です。
通常、30008080などのポートで開発用Webサーバーを起動させますが、そのポートを開放するわけにはいきません。

「簡単にSSHトンネルを掘る拡張機能でもないかなー」と探したのですが、よく考えたら.ssh/configで済むことに気づきました。

LocalForwardに、クライアントマシンのポートと、そこに転送するリモートマシンのポートを指定します。
データベースのポートも転送しておくと、手元のGUIツールが使えて便利です。

Host dev
  Hostname 開発VPSのホスト
  User ユーザ名
  LocalForward 3000 localhost:3000
  # LocalForward 3306 localhost:3306 # MySQL

試してみる

フレームワークやWebサーバーは何でもいいんですが、今回はexpressで試します。
Remote Developmentで起動したターミナルで次のコマンドを実行し、ポート3000でリクエストを待ち受ける開発用Webサーバーをリモート上で起動します。

npm i -g express-generator
express express-sample
cd express-sample
npm i
DEBUG=express-sample:* npm start

.ssh/configLocalForwardで、リモートのポート3000をクライアントのポート3000に転送しているので、クライアント上のブラウザからhttp://localhost:3000を開けば応答するはずです。

Express_と_Untitled-1.png

期待どおりできました!

クライアントのネットワーク疎通と連携してstart/stopするEC2インスタンスとか、スケーラブルで費用もお得でいいかもですね。
RemoteDevelopmentによるシンクライアント + リモート開発、なかなか想像が膨らみます。

14
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?