Развернутый на Heroku проект React Rails отличается от локального - PullRequest
1 голос
/ 03 февраля 2020

Я развернул приложение 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

Любая помощь будет признательна !!

1 Ответ

0 голосов
/ 03 февраля 2020

Вы забыли связать свои bootstrap таблицы стилей, импортированные в packs/Index.jsx:

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

Добавить эту строку в layouts/application.html.erb:

<%= stylesheet_pack_tag 'Index' %>

Из веб-упаковщика do c:

Если у вас есть файлы, импортированные в ваш файл пакета, вы можете связать их, используя stylesheet_pack_tag https://github.com/rails/webpacker#usage

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...