Node.js 기반 프로젝트(리액트/뷰) npm 명령어로 배포 자동화하기

안녕하세요. 꾸생입니다 :)

오늘은 회사 업무 중 배우게 된 내용에 대해 포스팅해보려 합니다.

드디어 첫 SI 프로젝트의 개발이 마무리됐습니다. 이후 수정사항이나 버그 정도 잡아주면 될 거 같지만 나중에 DB 쪽에 큰 문제가 생길 거 같은 불길한 예감이 듭니다만... 프론트 수준에서 어떻게 할 수는 없었습니다.

여차저차 마무리되고 이후 알고 보니 일정이나 기획 등 구멍 나있는 프로젝트였습니다. 수주한 쪽에서도 일정을 못 맞출 거라 생각했다고 합니다.

1차 프로젝트를 이어 다음 2차 프로젝트도 1차와 연관되어 Vue.js를 사용하는데요. 1차 때에는 프로젝트 셋팅이 된 상태에서 개발을 진행했지만 이번에는 텀이 생겨 다시 셋팅을 해봤습니다.(신입이지만 가능했습니다..^^)

동일한 vue-element-admin 템플릿을 사용했고 1차 때 확인하지 못한 뷰 라우터 쪽이랑 상태 관리, 로그인/권한 쪽 로직을 파악해봤습니다. API 개발이 되기 전에 싹 훑어보고 개발 예정인 페이지들이며 싹 준비해놨죠.

마지막 배포의 문제인데요. 백오피스 특성상 보안 이슈로 사내 VPN을 사용하지 않으면 접속할 수 없는 구조며, 개발 서버도 마찬가지였습니다.

아웃바인드 쪽에서 막혀있는 상태라 VPN + FTP를 통해 배포해야 하는 구조인데요. 클라이언트 쪽에 요청해도 승인 나는데 까지 오래 걸릴 테니 예전 배포를 담당했던 쪽이랑 같은 방식으로 배포하랍니다..

그것은 바로 드래그 앤 드롭 배포!

하지만 매번 그렇게 배포할 수 없으니 Node.js 기반의 프로젝트에서 npm 명령어로 배포할 수 있도록 셋팅해봤습니다. Node.js 만세!

라이브러리 설치

npm install --save-dev ftp-deploy

배포할프로젝트 경로/deploy.js

const FtpDeploy = require("ftp-deploy");
const ftpDeploy = new FtpDeploy();

const config = {
    user: "",     // <- id
    password: "", // <- password
    host: "",     // <- host
    port: 21,   // <- port
    localRoot: __dirname + "/dist", // <- 빌드 결과가 담긴 폴더명 넣기
    remoteRoot: "/", // <- 배포될 서버 경로
    include: ["*", "**/*"],      // this would upload everything except dot files
    // e.g. exclude sourcemaps, and ALL files in node_modules (including dot files)
    exclude: [
        "node_modules/**",
        "node_modules/**/.*",
        ".git/**",
    ],
    // delete ALL existing files at destination before uploading, if true
    deleteRemote: false,
    // Passive mode is forced (EPSV command is not sent)
    forcePasv: true,
    // use sftp or ftp
    sftp: false, // false = ftp, true = sftp
};

ftpDeploy
    .deploy(config)
    .then((res) => console.log("finished:", res))
    .catch((err) => console.log(err));

deploy.js 파일은 배포할 서버의 Host 경로와 포트, 접속 아이디, 비밀번호, 로컬에서 배포될 경로, 배포할 서버의 경로 등 설정해줍니다.

package.json 명령어 추가

"scripts": {
    "deploy": "node deploy"
},

배포

npm run deploy

npm run build 명령어로 빌드 후 npm run deploy 명령어로 배포하면 자동으로 서버와 ftp 연결 후 deploy.js에 설정해놓은 경로로 알아서 전송합니다.

예전 AWS EC2 서버에 배포할 때는 터미너로 ssh 접속 후 깃으로 했지만. 사실 이 방법이 더 편리한 거 같습니다. 리액트나 뷰 프로젝트와 같이 Node.js 기반의 프로젝트를 사용한다면 이 방법을 추천드립니다.

ftpDeploy
    .deploy(config)
    .then((res) => console.log("finished:", res))
    .catch((err) => console.log(err));

참고로 위 코드에서 배포 완료될 시점에 텔레그램이나 사내 메신저로 알림을 보내면 좀 더 있어 보이겠네요.

추가 꿀팁

빌드와 배포를 한 번에 처리하기 위해 아래 명령어를 추가해 사용하면 더 편합니다.

"scripts": {
    "deploy": "node deploy"
    "bd": "npm run build && node deploy"
},

빌드와 배포 앞글자 하나씩 따서 bd로 네이밍 했습니다. 명령어에는 빌드 명령어와 && 를 붙이고 배포 명령어까지 적어주면 빌드가 끝난 후 배포를 바로 시작합니다.

저작자표시 비영리 변경금지

꾸생의 DevLog