いろいろやってみるにっき

なんとか自分の会社を立ち上げるところまで漕ぎ着けた、てきとーに生きている奴の日記

https化に伴い、表示できなくなっているリンクについて修復中。
2018年から遡って修正し、2015年分まで修正完了。


VS CodeのRemote Developmentを設定してみた ─SSH編

引き続いてVS CodeVPSにあるCentOS 7に接続してみることにした。

 

前回はこちら。


SSH接続の手順はこちら。


 何も設定せずに接続してみる

 ダメもとで上記設定記事を見ずに接続してみる。左下のをクリックをして、

https://cdn-ak.f.st-hatena.com/images/fotolife/s/shigeo-t/20190626/20190626095642.png

メニュー表示されるRemote-SSH:Connect to Host…をクリック。こんなダイアログが出る。

f:id:shigeo-t:20190627110231p:plain

 素直にsshコマンドを入れてみた。

f:id:shigeo-t:20190627110339p:plain

 右下にこの表示。やっぱりダメだった。接続先はVPSにあるCentOS 7.3の64bit環境だし、上ではreachableだった上にLinux x86_64なので、何か問題があるようだ。

f:id:shigeo-t:20190627110755p:plain

 

設定手順通りにやってみる

Developing on Remote Machines using SSH and Visual Studio Code

Connect to a remote host

Visual Studio Code uses SSH configuration files and requires SSH key based authentication to connect to your host. If you do not have a host yet, you can create a Linux VM on Azure or setup an SSH host on an existing machine.

このVPSCentOSにはキーを設定していなかった。

 

ということで、公開鍵認証の設定。手順はこちらを参照。

 

WSLで作成。

f:id:shigeo-t:20190627112134p:plain

id_rsa.pubをアップロード。

f:id:shigeo-t:20190627112457p:plain

以下、SSH用のユーザを作り、~/.ssh/authorized_keysを追記し、所有者設定を行った。

VS Code側の設定

このPCではWindowsからSSH接続をしたことが無いので、下から2番目のRemote Developmentをクリックすると、

f:id:shigeo-t:20190627122133p:plain

SSHホスト無いぞ、SSH ホストを設定しろよ と出る。

f:id:shigeo-t:20190627121605p:plain

 ということでC:/Users/shigeo-t/.ssh/configファイルを作成する。 

f:id:shigeo-t:20190627121552p:plain

 こんな風に作成。

f:id:shigeo-t:20190627124721p:plain

 

設定が済んだので接続してみる 

VS Codeを再起動し、左の Remote Developmentアイコンをクリックすると、接続先が現れた。早速クリック。

f:id:shigeo-t:20190627121727p:plain

 上部中央に選択ダイアログが出る。追加したホストをクリックする。

f:id:shigeo-t:20190627121954p:plain

今度はパスフレーズを聞いてくる。
f:id:shigeo-t:20190627122519p:plain

 

新しいVS Codeのウィンドウが開く。

 しかし、下記のダイアログが出る。上にも書いたようにこのPCではWindowsからSSH接続をしたことが無い。いっつもWSLからSSH接続するんだもん。

f:id:shigeo-t:20190627122551p:plain

 

[Configure SSH Agent]をクリックすると、下記のページを開く。

該当部分を読むと管理者モードPowerShellを起動し、下記のコマンドを入れろとある。

Windows:

To enable SSH Agent automatically on Windows, start PowerShell as an Administrator and run the following commands:

# Make sure you're running as an Administrator
Set-Service ssh-agent -StartupType Automatic
Start-Service ssh-agent
Get-Service ssh-agent

Now the agent will be started automatically on login.

 実行してみた。

f:id:shigeo-t:20190627122831p:plain

 

今度は右下にこれが出て、

f:id:shigeo-t:20190627122939p:plain

 

左下はこの状態に変化し、接続できた。

f:id:shigeo-t:20190627123108p:plain

 

フォルダを開く

f:id:shigeo-t:20190627123340p:plain

 

404.phpを開いてみる。VPSにあるPHPのソースをそのままVS Code上で表示できる。

f:id:shigeo-t:20190627123434p:plain


以降は左下のをクリックをして選択ダイアログを出す方法でも、左のバーにあるRemote Developmentのアイコンをクリックして接続先から接続先ホストアイコンをクリックして接続する方法でも問題なく接続できる。

 

ということで今回はここまで。リモート接続している時に、編集以外のことはまだやっていないので、それはまた別途。

ふだん使いするWindows PowerShell

ふだん使いするWindows PowerShell

 
Visual Studio Code Distilled: Evolved Code Editing for Windows, macOS, and Linux

Visual Studio Code Distilled: Evolved Code Editing for Windows, macOS, and Linux