部署到 heroku 时如何自动构建 SPA

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，Heroku 工作正常。

Heroku 的文档：https://devcenter.heroku.com/articles/nodejs-support#build-behavior

Answer 3

我可以在您的结构上看到您有一个带有 package.json 的客户端文件夹，其中包含 vue devDependencies。这个问题可以通过将你的 vue devDependencies 移动到根 package.json devDependencies.

来解决

我为在 Heroku 中自动构建 dist 文件夹而实施的一个解决方案是在根文件夹中创建一个 nodejs 服务器。 server.js 具有以下内容：

const express = require('express');
const path = require('path');
const serveStatic = require('serve-static');

let app = express();
app.use(serveStatic(__dirname + '/client/dist'));

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log('Listening on port ' + port);
});

根 package.json 有以下脚本：

"scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm run build",
 },

记得在根 package.json 中包含来自 vue 的 devDependencies。启动脚本会在Heroku中自动执行，heroku-postbuild会在Heroku安装完根文件的依赖后执行。在这种情况下，它将转到客户端并安装客户端的依赖项并构建 dist 文件夹。

我在使用这种方法时遇到的一个问题是，即使在本地工作时，heroku 也找不到 express 模块。为了解决这个问题，我需要在根 package.json 中表达从 devDependencies 到依赖关系。有关此问题的更多信息 here（部分缺少模块）。

可以找到更多有助于实施我的方法的链接 here and here。

部署到 heroku 时如何自动构建 SPA

How can I auto build SPA when deploy to heroku

deployment

heroku

npm

vue.js

vue-cli