VS CodeでEC2にアクセスして開発する方法を模索してる、その２：SFTP

開発環境 VS Code SFTP

※ 2020年に書いた内容なので、情報がすこし古いかも

ローカルに立てていたApache+PHP環境をEC2にも置く必要が出てきました。
こういうとき、昔はFTPツールでいちいちソースファイルをアップロードしていたけれど、今はもっと便利にできるんじゃないかなあ。

で、試してみる方法その２。
今回はVS CodeのSFTPプラグインを使います。

SFTP

SFTP

こちらは、VSCodeからSFTPでアレコレできちゃうってやつです。
SFTPでのファイルのやり取り（Upload/Download）は当然として、ローカルとリモートの差分を取れたり、ディレクトリを同期できたりします。
プラグインの解説文にある通り、Very powerful !

インストール

ExtensionsからSFTPをインストールします。
こちらはDonate（寄付受け付けてるよ）プラグインなので、気に入ったらPayPalボタンを押して寄付するとよいと思います。

初期設定

事前準備として、SFTPの設定ファイルを作成する場所を指定するため、ローカルのプロジェクトかフォルダを開いておきます。 開いてなかったら SFTP expects to work at a folder. って注意されます。
たとえばローカルとサーバの環境を同期しておきたいって場合は、同期したいローカル環境を開いておくとよいかと。

まずはconfigファイルを作成します。
コマンドパレットを開いて

SFTP: Config

で、開いていた場所に.vscode/sftp.jsonが作成されるので、設定をしていきます。

※ お相手との鍵認証辺りの設定は事前に済んでいるものとしてすすめます

いろいろな設定ができるので、詳細は公式ページを参照ください。

marketplace.visualstudio.com

ここでは参考例を。

{
    "name": "XXXXX",
    "host": "XXXXX",
    "protocol": "sftp",
    "port": 22,
    "username": "XXXX",
    "privateKeyPath": "~/.ssh/XXXX.pem",
    "remotePath": "/var/www/html",
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ],
    "uploadOnSave": true,
    "watcher": {
        "files": "*/",
        "autoUpload": true,
        "autoDelete": false
    }
}

ひとつだけ、要注意の設定をメモ。

uploadOnSave

先程の例ではuploadOnSaveをtrueにしていますが、これはむやみにtrueにすると痛い目をみる機能です。
ファイルが保存されたら、即アップロードするよって機能なので。

リモート先がみんなで使う環境とか、ましてや本番環境の場合は、なんにも考えずにアップロードするのはまずい。
アップロード時に、リモートとローカルファイルのコンフリクトの検知はありません。強制上書きです。
個人利用のリモートだとしても、リモートだけに入れていた修正が（まあ、そもそもそういうケースがあるのがダメかもだけれど、いろいろしてると発生しうるよね）、知らないうちに消えてるとか起きるわけです。

でも、ちゃんとわきまえて使うと、とっても便利。

おしまい

これで、ローカルの編集を簡単にサーバに反映できます。