[VS Code] 서버 연동 자동 업로드 (SFTP) 완벽 설정 가이드

amond3 weeks ago2025-12-19Linux SFTP Ubuntu VS Code

19views

많은 개발자들이 **”FTP를 설치해야 하나요?”**라고 묻지만, 리눅스 서버(특히 Ubuntu)를 운영 중이라면 별도의 FTP 서버(vsftpd 등)를 설치할 필요가 전혀 없습니다.

오히려 보안상 취약한 일반 FTP 대신, 이미 설치된 SSH 포트(22번)를 이용하는 SFTP(Secure FTP) 방식을 사용하는 것이 표준이자 가장 안전한 방법입니다.

VS Code에서 코드를 작성하고 Ctrl+S를 누르면 서버로 즉시 업로드되도록 구성해 보겠습니다.

0. 핵심 원리 및 사전 준비

원리: 별도의 FTP 프로그램을 띄우지 않고, VS Code 확장 프로그램이 SSH 터널을 통해 파일을 전송합니다.
장점: 보안성 우수(암호화), 설정 간편, 실시간 동기화.
필수 조건:
1. VS Code 설치 완료.
2. 서버 접속 정보 (IP, ID, Password 또는 SSH Key 파일).

1. 서버 측 권한 설정 (가장 중요!)

가장 많이 겪는 문제가 “Permission Denied (권한 없음)” 오류입니다. 파일을 업로드하려면 해당 폴더에 쓰기 권한이 있어야 합니다.

Bash

# 1. 현재 접속한 사용자($USER)를 웹 그룹(www-data)에 추가합니다.
sudo usermod -aG www-data $USER

# 2. 웹 루트 디렉터리의 소유권을 웹 그룹으로 설정합니다.
sudo chown -R www-data:www-data /var/www/html

# 3. 그룹 구성원(본인 포함)이 파일을 쓰고 수정할 수 있도록 권한(775)을 부여합니다.
sudo chmod -R 775 /var/www/html

# (중요) 그룹 변경 사항을 적용하기 위해 로그아웃 후 다시 로그인하거나, 아래 명령어를 입력하세요.
newgrp www-data

2. VS Code 확장 프로그램 설치

VS Code 마켓플레이스에서 SFTP 클라이언트를 설치합니다.

VS Code 좌측 확장(Extensions) 아이콘 클릭 (단축키: Ctrl+Shift+X).
검색창에 SFTP 입력.
SFTP (제작자: Natizyskunk 또는 liximomo) 설치.
- Tip: Natizyskunk 버전이 최근까지 유지보수가 잘 되고 있어 추천합니다.

3. 설정 파일 (sftp.json) 생성 및 작성

이제 프로젝트 폴더와 서버를 연결합니다.

VS Code에서 F1 또는 Ctrl+Shift+P를 눌러 명령어 팔레트를 엽니다.
“SFTP: Config“를 입력하고 엔터를 누릅니다.
생성된 .vscode/sftp.json 파일에 아래 내용을 복사하여 본인 환경에 맞게 수정합니다.

A. 아이디/비밀번호 방식 (가장 기본)

JSON

{
    "name": "My Server",
    "host": "서버_IP_주소",
    "protocol": "sftp",
    "port": 22,
    "username": "사용자_ID (예: ubuntu)",
    "password": "서버_비밀번호",
    "remotePath": "/var/www/html",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false
}

B. SSH 키 파일 방식 (AWS/클라우드)

비밀번호 대신 .pem 키 파일을 사용한다면 password 대신 privateKeyPath를 씁니다.

JSON

{
    "name": "AWS Server",
    "host": "서버_IP_주소",
    "protocol": "sftp",
    "port": 22,
    "username": "ubuntu",
    "privateKeyPath": "C:/Users/내PC/key.pem", 
    "remotePath": "/var/www/html",
    "uploadOnSave": true
}

(주의: 윈도우 사용자는 경로 구분자를 \ 대신 /로 써야 오류가 없습니다.)

4. 사용 방법 및 검증

자동 업로드:
- 파일을 수정하고 저장(Ctrl+S) 해보세요.
- VS Code 하단 상태 표시줄에 SFTP: Uploading... 메시지가 떴다가 사라지면 성공입니다.
수동 다운로드/동기화:
- 왼쪽 파일 탐색기에서 폴더를 우클릭하고 “SFTP: Download Folder“를 누르면 서버의 파일을 내 PC로 가져옵니다.
원격 파일 확인:
- 좌측 사이드바에 생긴 SFTP 아이콘을 클릭하면 서버의 파일 목록을 바로 볼 수 있습니다.

5. 트러블슈팅 Tip 💡

Q: “Permission denied” 오류가 계속 떠요!
- A: 1번 단계(서버 권한 설정)가 제대로 적용되지 않은 경우
  터미널에서 ls -l /var/www/html을 입력했을 때 권한이 drwxrwxr-x로 되어 있는지 확인.
  만약 안 되어 있다면 sudo chmod -R 775 /var/www/html을 다시 실행.
Q: 접속이 안 되고 Timeout이 발생해요.
- A: 서버 방화벽(AWS Security Group 등)에서 **22번 포트(SSH)**가 내 IP에 대해 열려 있는지 확인
Q: 업로드가 너무 느려요.
- A: sftp.json 설정에 "watcher": { "autoUpload": false, "autoDelete": false }를 추가하면 불필요한 감시를 꺼서 속도를 높일 수 있음.