yu nkt’s blog

nkty blog

I'm an enterprise software and system architecture. This site dedicates sharing knowledge and know-how about system architecture with me and readers.

プロキシ環境でVS Code Remote Development

Visual Studio Codeの新機能で、コンテナ内や、WSL、SSHでリモートアクセスした環境で、開発する事が出来るRemote Development機能が拡張機能として入れられるようになりました。

marketplace.visualstudio.com

こんな人にオススメです。

  • 開発環境はWindowsだが、実装したプログラムを動かすのはLinuxなので、依存するツールをWindowsにも入れないといけない
    • 往往にして入れ方で詰まる(特にプロキシ環境)
  • 手元がWindowsのため、Dockerfileの開発がやりづらい
  • コード類(依存する環境)が特定のサーバーにあり、手元で開発するのが大変

ものすごく、大企業のエンジニアにはありがたい機能だと思います。 そして、大企業あるあるの認証付きプロキシ環境下でも、これはほとんど苦労することなくセットアップ出来ます。

今回は、SSHアクセスした別環境で開発することを念頭に、セットアップの手順を解説します。

最新のVS Codeをインストール

確か'19 5月末まではInsider版だけでしか使えませんでしたが、今では一般公開版でも使えます。 最新版のVS Codeをインストールしましょう。

次に、VS Codeのプロキシ設定を行い、拡張機能のところから、Microsoftが提供しているRemote Developmentをインストールしましょう。 自動的に、5つくらいのRemote Development関連の拡張機能がインストールされます。

リモートアクセス先のプロキシ設定

このRemote Development機能は、リモートアクセス先に、VS Codeのサーバーをインストールすることになります。

code.visualstudio.com

このサーバーのインストールは、後述するVS CodeのRemoteでの最初のSSHアクセス直後に自動的に行われます。

ここで注意するのは、VS Codeサーバーのインストールには、wgetが用いられることです。 もし、リモートアクセス先に、wgetがなければインストールしてください。

そして、wgetのプロキシ設定は、$HOME/.wgetrcで行います。

qiita.com

キーペア生成とインストール

Remote Developmentでは、手元のVS CodeとリモートのVS CodeサーバーのSSHアクセスは、常時繋がっているわけではありません。 VS Codeサーバー側に、手元のVS Codeから処理を依頼するたびに、SSHアクセスが行われます。 そのため、秘密鍵によるログインを設定していないと、膨大な回数のSSHログインパスワードを入力することになります。

SSHへの秘密鍵アクセスをあまり知らない人は、下をご覧ください。

knowledge.sakura.ad.jp

SSHの用意

もし手元がWindowsで、SSHが入っていない場合は、SSHを使えるようにしましょう。 やり方は以下の4つが考えられます。

  • Git Bashをインストール
  • WSLをインストール
  • SSH機能を開始(参考
  • OpenSSHをダウンロード・展開して、パスを張る(Win32-OpenSSH

もっとも簡単な方法は、1点目です。 gitとググって、gitをインストールすれば、勝手にgit bashが付いてきます。 3点目も簡単ですが、後述するssh-copy-idコマンドが使えるか、私は試しておらず怪しいです。

4番目の方法で行うなら、パスにスペースが含まれるところに、SSHの実行ファイルを置かないことをオススメします。 VS Codeは、スペースが含まれているパスを正しく認識しません。 本記事の本質ではないので詳しくは言いませんが、思わぬところでトラブルが起き得ます。

キーペア作成

コマンドでキーペアを作りましょう。 git bashかWSLを使っている前提で話を進めます。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

これで、秘密鍵と公開鍵のペアを作成できました。 デフォルトでは、id_rsaという秘密鍵と、id_rsa.pubという公開鍵ができます。 作成される場所は、コンソールに出ると思いますが、git bashやWSLでは、$HOME/.ssh/の中です。

最後に、公開鍵をアクセス先にインストールします。

ssh-copy-id (user)@(host)

パスワードの入力を求められると思うので、入力してください。

SSH設定

configファイルを用意

次のような、configという名前のファイルを作成します。

Host (host-name)
    HostName (host)
    User (user)
    Port 22
    IdentityFile ./id_rsa

(host-name)は、わかりやすい文字列なら何でもOKです。

このファイルは、id_rsaが存在するディレクトリと同じ場所に置いておきます。

秘密鍵パーミッション設定

秘密鍵は、他のユーザーが読み取れないよう、パーミッションを設定する必要があります。 Windowsの場合は、パーミッション設定が厄介です。

まず、秘密鍵を右クリックして、セキュリティのタブを開きます。 そして、詳細設定をクリックし、自分以外のユーザーの項目を全て削除します。 自分というのは、Userではなく、Windowsの自分のユーザー名です。 なければ、追加をクリックして、自分のユーザー名を入力します。 パーミッションは、親フォルダから継承せず、フルパーミッションをつければ良いでしょう。

Mac/Linuxの場合は、これだけでOKです。

sudo chmod 400 id_rsa

VS Codeの設定

手元のマシンのVS Codeを設定します。

Ctrl(またはCommand) + ,を入力し、検索欄にremoteと入力します。

Remote.SSH: Config Fileに、作ほど作ったconfigファイルのパスを記載します(例:C:¥ssh¥config)。

アクセス

適切にconfigファイルが認識できたら、画面左側のRemoteアイコンをクリックすると、configファイル内で記述したホストの一覧が出てきます。 その中で、アクセスしたいホスト名の右にある、ウィンドウにプラスがついたようなアイコンをクリックします。

f:id:yunkt:20190616121407p:plain

ここまでの設定に問題がなければ、新しいウィンドウが開き、ウィンドウの最も左下に、アクセス先のホスト名が記載されるはずです。 この環境で拡張機能をインストールすると、実行環境に関するものであれば、リモートのVS Codeサーバーの方に、拡張機能がインストールされます。