3
0

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でリモートのプログラムファイルを編集する

Last updated at Posted at 2021-01-20

はじめに

AI用のPCを会社に導入し,その中にJupyterHubをインストールすることで,会社でのAI開発はリモートで開発できるようになっています.(JupyterHubを使ってAI用サーバーを構築する
しかし,現状のJupyterhubでは,Intellisenseが効かず,コード補完ができないので,開発効率があまり良くないという問題がありました.そこで,VSCodeのRemote SSHを使って,VSCode上で会社のAI用PCにアクセスしようという話です.

SSH設定

鍵作成

まず,接続元(ローカル)でSSHの鍵を設定します.
{hoge}は任意

cd ~/.ssh
ssh-keygen -t rsa -f id_{hoge}_rsa
# パスフレーズ設定は任意

configファイルの編集

次に,configファイルを編集します.
{username}は自分のユーザーネーム,xxx.xxx.xxx.xxxはIPアドレス,{host}は任意.

~/.ssh/config
vi ~/.ssh/config
  
Host {host}
  HostName xxx.xxx.xxx.xxx
  User {username}
  Port 22
  IdentityFile ~/.ssh/id_{hoge}_rsa

公開鍵の登録

できたid_{hoge}_rsa.pubを接続先にコピーします.

scp ~/.ssh/id_{hoge}_rsa.pub {host}:~

そして,接続先にSSHして,公開鍵を登録します.

ssh {host}
cat id_{hoge}_rsa.pub >> .ssh/authorized_keys
rm id_{hoge}_rsa.pub
chmod 600 .ssh/authorized_keys

確認

もう一度接続して,パスワードを聞かれなければOKです.

ssh {host}

VSCode設定

VSCodeのインストール

公式サイトからダウンロードして,インストールします.

Remote Developmentインストール

Remote Developmentインストールします.(本当はRemote SSHでいいけど,せっかくなので全部インストールします)

remote ssh

Platformの設定

歯車マーク→Settings→Extensions→Remote-SSH→Remote PlatformでPlatformを設定します.
Item:上記で設定した{host}Value:接続先のOSを設定

※これをしないと恐らく接続できないと思います.

remote ssh2

VSCode上で接続

左下の><→Remote-SSH: Connect to Host...→{host}で接続します.
新しくVSCodeのWindowが立ち上がり,エラーが出なければOKです.

remote ssh3

Open Folderすると...
以下のように,接続先のディレクトリを接続元のVSCodeで開けます!!

remote ssh4.png

不具合関係

接続できても,Extensionが読み込めない不具合が起きる可能性があります.その場合は接続先の.vscode-serverを削除すると改善します.

ssh {host}
rm -rf .vscode-server

おまけ

autocomplete

コード補間がうまくいかなかったので,メモ.
特に,環境がAnacondaの場合は,python.languageServerJediPyLanceだとダメみたい.

{global}/settings.json
{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "python.languageServer": "Microsoft",
    "terminal.integrated.inheritEnv": false
}

pythonでの画像表示

ローカル環境であれば,OpenCVで読み込んだ画像は,Windowを表示させれば確認できますが,リモート環境だとそもそもWindowを表示することができません.
そこで,ExtensionsのPython Image Previewを使うと確認できます.
#まだ,評価等が少ないですが使ってみると便利でした.

image.png

Python Image Previewのインストールが完了したら,デバッグ中にCtrl+Pでコマンドパレットを開き,Python Image Previewを選択し,表示したい画像の横に現れるヒントマークをクリックすると,Preview画像が開かれます!

image.png

おわりに

これで,開発効率は一段と上がりました.

3
0
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
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?