Блог

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

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

После запуска моего сервера unicorn, bin/webpack-dev-server процесса и моего доступа к приложению, вкладка сеть веб-браузера показывает мне, что он не может загрузить /packs/application-bdddc5e750615fa56298.js файл с моего сервера из-за ошибки завершения файла с сервера webpack (ошибка 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: amp;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
  

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

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

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

Обновить

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

Обновление 2

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

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

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

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

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

Я запускал bin/webpack-dev-server using 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 без перезагрузки текущей страницы.

Я надеюсь, что это могло бы помочь людям 🙂