SSH で VSCode から直接ウェブサーバー上のファイルを編集する

このページにはプロモーションが含まれています

このページでは VSCode から直接ウェブサーバー上のファイルを編集する方法について解説したいと思います。

特に PC の OS が「MacOSX」、使用するウェブサーバーが「XSERVER」の場合の解説を行いますが、考え方に関してはどの OS やウェブサーバーでも同じなので、参考になると思います。

ウェブサーバー上のファイルを編集する時、下記のようにしてファイルを編集するのが一番一般的だと思います。

FTPソフト（例えば FIleZilla）を使用して一旦ファイルをダウンロードし、編集後に再度アップロードする

ただ、この方法だとファイルのダウンロードとアップロードの作業が必要なので若干面倒ですよね？

これに対し、このページで紹介する方法では VSCode から直接ウェブサーバー上のファイルが編集できるので、ダウンロードやアップロードが不要で「作業が楽」というメリットがあります。

また VSCode にプラグインをインストールしておくことでインテリセンスやソースコードの自動整形が有効な状態で編集できるので編集しやすいというメリットもあります。

ただし直接ファイルを編集するので危険性もある点は注意が必要です。例えばウェブサーバー上のファイルの編集を失敗するとウェブサイトの表示ができなくなってしまう等の問題もあります。

今回紹介する方法を利用される方は、是非この注意点も頭に入れておいてください。

Contents

VSCode から直接ウェブサーバー上のファイルを編集する方法
SSH の設定を行う
- ウェブサーバーの SSH 設定
- PC の SSH 設定
VSCode の設定を行う
まとめ

VSCode から直接ウェブサーバー上のファイルを編集する方法

VSCode から直接ウェブサーバー上のファイルを編集するために、大きく分けて下記の２つを行います。

SSH の設定
VSCode の設定

まず SSH とはリモート上の装置にログインし、操作を行うためのプロトコル（手段）です。

この SSH を利用すれば、ウェブサーバーにログインし、SSH からウェブサーバーの操作が行えるようになります。なので、SSH によりウェブサーバー上のファイルを編集するようなことも可能です。

ウェブサーバー上の編集を行えるように、まずはこの SSH の設定を行います。

また VSCode 上で SSH を利用することにより、ウェブサーバー上のファイルに VSCode からアクセスできるように、VSCode の設定を行います。

SSH の設定を行う

それでは SSH を利用するために SSH の有効化と設定を行っていきましょう。

SSH を行うためにはウェブサーバーの設定と、あなた自身の PC の設定が必要です。

ウェブサーバーの SSH 設定

ウェブサーバーの SSH 設定では下記の２つの設定が必要です。

SSH の有効化
鍵の生成とダウンロード

SSH の有効化

ますウェブサーバーに SSH で接続するためにはウェブサーバーの SSH を有効化する必要があります（使用しているウェブサーバーによっては有効化できない場合もありますので注意してください）。

まずは SSH の有効化を行ってください。

特に使用しているウェブサーバーが XSERVER の場合、下記のように SSH を有効化することができます。

サーバーパネルにログイン
「アカウント」の「SSH設定」をクリック
「SSH設定」タブで「ONにする」にチェックをつけて「設定するボタン」をクリック

鍵の生成とダウンロード

SSH 有効化のあとは、続いて「鍵」の作成を行います。

SSH では「公開鍵認証」方式により、SSH でのウェブサーバーへの不正なログインを防ぐことができるようになっています。

私も詳しくないので簡単な説明になってしまいますが、「公開鍵認証」とはウェブサーバーの持つ「公開鍵」に対し、その公開鍵のペアとなる「秘密鍵」を所有していない PC からはそのウェブサーバーにログイン出来ないようにする認証の仕組みです。

さらに「秘密鍵」に対して「パスフレーズ（パスワードみたいなもの）」を設定することで、そのパスフレーズを知っている人しか「秘密鍵」が利用できないようになっています。

ですので、「秘密鍵」を持っていない PC および「パスフレーズ」を知らないユーザーからは SSH でウェブサーバーにログインすることができなくなり、ウェブサーバーを安全に保つことができます。

逆に誰でもアクセスできるようなウェブサーバーだと、悪意ある人に勝手にウェブサーバー上のファイルを消されたり変更されたりしてしまうので危険です。

ちょっと前置きが長くなってしまいましたが、要は SSH を利用するためには公開鍵と秘密鍵を生成し、公開鍵をウェブサーバーに、秘密鍵を SSH を利用する PC に設置する（秘密鍵のファイルを PC に保存する）必要があります。

特に使用しているウェブサーバーが XSERVER の場合、下記のようにして鍵の生成を行い、さらに秘密鍵をダウンロードして PC に保存することが可能です（既に鍵を生成済みの方は下記を行うと今までの鍵が使用できなくなってしまいますので注意してください）。

サーバーパネルにログイン
「アカウント」の「SSH設定」をクリック
「公開鍵認証用鍵ペアの生成」タブで「パスフレーズ」を設定して「確認画面へ進む」
（通常のパスワード同様に他人から推測されにくいものを設定してください）
「生成する」ボタンをクリック
公開鍵と秘密鍵が作成され、秘密鍵のファイルがダウンロードされる
（MacOSX の場合、下記が表示されるかもしれませんが気にしなくて良いです。拡張子が “.key” なのでキーノートアプリが開こうとしてエラーになっているだけです）

これにより、公開鍵が作成されてウェブサーバーに設置され、秘密鍵が作成されてファイルとして PC にダウンロードされたことになります。これでウェブサーバーでの SSH の設定は完了です。

鍵生成時に設定した「パスフレーズ」は実際に SSH を使用する際に必要になりますのでメモしておいてください。

PC の SSH 設定

続いてあなたご自身の PC の設定を行なっていきます。

ここで行う設定は下記の４つです。この後に VSCode 上でウェブサーバーのファイルを直接編集する方法について解説しますが、この４つさえ出来ていれば超簡単に設定できます！

秘密鍵の移動
秘密鍵のパーミッション設定
SSH の動作確認
SSH Config ファイルの作成

秘密鍵の移動

まずは秘密鍵のファイルを自身の PC の適当な場所に移動します。

移動させる場所はどこでも良いですが、覚えやすい＆他の人に見つけにくい場所が望ましいと思います。

秘密鍵が他人に使用されてしまうと不正にウェブサーバーにログインされてしまう危険性がありますので注意しましょう。

秘密鍵のパーミッション変更

続いて秘密鍵のファイルのパーミッション（アクセス権）設定を行います。

秘密鍵は他人にアクセスできるようにファイルのパーミッションが設定されていると SSH 実行時にエラーが出てしまいます。

実際には下記のようなエラーが出て SSH を実行することができません。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '秘密鍵のファイルパス' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "秘密鍵のファイルパス": bad permissions

そのため、「所有者以外は読み書き不可」に秘密鍵ファイルのパーミッションを変更します。

この設定は MacOSX の場合はターミナルアプリで簡単に行えます（Windows であれば右クリックのプロパティから変更可能だと思います）。

ターミナルアプリは「アプリケーション」の「ユーティリティフォルダ」にありますので、ダブルクリックしてアプリを開きましょう。

続いて秘密鍵の移動先のフォルダに移動します。下記のコマンドを実行することでそのフォルダに移動することができます。

cd {秘密鍵の移動先のフォルダのパス}

{ } の部分はご自身が秘密鍵を移動した先のフォルダのパスになります。例えば秘密鍵を /Users/AIUEO/key に移動した場合は、下記のようにコマンドを実行します。

cd /Users/AIUEO/key

続いて下記コマンドを実行し、秘密鍵のファイルのパーミッションを変更します。

chmod 600 {秘密鍵のファイル名}

これにより秘密鍵のファイルのパーミッションが「所有者以外は読み書き不可」設定となります。

SSH の動作確認

ここまで来れば設定自体はほぼ完了です。先ほどと同様にターミナルアプリから下記コマンドを実行してみましょう！

ssh {ユーザー名}@{サーバーのホスト名} -i {秘密鍵のファイルパス} -p {ポート番号}

{ } 部分はユーザーごとに個別に変更必要な部分になります。

{秘密鍵のファイルパス} は「秘密鍵の移動で移動した先のフォルダ」＋「ファイル名」を指定すれば良いです。

その他については特に XSERVER の場合は下記となります

{ユーザー名}：サーバーパネルログイン時に使用するユーザー名
{サーバーのホスト名}：サーバーパネルの「サーバー情報」の「ホスト名」に記載される文字列
{ポート番号}：10022

ssh コマンドを実行すると「パスフレーズ」を尋ねられますので、鍵生成時に設定したパスフレーズを入力してエンターキーを押します。

これにより、ターミナルに下記が表示されれば SSH ログインの成功です！

[{ユーザー名}@{サーバーのホスト名（の一部） ~]$

パスフレーズを尋ねる前に下記のメッセージが出力された際には yes と入力してエンターキーを押してください

Are you sure you want to continue connecting (yes/no)?

SSH ログイン後は、下記のように ls コマンドを実行すると、ログインしたウェブサーバーにあるフォルダやファイルを確認することができるはずです。

ls

独自ドメインでウェブサイトを公開している場合、サーバーによって違いがあるかもしれませんが、XSERVER の場合は ls コマンド実行によりあなたの持つドメイン名が表示されるはずです。

例えばワードプレスを利用している方などは、下記のように cd コマンドを実行してフォルダを移動し、さらに ls コマンドを実行すれば、インストールしているテーマ名が表示されたりします（そのテーマ名のフォルダの中にはテーマを構成する single.php や functions.php などがあります）。

cd {ドメイン名}/public_html/wp-content/themes/
ls
index.php  twentynineteen  twentyseventeen  twentytwenty

SSH を終了する際には下記コマンドを実行してログアウトをします。

logout

SSH Configファイルの作成

もう一度 SSH ログインをしたときのコマンドを確認してみましょう。

ssh {ユーザー名}@{サーバーのホスト名} -i {秘密鍵のファイルパス} -p {ポート番号}

長くて覚えられないですよね…。

SSH では設定ファイルを作成することで、名前を指定するだけで SSH ログインができるようになります。

まずターミナルアプリから下記コマンドを実行します。

cd ~/

これはホームフォルダに移動するコマンドです。具体的には下記フォルダに移動します。

/Users/{ユーザー名}/

続いて下記コマンドを実行します。mkdir とは指定した名前のフォルダを作るコマンドです。

mkdir .ssh

もし下記メッセージが出力されても気にする必要はないです（既にそのフォルダは存在してたということです）。

mkdir: .ssh: File exists

この作成した .ssh フォルダの直下に config というファイルを作成し、中に下記を記述して保存します。

Host {設定名}
HostName {サーバーホスト名}
User {ユーザー名}
IdentityFile {秘密鍵のファイルパス}
Port {ポート番号}

適当なテキストエディターを使ってファイルを作成すれば良いです。.ssh フォルダは隠しフォルダになっていますので注意してください。

隠しフォルダの表示

Finder では隠しフォルダは通常非表示ですが、「command」+「shift」+「.（ピリオド）」キーを同時押しすることで表示することができます

このファイルは ssh 実行時に {設定名} を指定するだけで ssh コマンドを実行するための設定ファイルになります。複数の設定を記述することも可能です。

{設定名} 以外は ssh コマンドで指定した時と同じもので良いです。

{設定名} は単なる設定名ですので覚えやすいものを設定してください（私は xserver とつけています）。

ファイル保存後、下記のコマンドを実行することで簡単に SSH ログインを行うことができるようになることを確認してください。

ssh {設定名}

次はいよいよ VSCode でウェブサーバー上のファイルを直接編集するための VSCode 側の設定を行なっていきますが、要は VSCode にこの設定ファイルを読み込ませて ssh を行わせる設定をするだけです。

VSCode の設定を行う

それでは本題の VSCode の設定を行なっていきます。が、SSH の設定が出来ていれば簡単に設定できますので安心してください。

Remote – SSH をインストール

まず Extention 設定画面で「ssh」と検索します。すると「Remote – SSH」が表示されるはずですので Install ボタンをクリックしてインストールを行います。

インストールが完了すれば画面左側に下記のボタンが表示されるようになるはずです。

Remote – SSH の設定

続いてインストールした「Remote -SSH」の設定を行います。

設定するのは「Remode.SSH: Config File」です。

ここに SSH Config ファイルの作成で作成したファイルへのパスを設定します。

ここまでこのページの解説通りに SSH Config ファイルを作成してきた方は下記のパスを設定すれば良いです。

~/.ssh/config

これで設定は完了です！

Remote – SSH でウェブサーバー上のファイルを開く

最後に Remote – SSH からウェブサーバー上のファイルを開いてみましょう！

まず Remote – SSH をインストールすることで表示されるようになった下記のボタンを表示します。

これによりリモートエクスプローラーが表示されます。

SSH Config ファイルで設定した {設定名} が表示されていることが確認できると思います（私の場合は xserver）。

この {設定名} 部分を右クリックし「Connect to Host in Current Window」をクリックします。

これにより下図のように VSCode にパスフレーズの入力画面が表示されますので、鍵生成時に設定したパスフレーズを設定します。

特にエラーが出なければこれで SSH ログイン成功です！

下図の「フォルダーを開く…」をクリックすると、ウェブサーバー上のフォルダが選択できるようになっています。

表示したいフォルダを選択して「OKボタン」を押せば、選択したウェブサーバー上のフォルダが VSCode 上で開かれ、そのフォルダ以下のファイルがエクスプローラーに表示されるようになります。

あとは PC 上のファイル同様に、ファイルを選択すればウェブサーバー上のそのファイルの中身が表示されます。

またファイルを編集すれば、ウェブサーバー上のファイルを直接編集することもできます！

まとめ

このページでは VSCode でウェブサーバー上のファイルを直接編集する方法について解説しました。

といっても VSCode 上での設定は簡単であり、SSH 接続をうまく設定する方が大変です…。

VSCode からウェブサーバー上のファイルを直接編集できるようになるので、ファイルのダウンロードやアップロードも不要で楽に編集することが可能です。

ただしウェブサーバー上のファイルを直接編集することで、ウェブサイトが表示されなくなったりする可能性もありますので、ファイル編集時は注意しましょう！

ちなみに今回はウェブサーバーが XSERVER であることを前提に解説しましたが、一般向けレンタルウェブサーバーとしては XSERVER はかなりオススメです！

SSH の設定も簡単ですし、ワードプレスもインストール簡単です。また SSD が搭載されていますので HDD が搭載されているウェブサーバーよりもページ表示が速くなります。国内ナンバーワンシェアだそうです。使っている人も多くウェブ上に情報が多いので困った時はググればすぐ解決できます。

無料お試し期間が１０日間もありますので、興味のある方はエックスサーバー使ってみてください！下記バナーからエックスサーバーのウェブサイトに移動することができます。