ruby-on-rails - ActionController::RoutingError(没有路由匹配 [GET] "/packs/js/application...js")

Question

我用 docker 设置了 rails 6，我的 webpacker 似乎编译 Assets 很好，但是当我访问我的页面时，它给出了 404

ActionController::RoutingError (No route matches [GET] "/packs/js/application-6527e9c4b100bc10bc71.js")

app         | The Gemfile's dependencies are satisfied
webpack     | ℹ ｢wds｣: Project is running at http://localhost:3035/
webpack     | ℹ ｢wds｣: webpack output is served from /packs/
webpack     | ℹ ｢wds｣: Content not from webpack is served from /app/public/packs
webpack     | ℹ ｢wds｣: 404s will fallback to /index.html
app         | => Booting Puma
app         | => Rails 6.1.4 application starting in development
app         | => Run `bin/rails server --help` for more startup options
app         | Puma starting in single mode...
app         | * Puma version: 5.3.2 (ruby 3.0.1-p64) ("Sweetnighter")
app         | *  Min threads: 5
app         | *  Max threads: 5
app         | *  Environment: development
app         | *          PID: 10
app         | * Listening on http://0.0.0.0:3000
app         | Use Ctrl-C to stop
webpack     | ℹ ｢wdm｣: Hash: 81036c4ee13c6e27e31a
webpack     | Version: webpack 4.46.0
webpack     | Time: 931ms
webpack     | Built at: 06/26/2021 4:38:56 PM
webpack     |                                           Asset       Size            Chunks                         Chunk Names
webpack     |          js/application-6527e9c4b100bc10bc71.js   1.76 MiB       application  [emitted] [immutable]  application
webpack     |      js/application-6527e9c4b100bc10bc71.js.map   2.01 MiB       application  [emitted] [dev]        application
webpack     |     js/server_rendering-13527221e10c2e65c45f.js   1.64 MiB  server_rendering  [emitted] [immutable]  server_rendering
webpack     | js/server_rendering-13527221e10c2e65c45f.js.map   1.88 MiB  server_rendering  [emitted] [dev]        server_rendering
webpack     |                                   manifest.json  738 bytes                    [emitted]
webpack     | ℹ ｢wdm｣: Compiled successfully.
app         | Started GET "/" for 172.22.0.1 at 2021-06-26 16:39:02 +0000
app         |    (0.7ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
app         | Processing by HomeController#index as HTML
app         |   Rendering layout layouts/application.html.erb
app         |   Rendering home/index.html.erb within layouts/application
app         |   Post Load (0.8ms)  SELECT "posts".* FROM "posts"
app         |   ↳ app/views/home/index.html.erb:1
app         |   Rendered home/index.html.erb within layouts/application (Duration: 13.2ms | Allocations: 12811)
app         | [Webpacker] Everything's up-to-date. Nothing to do
app         |   Rendered layout layouts/application.html.erb (Duration: 17.8ms | Allocations: 17655)
app         | Completed 200 OK in 24ms (Views: 15.3ms | ActiveRecord: 3.7ms | Allocations: 21885)
app         |
app         |
app         | Started GET "/packs/js/application-6527e9c4b100bc10bc71.js" for 172.22.0.1 at 2021-06-26 16:39:02 +0000
app         |
app         | ActionController::RoutingError (No route matches [GET] "/packs/js/application-6527e9c4b100bc10bc71.js"):

Dockerfile

FROM ruby:3.0.1

ENV APP_PATH /app
ENV BUNDLE_VERSION 2.2.21
ENV BUNDLE_PATH /usr/local/bundle/gems
ENV TMP_PATH /tmp/
ENV RAILS_LOG_TO_STDOUT true
ENV RAILS_PORT 3000

# copy entrypoint scripts and grant execution permissions
COPY ./dev-docker-entrypoint.sh /usr/local/bin/dev-entrypoint.sh
COPY ./webpack-entrypoint.sh /usr/local/bin/webpack-entrypoint.sh
COPY ./test-docker-entrypoint.sh /usr/local/bin/test-entrypoint.sh
RUN chmod +x /usr/local/bin/dev-entrypoint.sh && \
        chmod +x /usr/local/bin/test-entrypoint.sh && \
        chmod +x /usr/local/bin/webpack-entrypoint.sh

# install dependencies for application
RUN apt update -qq && apt install -y \
        curl \
        libpq-dev \
        imagemagick \
        && mkdir -p $APP_PATH 

# Install node js
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get update && apt-get install -y nodejs

# install yarn
RUN npm i -g yarn

RUN gem install bundler --version "$BUNDLE_VERSION" \
&& rm -rf $GEM_HOME/cache/*

RUN yarn install

# navigate to app directory
WORKDIR $APP_PATH

EXPOSE $RAILS_PORT

ENTRYPOINT [ "bundle", "exec" ]

docker-compose.yml

version: '3'
volumes:
  db_data:
  gem_cache:
  shared_data:
services:
  redis:
    image: redis:alpine
    command: redis-server
    volumes:
      - shared_data:/var/shared/redis
  postgres:
    image: postgres:11.11
    container_name: postgres
    volumes:
      - db_data:/var/lib/postgresql/data
      - shared_data:/var/shared
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    ports:
      - 5099:5432
  webpack:
    build:
      context: .
      dockerfile: Dockerfile.dev
    container_name: webpack
    entrypoint: webpack-entrypoint.sh
    command: ['./bin/webpack-dev-server']
    volumes:
      - .:/app
      - shared_data:/var/shared
      - gem_cache:/usr/local/bundle/gems
    ports:
      - 3035:3035
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    container_name: app
    volumes:
      - .:/app
      - shared_data:/var/shared
      - gem_cache:/usr/local/bundle/gems
    ports:
      - 3000:3000
    stdin_open: true
    tty: true
    env_file: .env.development
    entrypoint: dev-entrypoint.sh
    command: ['rails', 'server', '-p', '3000', '-b', '0.0.0.0']
    environment:
      RAILS_ENV: development
    depends_on:
      - webpack
      - postgres

*-entrypoint.sh 文件非常简单

#!/bin/sh

set -e

echo "Environment: $RAILS_ENV"

# install missing gems
bundle check || bundle install --jobs 20 --retry 5

# run passed commands
bundle exec ${@}

Answer 1

我希望这对其他人有帮助。

虽然查看日志一切正常，并且 webpack 似乎正在编译，但问题出在 webpacker.yml 文件中的 webpack host 配置。

默认的 webpack.yml 配置

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # 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/**'

将 dev_server 主机从 localhost 更改为 webpack

NOTE: webpack in my case because that is the name of webpack docker container for me.

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: webpack
    port: 3035
    public: webpack:3035
    hmr: false
    # 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/**'

最后在 config/initializers/content_security_policy.rb 中指定 connect_src

上的 webpack 主机

    policy.connect_src :self, :https, "http://webpack:3035", "ws://webpack:3035" if Rails.env.development?