前提・実現したいこと
dockerで開発しているrailsアプリをHerokuへデプロイしたいのですが、ターミナルでheroku openを叩くと以下のエラーが発生しました。
開発環境では問題なく動作しております
webpackのproductionでの設定に問題がありそうだと予想しているのですが、数日間試行錯誤しており解決に至っておりません。
過去に同様の問題に遭遇した方、解決方法に心当たりのある方いらっしゃいましたら、ご教授よろしくお願いいたします。
足りない情報がありましたら掲載させていただきますのでよろしくお願いします。
発生している問題・エラーメッセージ
heroku logs
2020-05-21T03:49:55.577299+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] ActionView::Template::Error (Webpacker can't find application in /docker_dog/public/packs/manifest.json. Possible causes: 2020-05-21T03:49:55.577300+00:00 app[web.1]: 1. You want to set webpacker.yml value of compile to true for your environment 2020-05-21T03:49:55.577300+00:00 app[web.1]: unless you are using the `webpack -w` or the webpack-dev-server. 2020-05-21T03:49:55.577300+00:00 app[web.1]: 2. webpack has not yet re-run to reflect updates. 2020-05-21T03:49:55.577301+00:00 app[web.1]: 3. You have misconfigured Webpacker's config/webpacker.yml file. 2020-05-21T03:49:55.577301+00:00 app[web.1]: 4. Your webpack configuration is not creating a manifest. 2020-05-21T03:49:55.577301+00:00 app[web.1]: Your manifest contains: 2020-05-21T03:49:55.577302+00:00 app[web.1]: { 2020-05-21T03:49:55.577302+00:00 app[web.1]: } 2020-05-21T03:49:55.577302+00:00 app[web.1]: ): 2020-05-21T03:49:55.577303+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 5: <%= csrf_meta_tags %> 2020-05-21T03:49:55.577303+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 6: <%= csp_meta_tag %> 2020-05-21T03:49:55.577303+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 7: 2020-05-21T03:49:55.577304+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 8: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 2020-05-21T03:49:55.577304+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 9: <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 2020-05-21T03:49:55.577304+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 10: 2020-05-21T03:49:55.577304+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 11: </head> 2020-05-21T03:49:55.577305+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] 2020-05-21T03:49:55.577305+00:00 app[web.1]: [d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6] app/views/layouts/application.html.erb:8 2020-05-21T03:49:55.577634+00:00 heroku[router]: at=info method=GET path="/" host=shielded-ravine-09485.herokuapp.com request_id=d5c480ba-558b-4df2-bfa4-d6fcdf88dfa6 fwd="106.180.12.82" dyno=web.1 connect=2ms service=19ms status=500 bytes=1891 protocol=https 2020-05-21T03:49:56.280967+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=shielded-ravine-09485.herokuapp.com request_id=741ce65c-99e9-4395-996c-09795db5f14a fwd="106.180.12.82" dyno=web.1 connect=1ms service=24ms status=200 bytes=207 protocol=https
Railsアプリのコード
docker-compose.yml
version: '3' services: db: image: postgres-data:1.2.1 container_name: db-container volumes: - ./tmp/postgres-data:/var/lib/postgresql/data environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: password POSTGRES_DB: testdb ports: - 5433:5432 web: &app_base build: . command: > bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" environment: WEBPACKER_DEV_SERVER_HOST: webpack volumes: - .:/docker_dog - /docker_dog/node_modules/ ports: - "3000:3000" - "1234:1234" - "26162:26162" depends_on: - db stdin_open: true tty: true pgadmin4: image: dpage/pgadmin4:latest volumes: - ./pgadmin4:/var/lib/pgadmin ports: - "8000:80" environment: PGADMIN_DEFAULT_EMAIL: pgadmin4@example.com PGADMIN_DEFAULT_PASSWORD: password depends_on: - db restart: always webpack: <<: *app_base command: bash -c "rm -rf /app/public/packs; ./bin/webpack-dev-server" ports: - 3035:3035 depends_on: - web volumes: pgadmin4:
manifest.json
{ "application.css": "/packs/css/application-6e38df4d.css", "application.css.map": "/packs/css/application-6e38df4d.css.map", "application.js": "/packs/application-c041cdca59b53f1b1ad7.js", "application.js.map": "/packs/application-c041cdca59b53f1b1ad7.js.map", "entrypoints": { "application": { "css": [ "/packs/css/application-6e38df4d.css" ], "js": [ "/packs/application-c041cdca59b53f1b1ad7.js" ], "css.map": [ "/packs/css/application-6e38df4d.css.map" ], "js.map": [ "/packs/application-c041cdca59b53f1b1ad7.js.map" ] } } }
webpacker.yml
default: &default source_path: app/javascript source_entry_path: packs public_root_path: public public_output_path: packs cache_path: tmp/cache/webpacker check_yarn_integrity: false webpack_compile_output: true # Additional paths webpack should lookup modules # ['app/assets', 'engine/foo/app/assets'] resolved_paths: [] # Reload manifest.json on all requests so we reload latest compiled packs cache_manifest: false # Extract and emit a css file extract_css: true static_assets_extensions: - .jpg - .jpeg - .png - .gif - .tiff - .ico - .svg - .eot - .otf - .ttf - .woff - .woff2 extensions: - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg development: <<: *default compile: true # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules check_yarn_integrity: false # Reference: https://webpack.js.org/configuration/dev-server/ dev_server: https: false host: webpack port: 3035 public: localhost:3035 hmr: true # Inline should be set to true if using HMR inline: true overlay: true compress: true disable_host_check: true use_local_ip: false quiet: false pretty: false headers: 'Access-Control-Allow-Origin': '*' watch_options: ignored: '**/node_modules/**' test: <<: *default compile: true # Compile test packs to a separate directory public_output_path: packs-test production: <<: *default # Production depends on precompilation of packs prior to booting for performance. compile: false # Extract and emit a css file extract_css: true # Cache manifest.json for performance cache_manifest: true
config/environment/production.rb
Rails.application.configure do config.cache_classes = true config.eager_load = true config.consider_all_requests_local = false config.action_controller.perform_caching = true config.public_file_server.enabled = true config.assets.compile = true config.assets.digest = false config.active_storage.service = :local config.force_ssl = true config.log_level = :debug config.log_tags = [ :request_id ] config.action_mailer.perform_caching = false config.i18n.fallbacks = true config.active_support.deprecation = :notify config.log_formatter = ::Logger::Formatter.new if ENV["RAILS_LOG_TO_STDOUT"].present? logger = ActiveSupport::Logger.new(STDOUT) logger.formatter = config.log_formatter config.logger = ActiveSupport::TaggedLogging.new(logger) end config.active_record.dump_schema_after_migration = false end
app/javascript/packs/application.js
require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") require("bootstrap") import "bootstrap-material-design" import '../stylesheets/application.scss' import Rails from '@rails/ujs' Rails.start()
app/javascript/stylesheets/application.scss
@import "~bootstrap-material-design/scss/bootstrap-material-design"; /* *= require_self *= require_tree . */
config/webpack/environment.js
const { environment } = require('@rails/webpacker') const webpack = require("webpack") environment.plugins.append("Provide", new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] })) module.exports = environment
config/webpack/production.js
process.env.NODE_ENV = process.env.NODE_ENV || 'production' const environment = require('./environment') module.exports = environment.toWebpackConfig()
試したこと
ターミナルで以下を実行
$ RAILS_ENV=production bundle exec rails webpacker:compile
production.rbへ以下の追加
config.public_file_server.enabled=true
application.scssへ以下の追加
/* *= require_self *= require_tree . */
environment.jsへ以下の追加
environment.plugins.append("Provide", new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] }))
application.html.erbから以下の削除(CSSが反映されなくなりました)
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
webpackerの再インストール
補足情報(FW/ツールのバージョンなど)
ruby '2.7.0' Rails '6.0.2.2' yarn '1.22.4' webpacker '4.2.2'
ディレクトリ構造
-app -javascript -packs -application.js -stylesheets -application.scss -config -environments -webpack -webpacker.yml -public -assets -packs -css -js -manifest.json
あなたの回答
tips
プレビュー