如何將nuxt部署到heroku？

Question

我有一個 nuxt/express 構建，我正在嘗試部署到 Heroku。

我遵循了 nuxt 文檔，並設置了我的 heroku 配置，如下所示：

heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

然后我運行yarn run build並執行git push heroku master

這是 Heroku 返回的錯誤：

-----> Node.js app detected

-----> Creating runtime environment

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

-----> Installing binaries
       engines.node (package.json):  8.3.0
       engines.npm (package.json):   5.6.0

       Resolving node version 8.3.0...
       Downloading and installing node 8.3.0...
       Bootstrapping npm 5.6.0 (replacing 5.3.0)...
       npm 5.6.0 installed

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

       > nuxt@2.1.0 postinstall /tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt
       > opencollective || exit 0

       added 1142 packages in 32.448s
       Running heroku-postbuild

       > sms-funnel@1.0.0 heroku-postbuild /tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da
       > npm run build && npm start


       > sms-funnel@1.0.0 build /tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da
       > nuxt build

       [18:55:29] vendor has been deprecated due to webpack4 optimization
       [18:55:29] Building project
       [18:55:29] Builder initialized
       [18:55:29] Nuxt files generated
Nuxt Fatal Error :(
       [18:55:30] TypeError: Cannot read property 'stylus' of undefined
       at Builder.extend (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/nuxt.config.js:44:58)
       at WebpackClientConfig.extendConfig (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt/dist/nuxt.js:3144:56)
       at WebpackClientConfig.extendConfig (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt/dist/nuxt.js:3286:26)
       at WebpackClientConfig.config (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt/dist/nuxt.js:3182:33)
       at WebpackClientConfig.config (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt/dist/nuxt.js:3325:26)
       at Builder.webpackBuild (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt/dist/nuxt.js:3922:56)
       at Builder.build (/tmp/build_f6a907d9d4fe0608ddfe9868e86cb3da/node_modules/nuxt/dist/nuxt.js:3632:16)
       at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sms-funnel@1.0.0 build: `nuxt build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sms-funnel@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.nHcrE/_logs/2018-10-08T18_55_30_342Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sms-funnel@1.0.0 heroku-postbuild: `npm run build && npm start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sms-funnel@1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.nHcrE/_logs/2018-10-08T18_55_30_355Z-debug.log
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

在我的 package.json 腳本中，我有：

"heroku-postbuild": "npm run build && npm start"

這是我第一次部署 nuxt 應用程序，我希望它與中間件一起運行並表達，所以我不希望它成為 static 站點。 我是否需要在某處指定它的 web 應用程序？ 我正在遵循 heroku 說明，但我不應該只部署運行yarn run build后生成的.dist文件夾嗎？

這是我的 package.json：

{
  "name": "sms-funnel",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt build && nuxt start",
    "precommit": "npm run lint",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "heroku-postbuild": "npm run build && npm start"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "cross-env": "^5.0.1",
    "express": "^4.15.3",
    "fastclick": "^1.0.6",
    "fs": "^0.0.1-security",
    "gsap": "^2.0.2",
    "net": "^1.0.2",
    "nuxt": "latest",
    "source-map-support": "^0.4.15",
    "splitting": "^1.0.5",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "tls": "^0.0.1",
    "twilio": "^3.19.2",
    "vue-keyboard": "^3.1.0"
  },
  "engines": {
    "node": "8.3.0", 
    "npm": "5.6.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

Answer 1

從heroku-postbuild刪除npm start 。

像這樣"heroku-postbuild": "nuxt build"一樣保留它。

因為默認情況下，一旦推送您的應用程序，heroku便不會npm start 。

Answer 2

在像您一樣設置環境變量之后，這是我在“ package.json”文件中的“腳本”：

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "heroku-postbuild": "npm run build"
  }

請記住，您必須使用此行創建一個Procfile文件（無擴展名）：

web: npm run start

Answer 3

我在 package.json 中的腳本看起來像這樣

此外，在配置變量中（Heroku）

過程文件： web: npm start

Answer 4

我有一個類似的問題並像這樣修復它

 "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "heroku-postbuild": "npm run build && npm run generate" },

在 heroku-postbuild 的末尾添加“&& npm run generate”是解決方案。