その他

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ファイルを作成する。

以上で設定が完了です。

  • この記事を書いた人

コウダイ

文系・ノースキル・未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内IT系上場企業のフルリモートWebエンジニアに転職した人。

都内IT系上場企業に勤務するWebエンジニア5年目｜プログラミングスクールのテックキャンプ公式アンバサダー｜新卒で手取り18万の地方ホテルマン6年→挫折→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収150万円UP｜34歳2児のパパ｜ブログ歴4年→月間6,000PV｜エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他