VS Code Remote SSH Tips

この記事は マイナビ Advent Calendar 2021 1日目の記事です。

はじめに

私は株式会社マイナビの開発部門でエンジニアリングマネージャーとして従事しています。私のチームでは Google Compute Engine インスタンスを個人専用の開発環境としてホスティングし、Visual Studio Code と Remote SSH 拡張 を利用してWEBアプリケーションの開発を行っています。この記事では開発業務で利用しているTIPSを2つ紹介します。

Tips 1. ポートフォワーディングのラベリング

リモートサーバーでの開発において、WEBサーバーなどのミドルウェアや開発中のアプリケーションをリモートインスタンスで起動しています。これらにローカル環境からアクセスするためには、TCPポートのフォワーディング機能を利用します。使用するポートが多くなってくると、どの機能がどのポートで利用しているかどうか分からなくなってきます。

例えば、下は開発中のプロダクトでの Visual Studio Code のポートタブのスクリーンショットです。3000番から9200番まで 8つのポートを使用していますが画面からは利用用途が分かりません。

Visual Studio Code の remote.portsAttributes 設定を追加することで、 リモートポートを番号ごとにラベリングすることができます。

例えば、設定ファイル .vscode/settings.json に以下のように記載します。

{
 "remote.portsAttributes": {
   "3000": {
     "label": "Frontend App (Next.js)"
   },
   "3306": {
     "label": "MySQL"
   },
   "5000": {
     "label": "Backend API (FastAPI)"
   },
   "5601": {
     "label": "OpenSearch Dashboards"
   },
   "8001": {
     "label": "Nginx"
   },
   "8080": {
     "label": "Adminer"
   },
   "9000": {
     "label": "Minio"
   },
   "9001": {
     "label": "Minio Console"
   },
   "9200": {
     "label": "OpenSearch"
   }
 }
}

これにより Visual Studio Code のポートタブ上にポート番号ごとの利用用途が表示されるようになりました。

Tips 2. リモートターミナルからブラウザを開く

開発のWEB画面を確認したい場合など、ローカル環境のブラウザを起動したい時があります。GUIからブラウザを開くこともできますが、コマンドでローカル環境のブラウザを起動できれば便利です。たとえば「ビルド→サーバー起動→URLを開く」のタスクをMakefileに記載したい場合などです。

そのためには Python の webbrowser モジュールが利用できます。以下はリモートサーバーから OpenSearch ダッシュボードをローカル環境で開く例です。

$ python3 -m webbrowser http://localhost:5601

Visual Studio Code の Remote SSH では、環境変数 BROWSER にローカルブラウザを起動するコマンドのパスが設定されます。Python の webbrowser モジュールはこれを利用しているようです。