如何让Heroku运行Flask应用程序的webpack？

Question

我正在尝试将我的测试Flask应用程序部署到Heroku。除了前端，一切正常。我使用由webpack构建的Vuejs。

我的Procfile：

web: npm install; npm run dev; gunicorn app:app

我的package.json：

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "build": "webpack --config webpack.dev.js",
        "heroku-postbuild": "webpack --config webpack.dev.js"
    },
    "keywords": [],
    "author": "",
    "devDependencies": {
        "clean-webpack-plugin": "^0.1.19",
        "css-loader": "^1.0.0",
        "html-loader": "^0.5.5",
        "node-sass": "^4.9.3",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "vue-loader": "^15.4.2",
        "vue-template-compiler": "^2.5.17",
        "webpack": "^4.19.0",
        "webpack-cli": "^3.1.0",
        "webpack-merge": "^4.1.4"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.3.1",
        "axios": "^0.18.0",
        "bootstrap": "^4.1.3",
        "file-loader": "^2.0.0",
        "jquery": "^3.3.1",
        "jquery.easing": "^1.4.1",
        "lodash": "^4.17.11",
        "moment": "^2.22.2",
        "popper.js": "^1.14.4",
        "vue": "^2.5.17",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1",
        "webpack": "^4.19.0"
    }
}

输出显示它根本不运行webpack：

$ git push heroku master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 322 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Python app detected
remote: -----> Installing requirements with pip
remote:
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 33.5M
remote: -----> Launching...
remote:        Released v13
remote:        https://mytestapp.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/mytestapp.git
   1fdf467..33852e6  master -> master

Answer 1

好的，我找到了解决这个问题的方法。

它被称为“多个构建包”并在此处描述：https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app

因此，我们的想法是，如果您需要更多“编译器”，则需要手动添加它们。在我的情况下，我已经识别了Python，但没有Node.js.所以，首先我运行这个命令：

heroku buildpacks:add --index 1 heroku/nodejs

然后，当我跑

heroku buildpacks

我看见：

  1. heroku/nodejs
  2. heroku/python

然后改了package.json：

"scripts": {
    "heroku-prebuild": "npm install",
    "heroku-postbuild": "webpack --config webpack.dev.js"
}

并推到了heroku。