본문 바로가기
카테고리 없음

VS Code SFTP/FTP 설정 파일 업로드/관리 완벽 가이드

9xy2nq5 2025. 1. 22. 16:10

 

 

개발자라면 누구나 공감할 겁니다. 로컬에서 작업한 코드를 서버에 업로드하는 일, 정말 빈번하죠! 파일질라나 다른 툴을 쓰자니… 시간 낭비는 어쩔 거고요?! 😫 VS Code의 SFTP/FTP 확장 프로그램으로 개발 생산성을 극대화하세요! 🚀 업로드/관리 시스템 구축, 이제 어렵지 않습니다! VS Code, SFTP, FTP, 파일 업로드, 서버 관리 등의 키워드로 여러분의 검색을 도와드립니다.

SFTP: 보안과 편리함, 두 마리 토끼를 잡아라!

SSH File Transfer Protocol, 줄여서 SFTP! 이름에서부터 느껴지는 든든함, 바로 보안 이죠! 💪 SSH 프로토콜을 사용해서 파일 전송을 꽁꽁 싸매준답니다. 보안이 중요한 프로젝트 ? SFTP가 정답 입니다! VS Code에서 SFTP 설정, 생각보다 훨씬 간단해요!

SFTP 확장 프로그램 설치 및 설정

1. 확장 프로그램 설치: VS Code 마켓플레이스에서 SFTP 검색! 클릭! 설치! (이미 설치하셨다면? 당연히 패스~! 😉)

2. 설정 파일 생성 (sftp.json): Ctrl + Shift + P 혹은 F1 키로 명령 팔레트를 열고, SFTP: Config 입력! 뿅! 하고 sftp.json 파일이 나타납니다. 워크스페이스 단위 설정이 필요하다면? SFTP: Create Workspace Configuration File 을 입력하세요!

3. 설정 파일 편집: sftp.json 파일을 열고 서버 정보를 입력합니다. 꼼꼼하게 작성해야 나중에 편해요! 😊

{
  "name": "My Production Server",
  "host": "your.server.address",
  "protocol": "sftp",
  "port": 22,
  "username": "your_username",
  "password": "your_password", // 보안에 유의!
  "remotePath": "/path/to/your/remote/directory",
  "uploadOnSave": true,
  "ignore": [
    "**/.git",
    "**/.vscode",
    "**/node_modules",
    "**/.DS_Store", // macOS 사용자라면!
    "**/dist", // 빌드 결과물 제외
    "**/.env" // 환경 변수 파일 제외
  ],
  "watcher": { // 파일 변경 감지 설정
    "files": "**/*", // 모든 파일 및 폴더 감시
    "autoUpload": true, // 변경 시 자동 업로드
    "autoDelete": true // 로컬에서 삭제 시 서버 파일도 삭제
  },
  "concurrency": 10 // 동시 업로드 파일 수 제한 (서버 부하 방지)
}

⛔ 보안 경고! password 를 직접 입력하는 건 위험해요! SSH Key를 사용하는 것이 훨씬 안전합니다. privateKeyPath 설정을 추가하고 개인 키 파일 경로를 지정하세요! SSH Key 생성 및 설정 방법은 온라인 자료를 참고해 주세요!

SFTP 고급 활용: 파일 동기화 및 비교

자동 업로드: uploadOnSave 옵션 덕분에 파일 저장과 동시에 서버로 슝! 업로드됩니다. 시간 절약 최고! 👍

수동 동기화: Ctrl + Shift + P 또는 F1 → SFTP: Sync Local -> Remote (로컬 → 서버), SFTP: Sync Remote -> Local (서버 → 로컬) 명령어로 수동 동기화도 가능합니다!

파일 비교: SFTP: Diff Local -> Remote , SFTP: Diff Remote -> Local 명령어로 로컬과 서버 파일 간의 차이점을 쉽게 비교할 수 있어요!

FTP: 간편함이 최고 장점!

File Transfer Protocol, FTP! 간단하고 빠른 파일 전송이 필요할 때 딱이죠! 보안은 SFTP보다 약하지만, 속도는 FTP가 우세! 🚀 VS Code에서 FTP를 사용하려면 ftp-simple 확장 프로그램을 추천합니다! (SFTP까지 지원하는 센스! 😉)

FTP 확장 프로그램 설치 및 설정

1. 확장 프로그램 설치: VS Code 마켓플레이스에서 ftp-simple 검색 후 설치!

2. 설정 파일 생성 (ftp-simple.json): F1 → ftp-simple: Create FTP Configuration File 실행!

3. 설정 파일 편집: ftp-simple.json 파일을 열고 서버 정보를 입력합니다.

{
  "name": "My Test Server",
  "host": "your.ftp.server.address",
  "port": 21,
  "type": "ftp",
  "username": "your_ftp_username",
  "password": "your_ftp_password", // 보안에 유의!
  "path": "/path/to/your/remote/directory",
  "autosave": true,
  "ignore": [
    "**/.git",
    "**/.vscode",
    "**/node_modules"
  ],
  "passive": true, // 패시브 모드 설정 (방화벽 문제 해결)
  "preserveTimestamps": true // 파일 시간 정보 유지
}

🚨 보안 주의! FTP는 암호화 없이 데이터를 전송하므로 보안에 취약합니다. 중요한 정보를 다룰 땐 SFTP 또는 FTPS(FTP over TLS/SSL)를 사용하세요!

FTP 추가 기능 활용

ftp-simple 은 다양한 명령어를 제공합니다! 명령 팔레트에서 ftp-simple: 로 시작하는 명령어들을 확인해 보세요. 업로드, 다운로드, 파일 삭제, 이름 변경 등 다양한 기능이 숨겨져 있답니다! 😲

SFTP vs FTP: 나에게 맞는 프로토콜은?

기능 SFTP FTP
보안 높음 (SSH 프로토콜 사용) 낮음 (암호화되지 않은 연결)
속도 보통 빠름
복잡도 설정 약간 복잡 설정 간단
방화벽 문제 일반적으로 문제없음 포트 포워딩 또는 패시브 모드 필요
권장 용도 보안이 중요한 파일 전송 (개발 서버 등) 빠른 파일 전송, 보안 덜 중요한 경우

이제 VS Code SFTP/FTP 활용법 마스터! 💪 파일 전송, 이제 걱정 끝! 개발에만 집중하세요! 궁금한 점은 언제든 댓글로 남겨주세요! 도와드릴게요! 😊 즐거운 코딩 되세요! 🎉

 

티스토리툴바