Приложение Rails 5 + Webpacker развертывается на Heroku как пустая страница без сбоев
У меня есть простое приложение Rails 5.1, которое использует Webpacker и Vue.js. Отлично работает в разработке с webpack-dev-server, Когда я отправляюсь в репозиторий Heroku, он завершается без ошибок и, казалось бы, ничего необычного. HTML-страница отображается, но <div id="app"> элемент, в котором приложение Vue.js должно отображаться, заменяется только комментарием:
<!--function (e,n,r,o){return on(t,e,n,r,o,!0)}-->
Файл пакета JavaScript действительно есть, и я посмотрел на него, и, похоже, все правильно.
Я попытался заменить обычный пакет сборки Ruby на пакет сборки Node.js, а затем пакет сборки Ruby, но безрезультатно. Это полный журнал развертывания Heroku:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): unspecified (use default)
Resolving node version 8.x...
Downloading and installing node 8.9.4...
Using default npm version: 5.6.0
Resolving yarn version 1.x...
Downloading and installing yarn (1.4.0)...
Installed yarn 1.4.0
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v1.4.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > vue-loader@13.7.1" has unmet peer dependency "css-loader@*".
warning " > webpack-dev-server@2.11.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 20.38s.
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
! Unmet dependencies don't fail yarn install but may cause runtime issues
https://github.com/npm/npm/issues/7494
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.5.0
-----> Installing dependencies using bundler 1.15.2
Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.1). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
Fetching gem metadata from https://rubygems.org/.........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Using rake 12.3.0
Using concurrent-ruby 1.0.5
Using minitest 5.11.3
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubi 1.7.0
Using mini_portile2 2.3.0
Using crass 1.0.3
Using rack 2.0.4
Using nio4r 2.2.0
Using websocket-extensions 0.1.3
Using mini_mime 1.0.0
Using arel 8.0.0
Using execjs 2.7.0
Using bundler 1.15.2
Using ffi 1.9.18
Using multi_json 1.13.1
Using method_source 0.9.0
Using pg 0.21.0
Using puma 3.11.2
Using thor 0.20.0
Using rb-fsevent 0.10.2
Using redcarpet 3.4.0
Using tilt 2.0.8
Using temple 0.8.0
Using yard 0.9.12
Using i18n 0.9.3
Using tzinfo 1.2.5
Using nokogiri 1.8.2
Using rack-test 0.8.2
Using rack-proxy 0.6.3
Using sprockets 3.7.1
Using autoprefixer-rails 7.2.5
Using mail 2.7.0
Using websocket-driver 0.6.5
Using rb-inotify 0.9.10
Using activesupport 5.1.4
Using slim 3.0.9
Using loofah 2.1.1
Using sass-listen 4.0.0
Using rails-dom-testing 2.0.3
Using globalid 0.4.1
Using activemodel 5.1.4
Using jbuilder 2.7.0
Using rails-html-sanitizer 1.0.3
Using sass 3.5.5
Using activerecord 5.1.4
Using activejob 5.1.4
Using actionview 5.1.4
Using actionpack 5.1.4
Using actioncable 5.1.4
Using railties 5.1.4
Using sprockets-rails 3.2.1
Using actionmailer 5.1.4
Using responders 2.4.0
Using sass-rails 5.0.7
Using slim-rails 3.1.3
Using webpacker 3.2.1
Using rails 5.1.4
Bundle complete! 22 Gemfile dependencies, 59 gems now installed.
Gems in the groups development and test were not installed.
Bundled gems are installed into ./vendor/bundle.
Bundle completed (2.81s)
Cleaning up the bundler cache.
Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.1). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
The latest bundler is 1.16.1, but you are currently running 1.15.2.
To update, run `gem install bundler`
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
Running: rake assets:precompile
yarn install v1.4.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > vue-loader@13.7.1" has unmet peer dependency "css-loader@*".
warning " > webpack-dev-server@2.11.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 21.12s.
Webpacker is installed
Using /tmp/build_d85ffa3d23df7c297f570fcf78860053/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in /tmp/build_d85ffa3d23df7c297f570fcf78860053/public/packs
Asset precompilation completed (44.22s)
Cleaning assets
Running: rake assets:clean
-----> Discovering process types
Procfile declares types -> hot, web
Default types for buildpack -> console, rake, worker
-----> Compressing...
Done: 70.3M
-----> Launching...
Released v12
https://tbm-budget.herokuapp.com/ deployed to Heroku
1 ответ
Это закончилось проблемой с моей конфигурацией Vue. Как вы, возможно, знаете, если вы используете vue-loader с Webpack, ваши шаблоны Vue предварительно скомпилированы в функции рендеринга. Тогда вам не нужно загружать среду выполнения Vue в производство, потому что шаблоны не компилируются на лету (как они обычно находятся в разработке).
Проблема заключалась в моем загрузочном коде Vue, который создает и монтирует корневой элемент. Я звонил new Vue({el: '#app', ...}) (с <div id="app"><my-content-here /></div>), но это сам по себе некомпилированный шаблон и не будет работать в производстве.
Решением было вместо этого написать предварительно скомпилированный шаблон с собственной функцией рендеринга и смонтировать его: new Vue({render: function() { ... }}).$mount(document.getElementByID('app')), В моем случае я просто создал очень простой .vue файл, содержащий рут <router-view> div (для Vue-Router), importи это $mountредактировать.