[WebStorm] 원격 배포 환경에서 코딩하기

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는 웹스톰으로 원격 배포 환경에서 바로 코딩하는 방법에 대해 알아보도록 하겠습니다.

 

 

 

마운트 폴더 생성하기

remote 폴더 생성

먼저, 원격 디렉토리를 로컬에 마운트(사실 마운트라기보단 복사..)하기 위한 폴더를 만들어줍니다. 저는 remote라는 디렉토리를 만들었습니다.

 

 

WebStorm으로 열기

WebStorm으로 remote폴더를 연 모습

WebStorm을 켜서, remote폴더를 열어주세요.

 

 

Deploy 설정 및 연결하기

Deploy 설정 창

Tools - Deployment - Configuration 을 누릅니다.

왼쪽 위 +버튼을 눌러 배포 환경을 추가합니다.

저는 배포 환경 이름을 catch-my-mind-back으로 했습니다. (취향껏 해도 됩니다.)

• type : 저는 SFTP로 했습니다.
• Host : 호스트입니다. 제 경우에는 백엔드용 서버의 도메인인 back.catchmymind.shop를 썼습니다.
• port : FTP 기본 포트인 22로 놔둡니다.
• User Name : 서버로 접속 가능한 유저 이름을 적습니다. 보통은 root입니다.
• Authentication : 인증 방법입니다. 저는 비밀번호로 인증하도록 하겠습니다.
• Root Path : 프로젝트의 루트 경로를 설정합니다. 옆의 폴더 아이콘을 눌러 잘 찾아봅시다.
• Web server URL : 호스트를 설정하면 자동으로 채워집니다.

설정을 다 한 후, TEST CONNECTION을 눌러 잘 연결 되는지 확인합니다.

 

 

remote host 브라우저를 연 모습

이제 우상단의 Remote Host를 누르면 원격 디렉토리를 브라우징 할 수 있습니다.

혹시 없다면, Tools - Deployment - Browse Remote Host를 눌러주세요.

 

 

원격 디렉토리 로컬로 복사하기

수정이 필요한 파일만 골라서 로컬 디렉토리에 복사합니다.

 

 

즐겁게 디버깅 하기

이제 즐겁게 디버깅 하면 됩니다.

실시간으로 서버를 빌드하고 로그를 확인하고 싶다면 터미널에서 ssh접속을 하시면 됩니다.