Visual Studio Codeでサーバーにあるソースを直接見る方法

読者の皆様こんにちは。本記事ではリモートサーバーにあるソースコードを直接閲覧・編集する機能をご紹介します。今回はみんな大好きVisual Studio Code(以下、VS Code)を用いることで、リモートサーバー上のファイルをローカル環境のように操作できます。余談ですがこの記事ではVS Codeをを用いて紹介していますが、筆者はCursorというVS Code派生のテキストエディタを使用しています(笑)。何にせよVS Code派生のエディタなら動くぞ！！ってことです。

それではいってみましょう！！

1. 必要な準備と基本要件

必要なもの

Visual Studio Code
最新バージョンをインストールしてください。公式サイトからダウンロード可能です。よかったらHomebrewでインストールしてみてください。使い方はこちら
リモートサーバーの情報
- サーバーのホスト名またはIPアドレス
- SSH接続のための認証情報（ユーザー名、パスワード、またはSSHキー）
拡張機能「Remote - SSH」
VS Codeが提供する公式拡張機能で、サーバーとの接続をサポートします。

前提条件

ローカルマシンにSSHクライアントがインストールされている必要があります（一般的にWindows、macOS、Linuxのすべてで対応可能）。
サーバーにSSHアクセスが有効であることを確認してください。

2. 「Remote - SSH」の設定手順

Step 1: 「Remote - SSH」のインストール

1. VS Codeを開き、左側の拡張機能アイコン（四角形が並んだアイコン）をクリックします。

2. 検索バーに「Remote - SSH」と入力し、Microsoft製の拡張機能をインストールします。

Step 2: サーバーへの接続設定

コマンドパレットの起動
Ctrl + Shift + P（macOSでは Cmd + Shift + P）を押してコマンドパレットを開きます。
設定ファイルを編集
- 「Remote-SSH: Add New SSH Host」を選択。
- サーバーの接続情報を入力します。例:sqlコピーする編集するssh user@hostname ※userにはサーバーのユーザー名、hostnameにはサーバーのホスト名やIPアドレスを指定します。
- 「config」ファイルに保存するパスを選択します（通常は ~/.ssh/config）。

Step 3: SSH接続のテスト

再びコマンドパレットを開き、「Remote-SSH: Connect to Host」を選択。
設定したホストを選択すると、SSH接続が開始されます。
初回接続時は、サーバーのホストキーを受け入れるか尋ねられるため「Yes」を選択します。

3. サーバー上のソースを閲覧・編集する

サーバー上のファイルを開く

リモートサーバーに接続した状態で、以下の手順でファイルを操作できます：

ファイルエクスプローラーの使用
- 左側の「エクスプローラー」アイコンをクリックすると、サーバーのディレクトリ構造が表示されます。
- 必要なファイルを選択して開くと、ローカルと同じように閲覧・編集が可能です。
ターミナルの使用
- VS Codeのターミナルでサーバーのコマンドラインを操作できます。
- 必要に応じて直接ファイルを編集したり、プロジェクトをビルドしたりできます。

4. 「Remote - SSH」の利便性を高めるヒント

プロジェクトフォルダー全体を開く

サーバー上の特定のディレクトリをプロジェクトとして開くことも可能です。

コマンドパレットで「Remote-SSH: Open Folder」を選択します。
サーバー内の対象フォルダーを選択すると、VS Code上でそのフォルダーがプロジェクトとして開かれます。

ローカルと同様の拡張機能を使用

リモートサーバーで開いているファイルに対しても、ESLintやPrettierといったコード整形ツールやデバッガーが動作します。リモート環境に必要な拡張機能をインストールしておくと便利です。

ファイルのバックアップ

サーバー上のファイルをローカルにバックアップするために、必要に応じて「Download File」を使用できます。これにより、不慮のデータ消失を防げます。

5. よくあるトラブルとその解決方法

トラブル1: 接続できない

原因: サーバーのSSHが無効化されている、またはファイアウォールによってブロックされている可能性があります。
解決策:
1. サーバー管理者にSSHの設定を確認してもらう。
2. 必要に応じてファイアウォール設定を調整。

トラブル2: ファイルが表示されない

原因: アクセス権限が不足している可能性があります。
解決策: サーバー上で正しい権限を設定してください（例: chmodコマンドを使用）。

トラブル3: 遅延や応答速度の低下

原因: ネットワークの遅延が原因の可能性があります。
解決策: ファイルを一時的にローカルにダウンロードして編集するか、ネットワーク環境を見直してください。

まとめ

VS Codeの「Remote - SSH」機能を使えば、サーバー上のソースコードを手軽に閲覧・編集できます。

適切な設定と活用によって、リモート開発環境での作業効率が大幅に向上します。

株式会社 Coolware では長年培ったシステム開発、Webサイト制作のノウハウを活かし、お客様にITソリューションを提供しております。システムを使った効率化などをお考え方はぜひCoolwareにご相談ください。