Как я могу автоматически построить СПА при развертывании на героку

Question

Я учусь развертывать мое приложение Vue в Heroku. Я развернул свой код в Heroku и хочу, чтобы он автоматически создавал мой код в папку dist/ Я попытался настроить файл пакета. Но я всегда получаю ошибку. Каков наилучший способ автоматической сборки приложения Vue после развертывания?

Моя структура кода:

api/
auth/
package.json

client/
__package.json
__src/

Файл корневого пакета

"scripts": {
  "postinstall": "npm install --prefix client",
  "build": "cd client && npm run build"
}

Файл пакета в приложении Vue

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^5.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.9",
    "@fortawesome/free-brands-svg-icons": "^5.6.0",
    "@fortawesome/free-regular-svg-icons": "^5.6.0",
    "@fortawesome/free-solid-svg-icons": "^5.6.0",
    "@fortawesome/vue-fontawesome": "^0.1.3",
    "animate.css": "^3.7.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "moment": "^2.22.2",
    "register-service-worker": "^1.5.2",
    "vue": "^2.6.6",
    "vue-axios": "^2.1.4",
    "vue-class-component": "^6.0.0",
    "vue-fullcalendar": "^1.0.9",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vue-session": "^1.0.0",
    "vue-textarea-autosize": "^1.0.4",
    "vue-toasted": "^1.1.26",
    "vuejs-datepicker": "^1.5.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-pwa": "^3.4.0",
    "@vue/cli-plugin-typescript": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.5.21"
  }
}

Войти на Heroku

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 10.x...
       Downloading and installing node 10.15.3...
       Using default npm version: 6.4.1

-----> Restoring cache
       - node_modules (not cached - skipping)

-----> Installing dependencies
       Installing node modules (package.json)

       > gym_schedule@1.0.0 postinstall /tmp/build_d350166995249e94786090e39036fa51
       > npm install --prefix server && npm install --prefix client


       > nodemon@1.18.10 postinstall /tmp/build_d350166995249e94786090e39036fa51/server/node_modules/nodemon
       > node bin/postinstall || exit 0

       Love nodemon? You can now support the project via the open collective:
        > https://opencollective.com/nodemon/donate

       added 772 packages from 997 contributors and audited 14644 packages in 20.244s
       found 0 vulnerabilities

       added 34 packages from 39 contributors and audited 32176 packages in 15.597s
       found 0 vulnerabilities

       up to date in 37.279s
       found 0 vulnerabilities

-----> Build
       Running build

       > gym_schedule@1.0.0 build /tmp/build_d350166995249e94786090e39036fa51
       > cd client && npm run build


       > vue@0.1.0 build /tmp/build_d350166995249e94786090e39036fa51/client
       > vue-cli-service build

sh: 1: vue-cli-service: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! vue@0.1.0 build: `vue-cli-service build`

Answer 1

В первой половине дела у вас все отлично: package.json#build уточняет сценарий, который нужно запустить, чтобы он был построен в удаленной среде Heroku.

Дело в том, что в этой среде ваши глобальные пакеты (тот, который вы установили через npm install -g <package-name>, недоступен! Это относится к vue-cli-service, который необходимо включить в package.json#devDependencies или просто запустить npm install --save-dev vue-cli-service в локальном репозитории и развернуть снова.

Answer 2

Я нашел решение.Heroku будет игнорировать пакеты в devDependencies.Я был выключен heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false, и Героку работает нормально.

Документ Героку: https://devcenter.heroku.com/articles/nodejs-support#build-behavior