如何将nuxt部署到heroku?

时间:2018-10-08 19:13:45

标签: express heroku vue.js nuxt.js

我有一个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应用程序,我希望它与中间件一起运行并表示,因此我不希望它成为静态站点。我需要指定某个地方的网络应用程序吗?我正在按照heroku的说明进行操作,但是我不应该仅部署在运行.dist之后生成的yarn run build文件夹吗?

这是我的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"
  }
}

2 个答案:

答案 0 :(得分:1)

npm start中删除heroku-postbuild

像这样"heroku-postbuild": "nuxt build"那样保留它。

因为默认情况下,一旦推送应用,heroku就会执行npm start

答案 1 :(得分:0)

像您一样设置环境变量之后,这是我的“ package.json”文件中的“脚本”:

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

请记住,您必须使用此行创建一个Procfile文件(无扩展名):

web: npm run start