【Visual Studio Code】【SSH FS】【WP】ソースコードをリモートで編集する方法

スポンサーリンク

あるサーバー上で動作しているWordPressのソースコードを本格的にカスタマイズしたいと思ったのですが、開発すべき土台が整っていませんでした。

なので、VSコードの拡張機能を利用して、リモートでソースコードを編集する環境を整えたいと思います。

PS.本当はRemoto-SSHを使いたかったのですが、自分が利用しているホスティング基盤(さくらインターネット)のOSが対応してなかったので、SSH FSを使います。

前提条件

前提条件は以下でございます。

・Visual Studio Codeがローカル環境にインストールされていること

・WordPressがインストールされた環境が準備できていること

拡張機能Remote Developmentをインストール

VSコードでリモート接続するために、VSコードの拡張機能である「SSH FS」をインストールします。

VSコードの「EXTENSIONS:MARKETPLACE」をクリックします。

以下画像の赤枠に囲まれた箇所です。

クリックすると、拡張機能の一覧が表示されます。

検索ボックスに「ssh fs」と入力して絞り込みます。

「SSH FS」が表示されるので選択し、インストールします。

これでインストールは完了です。

次は認証の設定になります。

セキュリティを考慮して、今回はパスワード認証ではなく公開鍵認証を行います。

公開鍵認証の設定

SSHで公開鍵認証を行うために、公開鍵と秘密鍵を生成します。

そして、リモートサーバに公開鍵を仕込みます。

公開鍵と秘密鍵の生成

公開鍵認証用の鍵を保存するフォルダを作成します。

PS C:\Windows\system32> mkdir c:\Users\XXX\.ssh

作成したファルダに移動します。

PS C:\Windows\system32> cd c:\Users\XXX\.ssh

鍵を生成します。

PS C:\Users\XXX\.ssh> ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\XXX/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\XXX/.ssh/id_rsa.
Your public key has been saved in C:\Users\XXX/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:j9N6ipc4LqRGZATDaynMqgC7A4b9OFP/l2R3BtjZlNk XXX@DESKTOP-7O941B9
The key's randomart image is:
+---[RSA 2048]----+
|    略       |
+----[SHA256]-----+
秘密鍵のアップロード

鍵の生成が完了したら、公開鍵(id_rsa.pub)をリモートのサーバーにアップロードします。

今回は、公開鍵をアップロードするのにWinSCPを使いました。

アップロードできたら、id_rsa.pubの名称を「authorized_keys」に変更します。

そして、ファイルのパーミッションを「0600」に変更しましょう。

以上で鍵のアップロード作業は完了です。

SSH FSの設定ファイルの作成

SSH FSの設定ファイルにホスト名、ユーザ名、秘密鍵、秘密鍵のパスフレーズを設定して行きます。

まずはじめに、コマンドパレットを開きます。

次に、リストの中から「SSH FS:Create a SSH FS configurartion」を選択します。

Name項目に任意の名前を入力します。

入力したら、完了ボタンを押下します。

項目一覧の「Host」、「Username」、「Private key」、「Passphrase」に

それぞれ、ホスト名、ユーザ名、 秘密鍵のファイルパス 、秘密鍵のパスフレーズを入力します。

必要であれば、「root」も設定しましょう。

入力が完了したら、saveボタンを押下します。

これで設定ファイルの作成は以上になります。

SSH接続

再度、 コマンドパレットを開きます。

リストの中の 「SSH FS: Connect as Workspace folder」を選択します。

前項で設定した名称を選択します。※自分の場合はwebengineerblogです。

エクスプローラを開けば、リモートのファイルの一覧が表示されていると思います。

以上です。

Visual Studio Code
スポンサーリンク
エンジニアの日記

コメント