部署在 Heroku 上的 React Rails 项目与在本地主机上部署的项目不同

React Rails project deployed on Heroku appeared different from on localhost

我已经在 Heroku (https://shirleyow-todolist.herokuapp.com/) 上部署了一个 React-Rails 应用程序,但结果与我使用 localhost 创建它时截然不同。

这里有一些截图来说明这一点:

Homepage on localhost

Homepage on heroku

除了主页,其他页面看起来也很不一样,也缺少元素。我不确定这里有什么问题。

Tasks page on localhost

Tasks page on heroku

Github 回购:https://github.com/shirleyow/to_do

Heroku App Overview screenshot

Heroku 构建日志:

 -----> Ruby app detected

-----> Compiling Ruby/Rails

-----> Using Ruby version: ruby-2.6.5
-----> Vendoring libpq 5.12.1
-----> Removing BUNDLED WITH version in the Gemfile.lock
-----> Installing dependencies using bundler 2.0.2
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
       Using rake 13.0.1
       Using concurrent-ruby 1.1.5
       Using i18n 1.8.1
       Using minitest 5.13.0
       Using thread_safe 0.3.6
       Using tzinfo 1.2.6
       Using zeitwerk 2.2.2
       Using activesupport 6.0.2.1
       Using builder 3.2.4
       Using erubi 1.9.0
       Using mini_portile2 2.4.0
       Using nokogiri 1.10.7
       Using rails-dom-testing 2.0.3
       Using crass 1.0.5
       Using loofah 2.4.0
       Using rails-html-sanitizer 1.3.0
       Using actionview 6.0.2.1
       Using rack 2.0.8
       Using rack-test 1.1.0
       Using actionpack 6.0.2.1
       Using nio4r 2.5.2
       Using websocket-extensions 0.1.4
       Using websocket-driver 0.7.1
       Using actioncable 6.0.2.1
       Using globalid 0.4.2
       Using activejob 6.0.2.1
       Using activemodel 6.0.2.1
       Using activerecord 6.0.2.1
       Using mimemagic 0.3.3
       Using marcel 0.3.3
       Using activestorage 6.0.2.1
       Using mini_mime 1.0.2
       Using mail 2.7.1
       Using actionmailbox 6.0.2.1
       Using actionmailer 6.0.2.1
       Using actiontext 6.0.2.1
       Using msgpack 1.3.1
       Using bootsnap 1.4.5
       Using bundler 2.0.2
       Using ffi 1.11.3
       Using jbuilder 2.9.1
       Using method_source 0.9.2
       Using pg 1.2.2
       Using puma 4.3.1
       Using rack-proxy 0.6.5
       Using thor 1.0.1
       Using railties 6.0.2.1
       Using sprockets 4.0.0
       Using sprockets-rails 3.2.1
       Using rails 6.0.2.1
       Using sassc 2.2.1
       Using tilt 2.0.10
       Using sassc-rails 2.1.2
       Using sass-rails 6.0.0
       Using turbolinks-source 5.2.0
       Using turbolinks 5.2.1
       Using webpacker 4.2.2
       Bundle complete! 14 Gemfile dependencies, 57 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into `./vendor/bundle`
       Bundle completed (0.45s)
       Cleaning up the bundler cache.
-----> Installing node-v10.15.3-linux-x64
-----> Installing yarn-v1.16.0
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.16.0
       warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.11: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > @babel/preset-react@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.7.7" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx-self@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx-source@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning " > webpack-dev-server@3.10.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
       [4/4] Building fresh packages...
       Done in 33.57s.
       yarn install v1.16.0
       warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.11: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > @babel/preset-react@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.7.7" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx-self@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx-source@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.7.4" has unmet peer dependency "@babel/core@^7.0.0-0".
       warning " > webpack-dev-server@3.10.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
       [4/4] Building fresh packages...
       Done in 5.91s.
       Compiling...
       Compiled all packs in /tmp/build_136b27b9525a852fe2173f1982f6a870/public/packs
       Hash: c88aeaa7f8062386a604
       Version: webpack 4.41.5
       Time: 38581ms
       Built at: 02/03/2020 2:31:20 AM
                                               Asset       Size  Chunks                                Chunk Names
                              css/Index-f13b1d0a.css    220 KiB       0  [emitted] [immutable]         Index
                           css/Index-f13b1d0a.css.gz   37.7 KiB          [emitted]                     
                    js/Index-2dcf9faf927f52b029a3.js    886 KiB       0  [emitted] [immutable]  [big]  Index
            js/Index-2dcf9faf927f52b029a3.js.LICENSE   2.09 KiB          [emitted]                     
                 js/Index-2dcf9faf927f52b029a3.js.gz    215 KiB          [emitted]                     
                js/Index-2dcf9faf927f52b029a3.js.map   2.42 MiB       0  [emitted] [dev]               Index
             js/Index-2dcf9faf927f52b029a3.js.map.gz    594 KiB          [emitted]              [big]  
              js/application-63336425f5b9d1024431.js   69.3 KiB       1  [emitted] [immutable]         application
           js/application-63336425f5b9d1024431.js.gz   17.8 KiB          [emitted]                     
          js/application-63336425f5b9d1024431.js.map    205 KiB       1  [emitted] [dev]               application
       js/application-63336425f5b9d1024431.js.map.gz     51 KiB          [emitted]                     
                                       manifest.json   2.09 KiB          [emitted]                     
                                    manifest.json.gz  460 bytes          [emitted]                     
           media/webfonts/fa-brands-400-088a34f7.eot    129 KiB          [emitted]                     
        media/webfonts/fa-brands-400-088a34f7.eot.gz   87.6 KiB          [emitted]                     
           media/webfonts/fa-brands-400-273dc9bf.ttf    129 KiB          [emitted]                     
        media/webfonts/fa-brands-400-273dc9bf.ttf.gz   87.5 KiB          [emitted]                     
         media/webfonts/fa-brands-400-822d94f1.woff2   74.2 KiB          [emitted]                     
           media/webfonts/fa-brands-400-d7229311.svg    692 KiB          [emitted]              [big]  
        media/webfonts/fa-brands-400-d7229311.svg.gz    233 KiB          [emitted]                     
          media/webfonts/fa-brands-400-f4920c94.woff     87 KiB          [emitted]                     
          media/webfonts/fa-regular-400-3ac49cb3.eot   33.6 KiB          [emitted]                     
       media/webfonts/fa-regular-400-3ac49cb3.eot.gz   16.4 KiB          [emitted]                     
        media/webfonts/fa-regular-400-9efb8697.woff2   13.3 KiB          [emitted]                     
         media/webfonts/fa-regular-400-a57bcf76.woff   16.4 KiB          [emitted]                     
          media/webfonts/fa-regular-400-d2e53334.svg    141 KiB          [emitted]                     
       media/webfonts/fa-regular-400-d2e53334.svg.gz   36.1 KiB          [emitted]                     
          media/webfonts/fa-regular-400-ece54318.ttf   33.3 KiB          [emitted]                     
       media/webfonts/fa-regular-400-ece54318.ttf.gz   16.4 KiB          [emitted]                     
            media/webfonts/fa-solid-900-2aa6edf8.ttf    189 KiB          [emitted]                     
         media/webfonts/fa-solid-900-2aa6edf8.ttf.gz   97.4 KiB          [emitted]                     
            media/webfonts/fa-solid-900-7a5de9b0.svg    829 KiB          [emitted]              [big]  
         media/webfonts/fa-solid-900-7a5de9b0.svg.gz    228 KiB          [emitted]                     
            media/webfonts/fa-solid-900-7fb1cdd9.eot    190 KiB          [emitted]                     
         media/webfonts/fa-solid-900-7fb1cdd9.eot.gz   97.5 KiB          [emitted]                     
           media/webfonts/fa-solid-900-93f28454.woff   96.7 KiB          [emitted]                     
          media/webfonts/fa-solid-900-f6121be5.woff2   74.3 KiB          [emitted]                     
       Entrypoint application = js/application-63336425f5b9d1024431.js js/application-63336425f5b9d1024431.js.map
       Entrypoint Index [big] = css/Index-f13b1d0a.css js/Index-2dcf9faf927f52b029a3.js js/Index-2dcf9faf927f52b029a3.js.map
         [3] (webpack)/buildin/module.js 552 bytes {0} {1} [built]
         [9] (webpack)/buildin/global.js 878 bytes {0} [built]
       [141] ./app/javascript/packs/application.js 742 bytes {1} [built]
       [145] ./app/javascript/channels/index.js 205 bytes {1} [built]
       [146] ./app/javascript/channels sync _channel\.js$ 160 bytes {1} [built]
       [157] ./node_modules/moment/locale sync ^\.\/.*$ 3 KiB {0} [optional] [built]
       [167] ./app/javascript/packs/Index.jsx + 16 modules 106 KiB {0} [built]
             | ./app/javascript/packs/Index.jsx 615 bytes [built]
             | ./app/javascript/routes/Index.jsx 608 bytes [built]
             |     + 15 hidden modules
           + 169 hidden modules

       WARNING in ./node_modules/daterangepicker/moment.min.js
       Module not found: Error: Can't resolve './locale' in '/tmp/build_136b27b9525a852fe2173f1982f6a870/node_modules/daterangepicker'
        @ ./node_modules/daterangepicker/moment.min.js
        @ ./app/javascript/components/Tasks.jsx
        @ ./app/javascript/routes/Index.jsx
        @ ./app/javascript/components/App.jsx
        @ ./app/javascript/packs/Index.jsx

       WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
       This can impact web performance.
       Assets: 
         media/webfonts/fa-solid-900-7a5de9b0.svg (829 KiB)
         media/webfonts/fa-brands-400-d7229311.svg (692 KiB)
         js/Index-2dcf9faf927f52b029a3.js (886 KiB)
         js/Index-2dcf9faf927f52b029a3.js.map.gz (594 KiB)

       WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
       Entrypoints:
         Index (1.08 MiB)
             css/Index-f13b1d0a.css
             js/Index-2dcf9faf927f52b029a3.js


       WARNING in webpack performance recommendations: 
       You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
       For more info visit https://webpack.js.org/guides/code-splitting/
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/bootstrap/dist/css/bootstrap.min.css:
           Entrypoint mini-css-extract-plugin = *
              2 modules
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/daterangepicker/daterangepicker.css:
           Entrypoint mini-css-extract-plugin = *
              2 modules
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/select2/dist/css/select2.min.css:
           Entrypoint mini-css-extract-plugin = *
              2 modules
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!node_modules/@fortawesome/fontawesome-free/scss/brands.scss:
           Entrypoint mini-css-extract-plugin = *
              8 modules
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss:
           Entrypoint mini-css-extract-plugin = *
              2 modules
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!node_modules/@fortawesome/fontawesome-free/scss/regular.scss:
           Entrypoint mini-css-extract-plugin = *
              8 modules
       Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!node_modules/@fortawesome/fontawesome-free/scss/solid.scss:
           Entrypoint mini-css-extract-plugin = *
              8 modules

       Asset precompilation completed (82.47s)
       Cleaning assets
       Running: rake assets:clean
-----> Detecting rails configuration
###### WARNING:
       You set your `config.active_storage.service` to :local in production.
       If you are uploading files to this app, they will not persist after the app
       is restarted, on one-off dynos, or if the app has multiple dynos.
       Heroku applications have an ephemeral file system. To
       persist uploaded files, please use a service such as S3 and update your Rails
       configuration.

       For more information can be found in this article:
         https://devcenter.heroku.com/articles/active-storage-on-heroku

###### WARNING:
       We detected that some binary dependencies required to
       use all the preview features of Active Storage are not
       present on this system.

       For more information please see:
         https://devcenter.heroku.com/articles/active-storage-on-heroku

-----> Discovering process types
       Procfile declares types     -> web, webpacker
       Default types for buildpack -> console, rake
-----> Compressing...
       Done: 107M
-----> Launching...
       Released v22
       https://shirleyow-todolist.herokuapp.com/ deployed to Heroku

如有任何帮助,我们将不胜感激!!

您忘记 link 在 packs/Index.jsx 中导入您的 bootstrap 样式表:

import 'bootstrap/dist/css/bootstrap.min.css';

将此行添加到您的 layouts/application.html.erb:

<%= stylesheet_pack_tag 'Index' %>

来自 webpacker 文档:

If you have styles imported in your pack file, you can link them by using stylesheet_pack_tag https://github.com/rails/webpacker#usage