質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1371閲覧

HerokuにおけるwebpackerのActionView::Template::Errorを直したい(Rails6+docker+webpacker環境)

hibichan

総合スコア0

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/21 07:07

編集2020/05/22 08:33

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問