Nodejs 백엔드가 있는 Vue 앱을 Heroku에 배포

Vue 앱을 Heroku에 배포하는 방법에 대한 많은 자습서는 서버가 없는 매우 간단한 설정을 사용합니다(또는 서버 종속성으로 express만 사용하는 정말 간단한 설정).

그러나 종속성이 많은 더 복잡한 서버로 앱을 배포하는 것은 어떻습니까? 좋은 튜토리얼을 찾을 수 없어서 이 튜토리얼을 작성했습니다.

설정

My Vue App은 프론트엔드일 뿐만 아니라 백엔드도 필요합니다. 물론 프론트엔드와 백엔드를 다른 서비스에 배포하고 프론트엔드에 CDN을 사용할 수도 있지만 모든 것을 동일한 리포지토리와 서버에 갖고 싶었습니다.

모든 Node.js 서버 코드는 루트 폴더에 있으며 내 Vue.js 앱을 위한 별도frontend 폴더가 있습니다.

프로젝트를 로컬에서 개발하는 것은 문제가 되지 않았습니다. 그래서 헤로쿠에 밀어붙이는 것도 식은 죽 먹기라고 생각했습니다.

내 서버 코드에는 간단한npm install && npm start이 필요하고 Vue.js 앱은 npm run build로 빌드해야 합니다. 서버 측에서 fastify를 사용하고 있으며 fastify-static의 도움으로 frontend/dist 폴더를 사용자에게 제공하고 있습니다.

따라서 배포 시 모든 것을 빌드하려면 내 루트 package.json의 빌드 단계에 대한 명령은 다음과 같습니다. cd frontend && npm run build ? 잘못된!

분석 및 솔루션

우선 모든 Vue.js 종속성이 설치되어 있지 않기 때문에 프론트엔드 폴더에 npm install가 없습니다. 그러나 Heroku는 분명히 NODE_ENV=prod 및 NPM_CONFIG_PRODUCTION=true를 설정하므로 npm install를 실행할 때 devDependencies가 설치되지 않습니다. Heroku가 모든 것을 올바르게 설치하고 빌드하도록 다른 접근 방식을 시도했지만(예: https://stackoverflow.com/questions/22954782/install-devdependencies-on-heroku , ) 결국 간단한 빌드 스크립트에 의존했습니다.

#/bin/bash
npm install —only=dev # installs only dev dependencies
npm install            # installs prod dependencies
npm run build          # builds the Vue.js app

이 스크립트는 frontend 폴더에 있습니다. 그리고 다음을 사용하여 루트package.json에서 이 스크립트를 호출합니다.
“heroku-postbuild”: “cd frontend && ./build.sh”,
이제 배포 시 모든 서버 종속성이 설치되고 Vue.js 프론트엔드가 빌드됩니다.

이 작업을 수행하는 다른 방법이 분명히 있지만 제 접근 방식이 저에게 효과적이며 이해하기 쉽습니다.