【Atom】빌드한 폴더를 Remote-ftp로 자동 업로드

개요

webpack 등의 빌드 툴을 이용하고 있는 경우 등, 개발과 공개 디렉토리가 다른 경우에 Remote-ftp로 자동 업로드할 때의 순서 메모.

디렉토리 구성

root/
　├ dist/(공개 디렉토리)
　└ dev/(개발 디렉토리)

Atom에서 프로젝트 폴더 지정

Remote-ftp의 사양상, 로컬측의 업로드 폴더 지정은 할 수 없는 것 같아, 반드시 프로젝트 루트로부터의 디렉토리 구성으로 업 되어 버립니다.
따라서 Atom에서 프로젝트 폴더를 지정할 때 루트를 지정하지 않고 dist와 dev를 각각 지정합니다.
프로시저는 먼저 dev 폴더를 지정하여 프로젝트를 연 다음 파일 > 프로젝트 폴더 추가에서 dist 폴더를 추가합니다.
차례는 특별히 관계 없다…라고 생각했는데, 실은 관계 있습니다. "dev"가 위가 되도록 등록하거나 이미 등록한 후의 경우는 드래그하여 순서를 변경합니다.

이런 구성이 됩니다. ↓

ftpconfig 파일 만들기

.ftpconfig는 FTP 연결 정보를 포함하는 파일입니다.
패키지 > Remote FTP > Create FTP(/SFTP) Config File에서 만들 수 있습니다.
(이유는 후술)

{
    "protocol": "ftp",
    "host": "(host name)",
    "port": 21,
    "user": "(user)",
    "pass": "(pass)",
    "promptForPass": false,
    "remote": "/sites/sample/",
    "secure": false,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": ["../dist/"],
    "watchTimeout": 500
}

이런 느낌입니다. 편집해야 할 위치는 host, user, pass, remote 및 "watch"입니다.

watch란?

watch는 모니터링 대상을 추가하기 위한 설명입니다. 공식 문서에도 "./dist/stylesheet/…"라고 하는 기술예가 있도록(듯이), 빌드 툴등이 생성한 감시외의 디렉토리를 대상에 추가하도록 지정합니다.

이번 dist 폴더는 Atom의 프로젝트 내이므로 감시 대상에 들어가 있을까 생각하고, 아무래도 remote-ftp는 .ftpconfig 파일의 설치 장소를 기축으로 하는 것이므로, 여기서 "../dist"를 지정하고 있다 합니다.
(위의 디렉토리 순서에 대한 이유가 여기에 관련되어 있지만, remote-ftp는 첫 번째 폴더에 구성 파일을 생성하므로 가장 높은 디렉토리는 dev 여야합니다.)

.ftpignore 만들기

/ftpignore는 대상 파일의 제외를 지정하는 파일입니다.
패키지 > Remote FTP > Create ignore File에서 만들 수 있습니다.

.ftpconfig
.ftpignore
id_rsa
.DS_Store
.git
dev/

아마 dev/이외는 처음부터 기술되고 있다고 생각합니다.
dev/는 개발 폴더를 업로드하지 않기 위해 추가합니다.

연결 테스트

설정은 이상입니다.
패키지 > Remote FTP > Connect에서 서버에 연결한 후 빌드 도구로 콘텐츠를 생성하고 업로드 상태를 확인합니다.
작동하지 않으면 Atom을 다시 시작한 후 시도해 보십시오.

요약

watch에 공개 폴더 추가

ftpignore에서 개발 폴더 제외

로 실현할 수 있습니다.
watch의 기술을 잘 모르고, 인터넷에서 조사해도 정답의 형태가 잘 모르고, 대부분 고민했습니다. .
Atom 패키지의 동작이 잘못되었을 때의 확인 방법으로서,
'보기' > '개발' '개발자 도구'에서 Chrome 개발자 도구를 확인할 수 있으므로 여기에서 오류 로그를 참조하면 원인을 잡기 쉬워집니다.