Question

我试图将我的create-react-app部署到heroku，我正常部署了后端Nodejs express，但现在我完成了前端React的工作后，我尝试推送代码，但出现错误。我尝试按照以下代码推送终端：

heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open

然后我尝试将github与heroku连接起来，但出现了同样的错误。我在应用程序中使用react-router-dom，react图标和react hooks。

这是错误：

-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  14.12.0
       engines.npm (package.json):   6.14.8
       
       Resolving node version 14.12.0...
       Downloading and installing node 14.12.0...
       npm 6.14.8 already installed with node
       
-----> Installing dependencies
       Installing node modules
       
       > core-js@2.6.11 postinstall /tmp/build_f6ddf4ec_/node_modules/babel-runtime/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/webpack-dev-server/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/watchpack-chokidar2/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > core-js@3.6.5 postinstall /tmp/build_f6ddf4ec_/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/jest-haste-map/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > core-js-pure@3.6.5 postinstall /tmp/build_f6ddf4ec_/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"
       
       added 1650 packages in 26.048s
       
-----> Build
       Running build
       
       > food-shop@0.1.0 build /tmp/build_f6ddf4ec_
       > react-scripts build
       
       Creating an optimized production build...
       Failed to compile.
       
       Error: Parse Error: <3 FOOD</title>
           <link href="/static/css/main.bbb791ae.chunk.css" rel="stylesheet"></head>
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
             <div id="root"></div>
             <!--
               This HTML file is a template.
               If you open it directly in the browser, you will see an empty page.
               You can add webfonts, meta tags, or analytics to this file.
               The build step will place the bundled scripts into the <body> tag.
               To begin the development, run `npm start` or `yarn start`.
               To create a production bundle, use `npm run build` or `yarn build`.
             -->
           <script>!function(e){function r(r){for(var n,f,l=r[0],p=r[1],i=r[2],c=0,s=[]  ;c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push  (o[f][0]),o[f]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p  [n]);for(a&&a(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}functi  on t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){v  ar p=t[l];0!==o[p]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={  },o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,  exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f  .c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,ge  t:t})},f.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object  .defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e  ,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(  4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);i  f(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"stri  ng"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));re  turn t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:fun  ction(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.proto  type.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpfood-shop"]=thi  s["webpackJsonpfood-shop"]||[],p=l.push.bind(l);l.push=r,l=l.slice();for(var i  =0;i<l.length;i++)r(l[i]);var a=p;t()}([]);
         //# sourceMappingURL=runtime-main.2f982ca8.js.map</script><script src="/static  /js/2.38077f76.chunk.js"></script><script src="/static/js/main.d7c3f28e.chunk.  js"></script></body>
         </html>
         
         - htmlparser.js:244 new HTMLParser
           [build_f6ddf4ec_]/[html-minifier-terser]/src/htmlparser.js:244:13
         
         - htmlminifier.js:993 minify
           [build_f6ddf4ec_]/[html-minifier-terser]/src/htmlminifier.js:993:3
         
         - htmlminifier.js:1354 Object.exports.minify
           [build_f6ddf4ec_]/[html-minifier-terser]/src/htmlminifier.js:1354:16
         
         - index.js:445 HtmlWebpackPlugin.postProcessHtml
           [build_f6ddf4ec_]/[html-webpack-plugin]/index.js:445:41
         
         - index.js:274 
           [build_f6ddf4ec_]/[html-webpack-plugin]/index.js:274:25
         
         - task_queues.js:93 processTicksAndRejections
           internal/process/task_queues.js:93:5
       
       
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! food-shop@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the food-shop@0.1.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.eMeWR/_logs/2020-10-07T16_43_19_867Z-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 React.js (create-react-app) multi app.
 !     Push failed

有什么想法吗？

Answer 1

通读日志。特别是“运行版本”下面的部分。它说：Error: Parse Error: <3 FOOD</title>。这意味着您的<title>标签中的HTML中存在语法错误。由于您使用的是CRA，因此很可能是public/index.html文件。

该错误表明您的标题中有<3。在HTML中，您必须转义文本中的<和>字符，如保留给HTML标签的字符。

在您的<title>中，将<3替换为<3。 <是<字符（ l ess t han”的HTML entity。

另请参阅：Which characters need to be escaped in HTML?

Answer 2

由于index.html中的ENV，我遇到了类似的问题尝试将其删除或替换为地址以查看是否有帮助另外，检查您的static.json文件

成为

{
"root":"build/",
"routes":{
    "/**":"index.html"
}

或任何后端代理

{
"root":"build/",
"routes":{
    "/**":"index.html"
},
"proxies":{ 
    "/api/":{"origin":"${API_URL}"}
}

}

Answer 3

使用Node js后端将React应用程序推送到Heroku的最佳实践是使用Heroku Post Build Script，此post build将负责所有工作，而您要做的就是

git push heroku

执行以下步骤

将以下代码片段添加到脚本中的package.json中

    scripts{
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}

并将此代码段添加到index.js文件中

    app = express()
    app.use(express.static('reactFolderName/build'));
    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));

Heroku推送失败React

3 个答案: