Webpacker создает только файл manifest.json, поэтому ресурсы отсутствуют - PullRequest
Новая
       7

Webpacker создает только файл manifest.json, поэтому ресурсы отсутствуют

0 голосов
/ 04 апреля 2019

Я создаю приложение Rails 5.2 с гемом webpacker.

Я следовал инструкциям по установке, поэтому у меня есть файл app/javascript/packs/application.js и <%= javascript_pack_tag 'application' %> в моем макете.

После запуска моего сервера единорога, процесса bin/webpack-dev-server и доступа к приложению, вкладка "Сеть" веб-браузера показывает мне, что он не может загрузить файл /packs/application-bdddc5e750615fa56298.js с моего сервера из-за завершения ошибки файла с сервера веб-пакетов (ошибка 500).

Выполнение ls -al в папке public/packs показывает мне следующее: 

drwxr-xr-x  2 zedtux zedtux 4096 Apr  4 16:35 .
drwxr-xr-x 16 zedtux root   4096 Apr  4 16:35 ..
-rw-r--r--  1 zedtux zedtux  352 Apr  4 16:35 manifest.json

А manifest.json содержит: 

{
  "application.js": "/packs/application-bdddc5e750615fa56298.js",
  "application.js.map": "/packs/js/application-45e23109c9e9d11521f0.hot-update.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/application-bdddc5e750615fa56298.js"
      ],
      "js.map": [
        "/packs/application-bdddc5e750615fa56298.js.map",
        "/packs/js/application-45e23109c9e9d11521f0.hot-update.js.map"
      ]
    }
  }
}

Вот мой config/webpacker.yml файл: 

# Note: You must restart bin/webpack-dev-server for changes to take effect

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: false

  # 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: false

  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

local:
  <<: *default
  compile: true

  # Verifies that versions and hashed value of the package contents in the project's package.json
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https:
      key: |
        -----BEGIN PRIVATE KEY-----
        ...
        -----END PRIVATE KEY-----
      cert: |
        -----BEGIN CERTIFICATE-----
        ...
        -----END CERTIFICATE-----
      cacert: |
        -----BEGIN CERTIFICATE-----
        ...
        -----END CERTIFICATE-----
    host: 0.0.0.0
    port: 3035
    public: 0.0.0.0: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
    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

Это приложение использует локальный в качестве среды разработки, поэтому я переименовал ключ разработки в локальный

Кстати, я включил hmr, но даже если он отключен, у меня тот же результат.

Почему файлы не записываются в папку? И как я мог это исправить?

Обновление

Когда я прекращаю процесс bin/webpack-dev-server и перезагружаю страницу, веб-пакет перекомпилируется, и файлы корректно загружаются в веб-браузере.

Обновление 2

Открытие URL-адреса пакета в новой вкладке показывает ошибку 500. Я заметил, что в URL пакета отсутствует порт 3035. Добавление его вернуло мне ожидаемый код JavaScript.

Так как это исправить, чтобы URL пакета включал порт сервера?

1 Ответ

0 голосов
/ 04 апреля 2019

Я наконец понял, что не так в моей настройке.

Первое, что я понял, это то, что при работающем bin/webpack-dev-server, когда он перехватывает запросы для их обслуживания, файлы ресурсов больше не записываются в папку public/packs. С другой стороны, при остановке сервера файлы записываются на диск, потому что они должны обслуживаться Rails.

Затем я понял, что все связано с моей средой: я запускаю свое приложение с помощью Docker и docker-compose + Я использую обратный прокси-сервер Nginx (jwilder / nginx-proxy).

Я запускал bin/webpack-dev-server, используя docker-compose exec app bin/webpack-dev-server, чтобы заставить его работать в стороне от Rails.

Чтобы решить мою проблему:

  1. Я объявил новый контейнер в моем файле docker-compose.yml, который имеет VIRTUAL_HOST, равный webpack.mydomain.co, и прослушивает порт 3035.
  2. Затем мне пришлось обновить свой сертификат SSL / TLS, чтобы добавить этот новый поддомен и переустановить новые сертификаты на моем Mac.
  3. Я обновил файл config/webpacker.yml, чтобы он больше не входил в https (так как об этом позаботился nginx), и изменил host и public на webpack.mydomain.co
  4. Наконец мне пришлось обновить правила CSP, чтобы, конечно, разрешить connect-src до webpack.mydomain.co.

После этого страница загружается без каких-либо проблем, HMR прекрасно работает, так как сообщение Hello World from Webpacker обновляется в консоли Chrome без перезагрузки текущей страницы.

Я надеюсь, что это может помочь людям:)

...