Remote SSHで行うVS Codeリモートホスト開発と トラブルシューティング Masaki Suzuki 2023/01/21 VS Code Conference Japan 2022 - 2023

アジェンダ 1. 自己紹介＆注意事項 2. Remote SSHについて 3. インストール 4. 設定＆接続 5. デモ 6. トラブルシューティング 7. まとめ 2

自己紹介 ◼ 名前：鈴木 正樹(Masaki Suzuki) ◼ 在住：愛知県 ◼ 職業：フリーランスエンジニア(2022/08まで) 株式会社DeNAにjoin(2022/09から) ◼ 業務：およびクラウド全般(主にサーバーレス＆バックエンド全般)、およびサーバー運用・監視 ◼ 技術： • AWS(特にLambda, DynamoDB, S3, CloudWatch, SNS, SQS, Chatbot), その他サーバーレスバックエンド全般 • TypeScript, JavaScript(Node.js), Jest, bash, Perl(少し) • Infrastructure as Code(Serverless Framework, AWS CDK, Terraform), CI/CD(GitHub Actions) etc. ◼ SNS： • @makky12 (SUZUKI Masaki＠クラウドエンジニア) • https://github.com/smt7174/ • http://makky12.hatenablog.com/ 3

注意事項 ◼ 本資料は、下記URLで公開しています • https://speakerdeck.com/smt7174/remote-sshdexing-uvs-coderimotohosutokai-fa- totoraburusiyuteingu ◼ 私のブログでも、Remote SSHについて紹介しています • https://makky12.hatenablog.com/entry/2022/09/20/120500 4

Remote SSHについて

Remote SSHとは？ ◼ VS CodeでSSH接続をシンプルに行うための拡張機能 • 設定さえ行えば、マウスクリックのみでSSH接続が行える • CLIでのコマンド入力が不要 ◼ 接続先ホストのファイル＆フォルダを、そのままVS Codeで編集可能 • 接続先ホストにVS Codeのインストールは不要 • 拡張機能はホストごとにインストールが必要(※) • 接続先ホストに環境を用意すれば、そのままVS Codeでの開発・テストも可能 ◼ 以下のような状況で非常に便利 • リモートの開発用仮想サーバー、およびコンテナなどで開発・テスト作業を行う場合 • Covid-19の影響で、そういう環境も増えた(？) • サーバーの運用管理を行う際、(使い慣れた)VS Codeで設定ファイルを編集したい… etc. ※デフォルトでインストールする拡張機能を指定可能(全ホスト共通) 6

インストール

インストール ◼ 以下の2種類の方法でインストールが可能 • どちらの方法でも、Remote SSH機能・性能などは全く変わりません • どちらもActivity Bar(下画像)の「拡張機能」からインストールします ◼ Remote SSH単体でインストール • これは通常の拡張機能のインストールと同じ ◼ 「Remote Development」パッケージからインストール • この場合、Remote SSH以外に「Dev Containers」および「WSL」もインストールされる • Remote Developmentパッケージについては次ページで説明 8

補足：Remote Developmentについて ◼ 3つの拡張機能をまとめてインストールできる拡張機能パッケージ • WSL(WindowsフォルダをWSLで開いて、VS Codeで扱える拡張機能) • Dev Containers(開発環境をDockerコンテナとして扱うことができる) • 昔は「Remote Containers」という名前だった(ので、少々紛らわしかった) • Remote SSH ◼ 個々の拡張機能の機能・性能は変わらない • 個々の拡張機能自体は、個別でインストールした場合とまったく同じ ◼ Remote Developmentパッケージを利用するかは、用途次第 • Windowsの場合、開発環境として使用する頻度が高いPCなら、Remote Developmentパッ ケージからインストールしておいて損はないと思う • 昨今は実際の運用環境がLinuxということが多く、WSLは割と必須と思うので • MacはWSLが不要なので、そこは使用者次第 9

設定＆接続

設定＆接続 11 ◼ リモートホスト、及びその接続設定をconfigファイルに定義する • configファイル自体はSSHのssh_configと同様 • ssh_config(5) - Linux man page ◼ configファイルは<ユーザーフォルダ>/.ssh/内に作成される。 (Windows/Macともに) • 使用するconfigファイルを設定で固定することもできる ◼ configファイルに設定したホストが一覧に表示される • あとは接続したいホストを選択して、マウスクリックで接続すればOK • 接続時、「新しいウィンドウで開く」か「現在のウィンドウで開く」かを選択可能

補足：よく使うconfigファイル設定 12 項目名 説明 デフォルト値 備考 HostName ホストのドメイン なし IPアドレスでもOK user ユーザー名 なし PasswordAuthentication パスワード認証を行うかどうか yes IdentitiesOnlyがyesの場合、こ の設定は無視される IdentityFile 秘密鍵ファイルのパス なし IdentitiesOnly 鍵認証のみで認証を行うかどうか no yesの場合、 PassowordAuthenticationの設 定は無視される ForwardAgent SSHのエージェントフォワードを 使用するかどうか no • ローカルの認証情報をリモー トホストでも使用できる機能 • セキュリティ上の問題もある ので、使用時は注意 Port ポート番号 22 ProxyCommand 踏み台ホスト経由で目的のホスト に接続する際に使用するコマンド なし

デモ

デモ 14 ◼ AWS EC2にRemote SSHで接続し、テストを行うというデモを実施します ◼ テストの内容は「Jestを用いたFizzBuzz関数のテスト」となります • 「初回実行時はテストがNG」→「修正後にOKとなる」という作業を行います • Node.js, Jest, yarnなどは、あらかじめインストール済です ◼ Remote SSH経由でのVS Codeでの変更が、実際にEC2に反映されてい る…ということに注目してください。 • AWS Systems Managerのセッションマネージャーで確認 ◼ FizzBuzz関数は、 引数(数値)に対し、下記の処理を実行する関数 • 引数が3で割り切れる場合、「Fizz」を返す • 引数が5で割り切れる場合、「Buzz」を返す • 引数が3でも5でも割り切れる場合、「FizzBuzz」を返す • 上記いずれにも該当しない場合、入力値をそのまま(文字列として)返す

トラブルシューティング

トラブルシューティング 16 ◼ まずは「エラーログをしっかり読む」こと • エラーダイアログの「その他の操作」ボタンをクリックすることで、接続を終了することなくログ を読める(下画像参照) • 大抵は「プロセスが、存在しないパイプに書き込もうとしました」の直前数行に具体的な理由が 書いてある ◼ 次ページ以降で紹介するのは、あくまで一例 • よく起こるメジャーなものを抜粋しています • 記載した方法ではエラー解消しない場合もあります • もちろん、記載していないエラーもあります

No such Identity <秘密鍵パス>. No such file or directory 17 ◼ configファイルで指定した秘密鍵ファイルがない • まずは秘密鍵ファイルが存在するか、パスやファイル名の間違いがないかをチェック ◼ 秘密鍵ファイルへの読み取り権限がない • 秘密鍵ファイルへの読み取り権限がない場合にも発生 • まずは読み取り権限があるかを確認し、なければchmodで権限付与する ◼ 違うフォルダを参照している(Windows+WSL環境) • WSL接続時にWSLのパスを指定しても、Windowsのフォルダを参照する • 「~/<ユーザー名>/.ssh/id_rsa」のように指定している場合 • VS CodeをWindows側に入れていると発生する(WSLに接続していても) • 対策は、秘密鍵ファイルをWindows側フォルダにコピーする…など ※Windows(+WSL)環境でRemote SSHを使用する場合、少しやっかいな部分がある ※詳細は、後日私のブログで公開します。

その他のエラー 18 ◼ Bad owner or permissions on …/.ssh/config • configファイルの読み取り権限がない、あるいは別のconfigファイルを読んている • 前者の場合、権限を確認して、必要に応じてchmodで権限を付与する • 後者の場合、Remote SSHの設定項目「Config File」にconfigファイルのパスを設定する ◼ This access is currently unavailable ssh • 選択したホストに、そもそも到達できない場合に発生 • configファイル内のホストの設定が正しいかを確認する。(HostName, Portなど) • 該当ホストがSSHに対応しているかどうか • レンタルサーバーの場合、SSHが有効な設定になっているか ◼ Permission denied(publickey) • 指定した秘密鍵が不正な場合に表示される • 指定した秘密鍵が正しいか(=登録した公開鍵に対応するものかを)確認する。 • 秘密鍵に、不要に広い権限を設定していないか(大抵、400なり600でないとエラーになる)

CPU使用率が上昇し続けて、接続が切断される 19 ◼ リモートホストに接続後、CPU使用率が上昇し続け、最終的に切断される • topコマンドで見た際に、 COMMAND: nodeで発生 • 内部的にめちゃくちゃ大量の処理を行っているのが原因っぽい ◼ 大量に書き込みを行うファイルを「Watcher Exclude」に追加する • 監視から除外するファイルを指定するVS Code本体の設定(Remote SSHの設定ではない) • 監視対象から除外することで、負荷を下げることができる(Pythonの.venvなど) ◼ 拡張機能「TypeScript and JavaScript Language Features」を無効化 • 上記は、VS Codeに初めから入っている(=ビルトインの)拡張機能 • これを無効化することで、現象回避できるケースがある。(私もこれで現象回避できた) • 開発でTypeScriptやJavaScriptを使う場合、影響はどうなんだろう…(未確認) • 参考： Use Visual Studio Code SSH without crashing your server

まとめ

まとめ 21 ◼ Remote SSHを使用すると、VS CodeからシンプルにSSH接続ができる ◼ 接続先ホストのフォルダ・ファイルを、そのままVS Codeで扱える • もちろん開発・テストも問題なく可能 ◼ エラーが発生したら、まずはログを確認する ◼ サーバー運用監視時の設定ファイル変更も、VS Codeで行える • ただ個人的には、サーバーの運用監視を行うならある程度vimも使えた方が良いと思う

ご清聴ありがとうございました 以上です