[React] scp명령어를 이용한 배포 간소화

현재까지 배포 과정은 다음과 같았다.

 

1. yarn build 입력 후 빌드 대기

2. FTP클라이언트를 켠 후, build폴더 내용을 원격 서버에 복사

 

터미널에 yarn build후, 다른 창으로 이동하여 작업을 이어나가야 한다는 점이 매끄럽지 못하다고 느꼈기 때문에 다른 방법을 알아보기로 했다.

 

가능하면 터미널에서 build했으니, 터미널에서 배포까지 끝내고 싶어 검색하던 도중 scp 명령어에 대해 알게 되었다.

 

scp란 무엇인가

scp란 secure copy의 약자로써, 원격으로 파일의 카피를 할 수 있게 해주는 명령어이다.

 

어떻게 사용하는가

MAC이나 Linux계열의 OS사용자면 그냥 터미널을 열면 되고

Windows사용자는 PowerShell을 사용해야 한다.

 

사용 포맷은 다음과 같다.

 

scp [OPTIONS] [LocalPath] [RemoteUsername]@[IP]:[RemotePath]

 

내 컴퓨터의 /myproject/build폴더의 내용물 전부를 (LocalPath)

1.1.1.1의 IP주소를 가진 서버에(IP)

ubuntu라는 서버 계정을 가지고(RemoteUsername)

서버의 /var/www/html/dist폴더에 (RemotePath) 복사하기 위해서는

 

scp -r /myproject/build/* ubuntu@1.1.1.1:/var/www/html/dist 가 된다

(-r옵션은 폴더를 대상으로 복사할 때 사용한다; recursion)

 

만약 22번 포트를 사용하지 않고, 별도의 포트를 사용한다면

scp -P [PORT] -r /myproject/build/* ubuntu@1.1.1.1:/var/www/html/dist 가 된다

 

만약 평문 패스워드가 아닌 pem키를 사용한다면

scp -i [KEY_PATH] -r /myproject/build/* ubuntu@1.1.1.1:/var/www/html/dist 가 된다.

 

scp -i [KEY_PATH] -P [PORT] -r /myproject/build/* ubuntu@1.1.1.1:/var/www/html/dist 처럼 여러 옵션을 동시에 사용할 수도 있다.

만약, Permission 문제가 발생할 경우 scp앞에 sudo를 붙여 루트 권한으로 실행하면 된다

 

이제 터미널에 

yarn build 입력 후

scp 커맨드로 배포까지 마칠 수 있다.

 

그런데 scp 커맨드가 너무 길어서 이걸 매번 타이핑할 수도 없고....

별도의 메모장에 적어둘텐데, 그걸 열어서 다시 복사하여 터미널에 붙여넣는 작업은 여전히 플로우가 매끄럽지는 않다.

 

script 등록

 

 

 

프로젝트 폴더 내부에 package.json이라는 파일이 있다.

 

 

 

해당 폴더의 "scripts"부분에 새로운 명령어를 등록해줄 수 있다.

 

배포에 사용할 것이므로 "deploy"라는 항목을 추가할 것이다.

(다른 이름을 사용해도 된다)

 

 

 

이렇게 적어주면, yarn deploy는 scp -r /myproject/build/* ubuntu@1.1.1.1:/var/www/html/dist로 치환되어 실행된다.

 

이 과정을 거친 후에는

1. yarn build 입력 후 빌드 대기

2. FTP클라이언트를 켠 후, build폴더 내용을 원격 서버에 복사

 

위의 과정이

1. yarn build 입력 후 빌드 대기

2. yarn deploy입력 후 배포 대기

로 매우 간소화된다.

 

++++

 

package.json의 scripts부분에서 pre 접두사를 사용하면

해당 명령어 이전에 실행할 커맨드를 지정할 수 있다.

 

 

 

이렇게 하면 yarn deploy 하는 것 만으로도 

빌드 후 배포까지 하나의 명령어로 진행할 수 있다

 

여기까지 진행하면 

1. yarn build 입력 후 빌드 대기

2. FTP클라이언트를 켠 후, build폴더 내용을 원격 서버에 복사

의 과정을

 

1. yarn deploy

만으로 끝낼 수 있다.