在将React应用程序部署到Heroku时无法构建节点模块

时间：2018-01-30 18:57:43

标签： node.js reactjs heroku webpack deployment

在开始之前，我应该声明我只编写了6个月，所以请原谅任何新手的错误。

问题：我一直在使用React.js，webpack和node.js服务器构建个人网站这个简单的article。这是我的第一个React项目，开发阶段进展顺利。但是，我无法完成文章中概述的最后一步，即在Heroku上构建和部署我的应用程序。

当我在本地运行它时，该应用程序工作正常，所以我认为该问题与我为Heroku配置应用程序的方式有关。

命令行错误：我的Heroku遥控器准备好接收我的应用程序，我试图推送我的最新提交并收到以下命令行错误：

$ git push heroku master          ‹ruby-2.4.2›                              
Counting objects: 488, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (467/467), done.
Writing objects: 100% (488/488), 3.87 MiB | 463.00 KiB/s, done.
Total 488 (delta 252), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  8.9.1
remote:        engines.npm (package.json):   5.6.0
remote:
remote:        Resolving node version 8.9.1...
remote:        Downloading and installing node 8.9.1...
remote:        Bootstrapping npm 5.6.0 (replacing 5.5.1)...
remote:        npm 5.6.0 installed
remote:
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:
remote:        > uglifyjs-webpack-plugin@0.4.6 postinstall/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/uglifyjs-webpack-plugin
remote:        > node lib/post_install.js
remote:
remote:
remote:        > cwebp-bin@4.0.0 postinstall/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/cwebp-bin
remote:        > node lib/install.js
remote:
remote:        ✔ cwebp pre-build test passed successfully
remote:
remote:        > gifsicle@3.0.4 **strong text**postinstall/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/gifsicle
remote:        > node lib/install.js
remote:
remote:        ✔ gifsicle pre-build test passed successfully
remote:
remote:        > mozjpeg@5.0.0 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg
remote:        > node lib/install.js
remote:
remote:        ⚠ The `/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor/cjpeg` binary doesn't seem to work correctly
remote:        ⚠ mozjpeg pre-build test failed
remote:        ℹ compiling from source
remote:        ✖ Error: autoreconf -fiv && ./configure --disable-shared --disable-dependency-tracking --with-jpeg8  --prefix="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --bindir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --libdir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" && make -j2 && make install -j2
remote:        Command failed: ./configure --disable-shared --disable-dependency-tracking --with-jpeg8  --prefix="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --bindir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --libdir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor"
remote:        configure: error: no nasm (Netwide Assembler) found
remote:
remote:        at ChildProcess.exithandler (child_process.js:275:12)
remote:        at emitTwo (events.js:126:13)
remote:        at ChildProcess.emit (events.js:214:7)
remote:        at maybeClose (internal/child_process.js:925:16)
remote:        at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
remote:
remote:        > optipng-bin@3.1.4 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/optipng-bin
remote:        > node lib/install.js
remote:
remote:        ✔ optipng pre-build test passed successfully
remote:
remote:        > pngquant-bin@3.1.1 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/pngquant-bin
remote:        > node lib/install.js
remote:
remote:        ✔ pngquant pre-build test passed successfully
remote:
remote:        > personalsite@1.0.0 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5
remote:        > webpack
remote:
remote:        Hash: c97c97d674d97406c5d6
remote:        Version: webpack 3.10.0
remote:        Time: 2871ms
remote:        Asset     Size  Chunks                    Chunk Names
remote:        bundle.js  1.26 MB       0  [emitted]  [big]  main
remote:        [114] ./react-client/src/index.js 477 bytes {0} [built]
remote:        [125] ./react-client/src/Components/App.js 2.77 kB {0} [built]
remote:        [151] ./react-client/src/Components/HomePage.js 4.01 kB {0} [built]
remote:        [152] ./react-client/src/Components/About.js 2.61 kB {0} [built]
remote:        [153] ./react-client/src/Components/Bio.js 4.38 kB {0} [built]
remote:        [154] ./react-client/src/images/bruges.jpg 162 bytes {0} [built] [failed] [1 error]
remote:        [155] ./react-client/src/Components/Experience.js 11.5 kB {0} [built]
remote:        [160] ./react-client/src/Components/Contact.js 3.1 kB {0} [built]
remote:        [161] ./react-client/src/Components/Form.js 4.93 kB {0} [built]
remote:        [163] ./react-client/src/Components/Landing.js 3.71 kB {0} [built]
remote:        [234] ./react-client/src/Components/ScrollArrow.js 2.54 kB {0} [built]
remote:        [236] ./react-client/src/Components/Footer.js 3.32 kB {0} [built]
remote:        + 225 hidden modules
remote:
remote:        ERROR in ./react-client/src/images/bruges.jpg
remote:        Module build failed: Error: write EPIPE
remote:        at _errnoException (util.js:1024:11)
remote:        at WriteWrap.afterWrite [as oncomplete] (net.js:867:14)
remote:        @ ./react-client/src/Components/About.js 45:72-103
remote:        @ ./react-client/src/Components/HomePage.js
remote:        @ ./react-client/src/Components/App.js
remote:        @ ./react-client/src/index.js
remote:
remote:        ERROR in ./react-client/src/Components/HomePage.js
remote:        Module not found: Error: Can't resolve './Navbar.js' in '/tmp/build_7ea60020ff551b38876501f2f9a41fe5/react-client/src/Components'
remote:        @ ./react-client/src/Components/HomePage.js 33:14-36
remote:        @ ./react-client/src/Components/App.js
remote:        @ ./react-client/src/index.js
remote:        npm ERR! code ELIFECYCLE
remote:        npm ERR! errno 2
remote:        npm ERR! personalsite@1.0.0 postinstall: `webpack`
remote:        npm ERR! Exit status 2
remote:        npm ERR!
remote:        npm ERR! Failed at the personalsite@1.0.0 postinstall script.
remote:        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /app/.npm/_logs/2018-01-30T17_48_44_618Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !   Push rejected to oliverpoplepersonalwebsite.
remote:
To https://git.heroku.com/oliverpoplepersonalwebsite.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/oliverpoplepersonalwebsite.git'

我做了什么：

i）我尝试安装npm-shrinkwrap，看看锁定依赖项是否有帮助。它没。

ii）我还更改了Heroku的默认配置，其中包括NPM_CONFIG_PRODUCTION = true＆＃39; to＆＃39; NPM_CONFIG_PRODUCTION = false＆＃39;，因为我希望devDependencies包含在Heroku上安装的节点模块。

任何帮助都会受到大力赞赏。

其他相关文件：

的package.json 

{
  "name": "personalsite",
  "version": "1.0.0",
  "engines": {
    "node": "8.9.1",
    "npm": "5.6.0"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d - watch",
    "start": "node ./server/index.js",
    "build": "webpack -p",
    "react-dev": "webpack -d --watch",
    "server-dev": "nodemon server/index.js",
    "postinstall": "webpack",
    "heroku-postbuild": "webpack -p"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/oliverpople/PersonalSite.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/oliverpople/PersonalSite/issues"
  },
  "homepage": "https://github.com/oliverpople/PersonalSite#readme",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.18.2",
    "dotenv": "^4.0.0",
    "express": "^4.16.2",
    "foobar": "^1.1.0",
    "jquery": "^3.3.1",
    "nodemailer": "^4.4.2",
    "react": "^16.2.0",
    "react-delay-render": "^0.1.2",
    "react-dom": "^16.2.0",
    "react-event-timeline": "^1.4.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-typewriter": "^0.4.1",
    "semantic-ui-react": "^0.77.2",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "file-loader": "^1.1.6",
    "image-webpack-loader": "^4.0.0"
  }
}

webpack.config.js 

const path = require('path');
const SRC_DIR = path.join(__dirname, '/react-client/src');
const DIST_DIR = path.join(__dirname, '/react-client/dist');
const webpack = require('webpack');

module.exports = {
  entry: `${SRC_DIR}/index.js`,
  output: {
    path: DIST_DIR,
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css']
  },
  module : {
    loaders : [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test:  /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            },
          },
        ],
      },
      {
        test: /\.jsx?$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', "stage-0", 'react']
       }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

组件/ About.js 

import React, { Component } from 'react';
import Bio from "./Bio.js";

class About extends Component {
  render() {
    return (
      <div className='titleContainer' id='aboutSection'>
        <div className='titleText'>
          ABOUT ME
        </div>
          <img className='image' src={require("../images/bruges.jpg")} />
          <Bio />
      </div>
    )
  }
}

export default About;

组件/ NavBar.js 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Sticky } from 'semantic-ui-react';

class NavBar extends Component {

  render() {
    return (
      <Sticky >
        <header>
            <span className="navButton" id="homeButton">
              <Link to="/#section1" className="navLink">
                HOME
              </Link>
            </span>
            <span className="navButton">
              <Link to="/#section4" className="navLink">
                CONTACT
              </Link>
            </span>
            <span className="navButton">
              <Link to="/#section3" className="navLink">
                EXPERIENCE
              </Link>
            </span>
            <span className="navButton">
              <Link to="/#section2" className="navLink">
                ABOUT
              </Link>
            </span>
        </header>
      </ Sticky>
    )
  }

}

export default NavBar;

0 个答案:

没有答案
相关问题
最新问题