LoginSignup
11
19

More than 3 years have passed since last update.

@elu_jaune(えるじょんぬ)

Visual Studio CodeでRemote Developmentを使ってみた

Last updated at Posted at 2020-05-23

はじめに

Visual Studio CodeでRemote Development機能を使って、LAMP環境で直接コーディングしたかったので、セットアップ方法をまとめてみた。
一部、うまく取れなかったのでサンプル画像がごちゃ混ぜになってますが、ご愛敬。

環境について

作業環境はこんなかんじ。VMのネットワークはカスタム(vmnet0)を使用。
通信の設定は仮想化基盤環境に合わせて設定してください。

構成概要1.png

※名前解決はhostsファイルで行っています。

セットアップ手順

0.事前準備
1.Windows OpenSSH Clientのインストール
2.Visual Studio Code (insiders)のインストール
3.VSCode拡張機能 "Remote Development"のインストール
4.Remote DevelopmentのSSH config設定を行う
5.Remote Developmentを使って、CentOSサーバに接続する
6.VS Code Server上にテストファイル[phpinfo.php]を作成する
7.PHP IntelliSenseとPHP Debugをインストールする

0.事前準備

  • CentOS上にWindows PCに使用しているユーザアカウント(以降 VSCodeServerアカウントとする)を作成します。
  • VSCodeServerアカウントがファイルを作成・編集できるようにグループ権限もしくはディレクトリ権限を調整します。
  • OpenSSH-Serverなどリモートログオンを提供するサービスを導入します。

1.Windows OpenSSH Clientのインストール

  1. Windows PowerShell ISEを管理者として実行
    ※管理者権限が不足していると警告され、先に進めません。
    windows openssh install 1.png

  2. 動作確認
    コマンドプロンプトなどからVSCode ServerにするCentOSにssh接続を試みてください。
    ※このサンプルではid_rsaが見当たらないよって怒られてますが、無視してください。
    windows openssh install 2.png

2.Visual Studio Code (insiders)のインストール

  1. Microsoft社からVisual Studio Code insiders (https://code.visualstudio.com/insiders/) を入手し、インストールを実行します。 ※ダウンロードとインストールに際しては調整が必要なものはないので割愛します。

3.VSCode拡張機能 "Remote Development"のインストール

  1. powershellコマンドを用いてRemote Developmentをインストールします。 remotedevelopment拡張機能パックインストール.png

4.Remote DevelopmentのSSH config設定を行う

  1. VS Codeを起動します。

  2. Remode Developmentの「接続」アイコンをクリックします。

vscode-config-1.png

  1. [Remote-SSH: Open Configuration File...]を選択します
    vscode-config-2a.png

  2. ユーザプロファイルに接続設定を保存したいので[%UserProfile%.ssh\config]をSSH設定ファイルの保存先に指定します。
    vscode-config-2.png

  3. VS Code Serverに接続するための設定ファイルを記述します。
    vscode-config-3.png

5.Remote Developmentを使って、CentOSサーバに接続する

  1. Remote Developmentの接続アイコンをクリックします。

  2. [Remote-SSH: Connect to Host...]を選択します。
    vscode接続1.png

  3. 作成済みのSSH接続ホストを指定します。
    vscode接続2.png

  4. 接続先情報を選択します。ここでは相手がCentOsなので[Linux]を選択しています。
    1.png

※初めてSSH通信する場合、フィンガープリントを取得するか聞かれます。[Continue]を選択します。
2.png

  1. VS Code Server上のユーザ認証を要求されるため、パスワードを入力し、[Enter]キーを押下します。
    vscode-remote接続2.png

  2. 認証が完了すると、VS Code Serverのダウンロードとセットアップが行われます。
    vscode-remote接続3.png

  3. しばらくすると、VS Code Serverのセットアップが終了し、Remote Developmentの接続が完了します。
    vscode-remote接続4.png

6.VS Code Server上にテストファイル[phpinfo.php]を作成する

  1. Explorerアイコンをクリックし、[Open Folder]ボタンを押下します。
    vscode-remote接続5.png

  2. VSCodeServerアカウントのデフォルトパスが表示されます。PHPファイルを作成・編集したいパスを入力し、[OK]ボタンを押下します。
    ※必要に応じてドキュメントルートなどを指定してください。
    vscode接続4.png

  3. 再度VSCodeServerアカウントの認証を要求されるため、パスワードを入力し、[Enter]キーを押下します。
    vscode接続5.png

  4. Explorerのファイル一覧にCentOSサーバ上のファイルパスに含まれるファイルが表示されます。
    vscode接続6.png

  5. テストファイル[phpinfo.php]を作成するため、Explorer上でコンテキストメニューを表示し、[New File]を選択します。
    vscode接続7.png

  6. テストファイルを作成し、保存します。
    vscode接続8.png

  7. ChromeなどでVSCodeServerにファイルが作られていることを確認します。
    vscode接続9.png

7.PHP IntelliSenseとPHP Debugをインストールする

VS CodeのセットアップのついでにPHP開発に便利な拡張機能 PHP IntelliSenseとPHP Debugをインストールします。

7.1.PHP IntelliSenseをインストールする

  1. Remote Developmentを使ってVS Code Serverに接続します。

  2. Extensionsアイコンをクリックし、拡張機能[PHP IntelliSense]を検索します。

  3. 右側に表示される[Install on SSH : {servername}]ボタンを押下します。

  4. Extensionsアイコンをクリックし、拡張機能[PHP IntelliSense]を検索します。

  5. 右側に表示される[Install on SSH : {servername}]ボタンを押下します。
    PHP Intellisense Install1.png

  6. PHP IntelliSenseのインストールが完了すると、ボタンが[Reload Required]に変わります。[Reload Required]ボタンを押下し、VS Code Serverに再接続してください。
    PHP Intellisense Install2.png

7.2.PHP Debugをインストールする

  1. Remote Developmentを使ってVS Code Serverに接続します。

  2. Extensionsアイコンをクリックし、拡張機能[PHP Debug]を検索します。

  3. 右側に表示される[Install on SSH : {servername}]ボタンを押下します。
    PHP Debug Install 1.png

  4. PHP IntelliSenseのインストールが完了すると、ボタンが[Reload Required]に変わります。[Reload Required]ボタンを押下し、VS Code Serverに再接続してください。
    PHP Debug Install 2.png

おまけ1.id_rsaファイルの発行とVS Code Serverへの転送

※id_rsaを発行しなくてもpasswordログインは可能です。セキュリティ強度を考えると実装したほうがいい...とされます。

  1. VS Codeを実行するマシン側でrsaキーを発行します。 id_rsaキー発行.png

2.rsaキーをVS Code Serverにコピーし、authorized_keyに変換。
id_rsaキー発行2.png

3.iraキーを用意することでRemote Development接続するときはpassphraseを使った認証に切り替わります。
id_rsaキーを使った接続.png

参考

11
19
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
Sign upLogin
11
19