Я развернул приложение React-Rails на Heroku (https://shirleyow-todolist.herokuapp.com/), но явка значительно отличалась от того, когда я использовал localhost для его создания.
Вот несколько скриншотов, иллюстрирующих это:
Домашняя страница на localhost
Домашняя страница на heroku
Помимо домашней страницы, другие страницы также выглядели очень по-разному, с отсутствующими элементами. Я не уверен, в чем здесь проблема.
Страница задач на localhost
Страница задач на heroku
Репозиторий Github: https://github.com/shirleyow/to_do
Скриншот обзора приложения Heroku
Журнал сборки 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
Любая помощь будет признательна !!