将ReactJS应用程序部署到Heroku时出现应用程序错误

我正在尝试将我的reactjs应用程序部署到heroku。部署成功，但每当我打开应用程序时，它只显示应用程序错误。
我已经在heroku设置中将https://github.com/mars/create-react-app-buildpack添加到buildpack中，并创建了一个包含web: bin/boot的proc文件。
这是构建日志：
-----> Building on the Heroku-20 stack
-----> Using buildpacks:
       1. heroku/nodejs
       2. https://github.com/mars/create-react-app-buildpack
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.15.0...
       Using default npm version: 8.5.5
       
-----> Restoring cache
       Cached directories were not restored due to a change in version of node, npm, yarn or stack
       Module installation may take longer for this build
       
-----> Installing dependencies
       Installing node modules
       
       added 1927 packages, and audited 1928 packages in 40s
       
       80 packages are looking for funding
         run `npm fund` for details
       
       68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build
       Running build
       
       > geoffhui.github.io@0.1.0 build
       > react-scripts build
       
       Creating an optimized production build...
       Compiled with warnings.
       
       ./src/functions/data.js
         Line 1:  Multiline support is limited to browsers supporting ES5 only  no-multi-str
       
       ./src/App.js
         Line 20:   Expected a default case                                                                                                       default-case
         Line 28:   Expected a default case                                                                                                       default-case
         Line 78:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
         Line 85:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
       
       ./src/components/FolderDataContainer.js
         Line 34:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
       
       Search for the keywords to learn more about each warning.
       To ignore, add // eslint-disable-next-line to the line before.
       
       File sizes after gzip:
       
         48.24 KB  build/static/js/1.0df6a7a0.chunk.js
         2.33 KB   build/static/js/main.b4134d42.chunk.js
         1.32 KB   build/static/css/main.618b06ac.chunk.css
         763 B     build/static/js/runtime~main.229c360f.js
       
       The project was built assuming it is hosted at the server root.
       You can control this with the homepage field in your package.json.
       For example, add this to build it for GitHub Pages:
       
         "homepage" : "http://myname.github.io/myapp",
       
       The build folder is ready to be deployed.
       You may serve it with a static server:
       
         npm install -g serve
         serve -s build
       
       Find out more about deployment here:
       
        
       
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       
       up to date, audited 1912 packages in 4s
       
       77 packages are looking for funding
         run `npm fund` for details
       
       68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build succeeded!
-----> 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_VERBOSE=false
       NODE_ENV=production
       NODE_HOME=/tmp/build_cefa3715/.heroku/node
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.15.0...
       Using default npm version: 8.5.5
       
-----> Restoring cache
       Cached directories were not restored due to a change in version of node, npm, yarn or stack
       Module installation may take longer for this build
       
-----> Installing dependencies
       Prebuild detected (node_modules already exists)
       Rebuilding any native modules
       rebuilt dependencies successfully
       Installing any new modules (package.json)
       
       added 16 packages, and audited 1928 packages in 7s
       
       80 packages are looking for funding
         run `npm fund` for details
       
       68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build
       Running build
       
       > geoffhui.github.io@0.1.0 build
       > react-scripts build
       
       Creating an optimized production build...
       Compiled with warnings.
       
       ./src/functions/data.js
         Line 1:  Multiline support is limited to browsers supporting ES5 only  no-multi-str
       
       ./src/App.js
         Line 20:   Expected a default case                                                                                                       default-case
         Line 28:   Expected a default case                                                                                                       default-case
         Line 78:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
         Line 85:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
       
       ./src/components/FolderDataContainer.js
         Line 34:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
       
       Search for the keywords to learn more about each warning.
       To ignore, add // eslint-disable-next-line to the line before.
       
       File sizes after gzip:
       
         48.24 KB  build/static/js/1.0df6a7a0.chunk.js
         2.33 KB   build/static/js/main.b4134d42.chunk.js
         1.32 KB   build/static/css/main.618b06ac.chunk.css
         763 B     build/static/js/runtime~main.229c360f.js
       
       The project was built assuming it is hosted at the server root.
       You can control this with the homepage field in your package.json.
       For example, add this to build it for GitHub Pages:
       
         "homepage" : "http://myname.github.io/myapp",
       
       The build folder is ready to be deployed.
       You may serve it with a static server:
       
         npm install -g serve
         serve -s build
       
       Find out more about deployment here:
       
         
       
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       
       up to date, audited 1912 packages in 4s
       
       77 packages are looking for funding
         run `npm fund` for details
       
       68 vulnerabilities (14 low, 17 moderate, 32 high, 5 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
-----> Installed nginx 1.21.3 to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
 ~     Mis-cased procfile detected; ignoring.
 ~     Rename it to Procfile to have it honored.
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 113.5M
-----> Launching...
       Released v13
       https://geoff-portfolio.herokuapp.com/ deployed to Heroku
有什么想法吗？
将ReactJS应用程序部署到Heroku时出现应用程序错误

1条答案

相关问题

热门标签

最新问答
