ロリポップのストレージをマウントしてVSコードを使う

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

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

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

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

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

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

ssh your_server_alias

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

configファイルのメリット

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

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を使用して接続する方法

Remote – SSH拡張機能のインストール
まず、VS CodeにRemote – SSH拡張機能をインストールします。
- VS Codeの左側の拡張機能アイコン（四角形が四つ並んだアイコン）をクリックします。
- 検索バーに「Remote – SSH」と入力し、Microsoftの拡張機能をインストールします。
SSH configファイルの設定
SSH configファイル（C:\Users\<ユーザー名>\.ssh\config）に必要なサーバー情報を追加します。例えば、以下のように設定します。
Host myserver
　HostName your_server_ip
　User your_username
　IdentityFile C:\Users\<ユーザー名>\.ssh\id_rsa
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のリモート機能が正常に動作するために必要なものです。

初回接続時の動作

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

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

DockerとWSLの拡張機能の利点

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

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

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

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

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

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

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

VS Codeの特徴と利便性

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

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

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

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

{ “@context”: “https://schema.org”, “@type”: “VideoObject”, “name”: “Visual Studio CodeとSSH接続(WSL,Docker,RClone,WinFSP)”, “description”: “この動画では、Visual Studio Codeの強力な機能について詳しく説明し、特にワークフローを強化するリモート拡張機能に焦点を当てます。\n\nカバーするトピック:\n\n１　リモートサーバーへの接続:\n\nRemote SSHを使用してGoogle Cloudインスタンスやその他のリモートサーバーに簡単に接続する方法を学びます。\nconfigファイルを設定して、簡単な短いコマンドで複数のサーバー接続を管理する方法を紹介します。\n\n２　configファイルのメリット:\n\nエイリアスを使った簡単な接続コマンド。\n複数のサーバー設定の一元管理。\n異なるターミナル間での再利用可能な設定。\n鍵ファイルのパスフレーズ入力の省略。\nプロキシやポートフォワーディングなどの詳細なホスト別設定。\n\n３　RCloneとWinSFPの使用:\n\nRCloneとWinSFPを使用して外部ストレージをローカルコンピュータにマウントする方法。\nこれらのツールの動作と80以上のクラウドやストレージサービスとの互換性についての簡単な説明。\n\n４　WSL拡張機能:\n\nWSL（Windows Subsystem for Linux）拡張機能の紹介。\nRemote ExplorerでWSLに切り替え、インストール済みのディストリビューションを管理する方法。\nVS CodeがWSLと統合されて、開発体験が向上する方法の説明。\n\n５　Docker拡張機能:\n\nDockerコンテナの視覚的かつ直感的な管理。\nコンテナの起動、停止、再起動、削除などの操作が簡単に行える方法。\n\n結論:\nVS Codeは非常に多用途なエディタであり、Command PromptやPowerShellの上位互換としての機能を提供します。リモートサーバーの管理、Dockerの操作、WSLの使用など、VS Codeのリモート拡張機能はワークフローを簡素化し効率化します。”, “thumbnailUrl”: [ “https://img.youtube.com/vi/kg4lsewDO8A/maxresdefault.jpg” ], “uploadDate”: “2024-06-30T00:00:00Z”, “duration”: “PT6M38S”, “embedUrl”: “https://www.youtube.com/embed/kg4lsewDO8A” }