あるサーバー上で動作している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です。
エクスプローラを開けば、リモートのファイルの一覧が表示されていると思います。
以上です。