SSH接続とVisual Studio Code(WSL,Docker)

普段、コマンドプロンプトでSSH接続するのに以下のような方法をとっていました。公開鍵のサーバーへの登録は済ませているものとします。

ssh -i C:Users<ユーザー名>.sshid_rsa your_username@your_server_ip

しかし、configファイルを使用することで、コマンドを短縮することができます。WindowsのSSH機能は比較的最近になってから追加されました。Microsoftは、Windows 10のリリースとともに、ネイティブでOpenSSHクライアントとサーバーをサポートするようになりました。この追加により、Windows環境でLinuxと同様のSSH機能が利用可能になりました。

SSHクライアントがSSH鍵を使用するように設定します。Windowsでは C:Users<ユーザー名>.sshconfig にあります。

Host your_server_alias
    HostName your_server_ip
    User your_username
    IdentityFile ~/.ssh/id_rsa

あとはコマンドプロンプトで以下を入力すれば接続できます。

ssh your_server_alias

ほかにも利点があるのでまとめてみます。

configファイルのメリット

  1. 簡単な接続コマンド:
    • 毎回長いコマンドを入力する必要がなく、エイリアス（Host名）を使って簡単に接続できます。
    • 例: ssh myserver だけで接続可能です。
  2. 複数の設定を管理しやすい:
    • 複数のサーバーへの接続情報を一元管理できます。
    • 各サーバーごとに異なる設定を簡単に切り替えることができます。
  3. 再利用可能な設定:
    • 一度設定すれば、どのターミナルからでも同じ設定を使って接続できます。
    • SSHクライアントの設定を一括で変更できるので、管理が容易です。
  4. パスフレーズの省略:
    • 鍵ファイルにパスフレーズを設定している場合でも、configファイルに設定することでパスフレーズの入力を省略できます。
  5. 環境ごとの設定:
    • ホストごとにプロキシやポートフォワーディングなどの詳細な設定を行えます。

configファイルの設定例

ここに、configファイルの具体的な設定例を示します。

# ~/.ssh/config

# サーバー1の設定
Host server1
    HostName 192.168.1.1
    User user1
    IdentityFile ~/.ssh/id_rsa_server1
    Port 22

# サーバー2の設定
Host server2
    HostName 192.168.1.2
    User user2
    IdentityFile ~/.ssh/id_rsa_server2
    Port 2222

# デフォルト設定
Host *
    ForwardAgent yes
    ServerAliveInterval 60
    ServerAliveCountMax 30

各設定項目の説明

  • Host: 接続先のエイリアス名。ここに指定した名前でSSH接続ができます。
  • HostName: 接続先のサーバーのIPアドレスまたはドメイン名。
  • User: サーバー上のユーザー名。
  • IdentityFile: 使用するSSH鍵のパス。
  • Port: SSH接続に使用するポート番号。
  • ForwardAgent: SSHエージェントの転送を有効にします。
  • ServerAliveInterval: サーバーに対するキープアライブメッセージの間隔（秒）。
  • ServerAliveCountMax: キープアライブメッセージの最大回数。

例えば ssh server1 や ssh server2 という簡単なコマンドで接続できます。configファイルを利用することで、日常の作業が大幅に簡略化され、効率が向上します。なによりVS Codeの拡張機能にRemote – SSHを追加することでVS Codeを使用してログインできるようになります。ファイルの編集をここでできるのはありがたいです。その際、configファイルを使用します。

VS CodeでRemote – SSHを使用して接続する方法

  1. Remote – SSH拡張機能のインストール
    まず、VS CodeにRemote – SSH拡張機能をインストールします。
    • VS Codeの左側の拡張機能アイコン（四角形が四つ並んだアイコン）をクリックします。
    • 検索バーに「Remote – SSH」と入力し、Microsoftの拡張機能をインストールします。
  2. SSH configファイルの設定
    SSH configファイル（C:Users<ユーザー名>.sshconfig）に必要なサーバー情報を追加します。例えば、以下のように設定します。
    Host myserver
    　HostName your_server_ip
    　User your_username
    　IdentityFile C:Users<ユーザー名>.sshid_rsa
  3. VS Codeから接続
    • VS Codeを開き、左にある「Remote Explorer」アイコンをクリックします。
    • Remote Explorerサイドバーが表示されるので、SSHの右にある＋（新しいリモート）をクリックします。
    • 「ssh接続コマンドを入力する」と画面中央上に表示されるのでなにかしら入力し、エンターキーを押します。結局のところ、次のSSHのconfigファイルを編集することで、リモートサーバーへの接続設定を柔軟に変更できます。
    • ~/.ssh/config に保存するか、別のファイルに保存するかを選択します（通常は ~/.ssh/config を選択します）。
    • 接続先のリストに新しく追加されたサーバーが表示されるので、クリックして接続します。接続できない場合、configファイルの編集をする。
    • 初回接続時には、ホストキーの確認を求められますので、Continue をクリックして接続を確立します。

Remote – SSHの利点

  • ローカル環境と同じようにリモート環境で開発できる: VS Codeのインターフェースを通じて、リモートのサーバー上でファイル編集やデバッグができます。
  • 統合されたターミナル: VS Code内でリモートサーバーのターミナルを開き、コマンドを実行できます。
  • エクスプローラーの利用: VS Codeのファイルエクスプローラーを使用して、リモートサーバーのファイルをブラウズ、編集、保存できます。
  • プラグインの活用: 多くのVS Codeプラグインがリモート環境でも動作し、開発をより効率的に行えます。

これで、SSH configファイルを活用して、VS Codeを使用したリモート開発環境のセットアップが完了します。VS CodeのRemote – SSH拡張機能を使うと、リモートサーバーに接続して、あたかもローカルのディレクトリを操作しているかのように、視覚的にディレクトリの階層を確認することができます。ファイルエクスプローラーを使って、GUIで直感的にファイルを操作できるので、コマンドラインを使う必要がなく、非常に便利です。また、初回の接続時にVS CodeのRemote – SSH拡張機能は、リモートサーバーに必要なサーバーファイルをアップロードしてインストールします。このサーバーファイルは、VS Codeのリモート機能が正常に動作するために必要なものです。

初回接続時の動作

  1. 接続の確立:
    • VS CodeのRemote – SSH拡張機能を使用してリモートサーバーに接続します。拡張機能は、SSHプロトコルを使用して指定されたホストに接続します。
  2. 必要なファイルのアップロード:
    • 初回接続時、VS CodeはリモートサーバーにVS Codeサーバーファイルをアップロードします。これらのファイルは、リモートサーバー上でVS Codeの編集機能を実行するために必要です。
  3. ファイルの配置場所:
    • アップロードされたファイルは通常、リモートユーザーのホームディレクトリの中の .vscode-server ディレクトリに配置されていました。
  4. VS Codeサーバーの起動:
    • アップロードが完了すると、VS Codeはリモートサーバー上でVS Codeサーバーを起動します。このサーバーは、VS Codeクライアントと連携して、リモートファイルの編集やデバッグなどの機能を提供します。

DockerとWSLの拡張機能を組み合わせると、さらに多くの利点が得られます。推奨される拡張機能として表示されていたのでDockerの拡張機能をインストールしました。WSLの拡張機能はインストール済みのようでした。

DockerとWSLの拡張機能の利点

  1. シームレスな開発環境:
    • WSLを利用して、Linuxベースの開発環境をWindows上でシームレスに動かせます。
    • DockerコンテナをWSLの中で実行することで、ネイティブなLinuxのパフォーマンスを享受できます。
  2. ファイルシステムの統合:
    • WSLとWindowsのファイルシステムが統合されているため、ファイルのやり取りが容易になります。
    • VS CodeのRemote – WSL拡張機能を使用すると、WSL内のファイルを直接編集できます。
  3. コマンドラインツールの活用:
    • WSL内でLinuxのコマンドラインツールやスクリプトを利用できるため、柔軟な開発環境を構築できます。
    • DockerのCLIツールもWSLから利用できるため、コンテナの管理が容易です。
  4. 統合された開発フロー:
    • VS CodeのDocker拡張機能を使用すると、Dockerコンテナのビルド、管理、デバッグを一元管理できます。
    • WSL内のDockerデーモンを直接操作できるため、効率的な開発フローを維持できます。

インストールと設定の手順

  1. WSLのインストール
    Windowsの「設定」 -> 「アプリ」 -> 「プログラムと機能」 -> 「Windowsの機能の有効化または無効化」から「Windows Subsystem for Linux」を有効にします。その後、Microsoft StoreからUbuntuなどのLinuxディストリビューションをインストールします。
  2. Docker Desktopのインストール
    Docker Desktopをインストールします。設定からResourcesにあるintegration（統合）を有効にしたディストリビューションでDockerを使用できるようになる。WSL内でコマンドによるインストールはしていないのですが。Docker Desktopをインストールしなくても、WSL内でDockerをインストールしてもよいです。
  3. VS Codeの拡張機能のインストール
    VS Codeの拡張機能マーケットプレイスから「Remote – WSL」と「Docker」拡張機能をインストールします（ない場合）。
  4. WSLでDockerを設定
    WSLのシェル（例えばUbuntu）を開き、Dockerが正しく動作しているか確認します。
    docker --version
    また、必要に応じてDockerデーモンを起動します。
    sudo service docker start

WSLとSSHはリモートエクスプローラで切り替えることができます。ここで、仮にディストリビューションが停止していても、接続をこころみることで選択したディストリビューションが起動します。

しかし、SSH機能が制限されているサーバーの場合はうまくいきません。そこでとった方法が次になります。stable diffusionの画像出力先の変更にも使った方法です。つまり、リモートストレージを自分のパソコンにマウントすればいいわけです。これでVSコードでディレクトリの階層を確認したり、ファイルを編集できるようになります。

ロリポップのストレージをRcloneとWinSFPを使用してマウントします。

https://minokamo.tokyo/2024/06/16/7328

結局のところVSコードはコマンドプロンプトやパワーシェルの上位互換のような気がしました。VS Code（Visual Studio Code）は、コードエディタとしての機能を持ちながら、統合ターミナル機能を備えているため、コマンドプロンプトやPowerShellと比較して、よ多機能な開発環境を提供します。以下に、VS CodeとコマンドプロンプトおよびPowerShellの違いと、VS Codeの利便性について詳しく説明します。

VS Codeの特徴と利便性

  1. 統合ターミナル:
    • VS Codeには統合ターミナルがあり、コマンドプロンプト、PowerShell、Bash（Windows Subsystem for Linux (WSL) を使用する場合）など、複数のシェルを直接VS Code内で使用できます。
    • ショートカットキーやメニューから簡単にターミナルを開き、切り替えることができます。
  2. コード編集機能:
    • シンタックスハイライト、コード補完、エラーチェック、コードフォーマットなど、コード編集を支援する多くの機能を備えています。
    • 拡張機能を追加することで、様々なプログラミング言語やフレームワークに対応できます。
  3. デバッグ機能:
    • 内蔵のデバッグツールを使用して、コードの実行をステップごとに追跡し、ブレークポイントを設定して変数の状態を確認することができます。
    • 各種デバッグ用の拡張機能も豊富に揃っています。
  4. バージョン管理:
    • Gitなどのバージョン管理システムと統合されており、リポジトリの管理やコミットの作成、ブランチの操作をVS Code内で行うことができます。
  5. リモート開発:
    • Remote – SSH拡張機能を使うことで、リモートサーバー上のファイルをローカル環境のように編集できます。
    • Remote – ContainersやWSLのサポートもあり、さまざまな環境でシームレスに開発が可能です。
  6. 拡張機能:
    • 豊富な拡張機能のマーケットプレイスがあり、さまざまなツールやフレームワークのサポートを追加できます。

コマンドプロンプトやPowerShellとの違い

  • コマンドプロンプト:
    • 基本的なコマンドラインインターフェースであり、主にWindowsのファイルシステム操作や簡単なスクリプト実行に使用されます。
    • 拡張性やプラグインのサポートは限定的です。
  • PowerShell:
    • より高度なシェル環境であり、オブジェクト指向のコマンドラインインターフェースを提供します。
    • システム管理や自動化スクリプトの作成に便利です。
  • VS Code:
    • 統合開発環境（IDE）として、コード編集、デバッグ、バージョン管理、リモート開発など、幅広い機能を提供します。
    • 統合ターミナルを通じて、コマンドプロンプトやPowerShellの機能も内包しています。

VS Codeは、単なるテキストエディタやシェルではなく、統合開発環境としての機能を持つため、コマンドプロンプトやPowerShellの上位互換として利用できます。これにより、開発者は1つのツール内でコーディング、デバッグ、バージョン管理、リモート開発を行うことができ、開発効率が大幅に向上します。

教育

Posted by admin