その他

Visual Studio Codeでリモートのテスト環境にファイルを同期する方法

コードを書いた後にテスト環境でファイルの変更内容を確認する際に使用します。

会社で開発する際に「IDEの機能で、テスト環境にファイルアップロードし動作を確認」するように言われましたが、

設定方法が全くわからなかったため、備忘録としてメモします。

①VScodeに「SFTP」という拡張機能をインストールする

②ローカルのディレクトリ直下に.vscode/sftp.jsonを作り下記の内容を貼り付ける

「SFTP」をダウンロード後、

プロジェクトのディレクトリ直下にsftp.jsonファイルを作成する

[
    {
        "name": "TestServer",
        "host": "000.00.00.000",
        "protocol": "sftp",
        "port": 22,
        "username": "apache",
        "privateKeyPath": "/Users/{ユーザー名}/.ssh/id_rsa",
        "remotePath": "/home/apache/www/hogehoge",
        "uploadOnSave": true,
        "ignore": [
            "**/.vscode/**",
            "**/.git/**",
            "**/.DS_Store"
        ]
    }
]

このように設定しておくと、保存時に自動的にテストサーバーにアップロードされるようになります
"uploadOnSave": true, の部分を false にすると、自動アップロードが無効になります。

③Command + Shift + Pでコマンドパレットを出現させ、ここにSFTP: Sync Local -> Remoteを選択し実行する。

するとリモートサーバーを選択する状態になるので該当の「テストサーバーの名前」を選択すると同期が完了。

次回以降、自動的にファイルの変更内容がリモート環境に同期されます。

※ここで「.ssh/config」がないというエラーが出る場合は、.sshディレクトリにconfigファイルを作成する。

以上で設定が完了です。

  • この記事を書いた人

コウダイ

都内のWeb系自社開発企業に勤務するエンジニア｜33歳1児のパパ｜ブログ歴4年→月間6,000PV｜新卒で手取り18万のホテルマン6年→プログラミングを900時間勉強→100社以上応募しアラサー未経験から7ヶ月でフルリモートのWEB系自社開発エンジニアに転職し年収100万円UP｜【人生を自由に、ノンストレスで生きる】をテーマに、30歳で文系・異業種未経験からITエンジニアに転職したノウハウの他、プログラミングやブログで稼ぐ方法など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他