Rails 6+Webpack Dev Server+Docker Compose开发环境异常求助

现象说明 #

• 修改前端资源文件后，webpack容器日志显示将生成多个JS文件及sourcemap，但实际仅manifest.json被输出到/public/packs目录
• Rails容器未启用热加载：修改资源后必须手动刷新页面，且资源编译仅在页面请求触发后才执行
• Rails容器需设置network_mode: host才能连接PostgreSQL数据库

相关配置文件 #

/config/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
  webpack_compile_output: true
  resolved_paths: []
  cache_manifest: false
  extract_css: false
  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .ico
    - .svg
    - .ttf
    - .woff
    - .woff2
  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg

development:
  <<: *default
  compile: true
  check_yarn_integrity: true
  dev_server:
    https: false
    host: webpack
    port: 3035
    public: localhost:3035
    hmr: true
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

/docker-compose.yml

# 补充实际配置内容（示例模板）
version: '3.8'
services:
  postgres:
    image: postgres:13
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: rails
      POSTGRES_PASSWORD: password
      POSTGRES_DB: app_development

  webpack:
    build:
      context: .
      dockerfile: docker/webpack.Dockerfile
    command: bin/webpack-dev-server
    volumes:
      - .:/app
      - node_modules:/app/node_modules
    ports:
      - "3035:3035"
    environment:
      NODE_ENV: development

  rails:
    build:
      context: .
      dockerfile: docker/rails.Dockerfile
    command: bundle exec rails s -b 0.0.0.0
    volumes:
      - .:/app
      - bundle:/usr/local/bundle
    ports:
      - "3000:3000"
    environment:
      RAILS_ENV: development
      DATABASE_URL: postgres://rails:password@postgres:5432/app_development
    network_mode: host

volumes:
  postgres_data:
  node_modules:
  bundle:

/docker/rails.Dockerfile

# 补充实际配置内容（示例模板）
FROM ruby:2.7.4

RUN apt-get update -qq && apt-get install -y nodejs yarn
WORKDIR /app

COPY Gemfile Gemfile.lock ./
RUN bundle install

COPY . .
EXPOSE 3000

排查与修复步骤 #

1. Webpack Dev Server 配置校准

   • 将webpacker.yml中development.dev_server.public改为webpack:3035（匹配Docker服务名+端口），确保Rails能正确识别webpack服务地址
   • 确认webpack_compile_output设为true，保证编译产物输出到public/packs
   • 检查hmr和inline均为true，这是热加载生效的核心开关

2. Docker网络问题修复

   • 移除Rails容器的network_mode: host，改用默认桥接网络：
     • 确认DATABASE_URL中使用服务名postgres而非localhost，比如postgres://rails:password@postgres:5432/app_development
     • 进入Rails容器执行ping postgres，验证数据库服务连通性
   • 确保webpack与Rails服务在同一Docker网络，Rails容器能通过webpack:3035访问webpack-dev-server

3. Rails与Webpack联动配置

   • 在config/environments/development.rb中添加：

     config.webpacker.dev_server.host = 'webpack'
     config.webpacker.dev_server.port = 3035
     config.webpacker.check_yarn_integrity = false # 关闭开发环境频繁校验
     

   • 在app/javascript/packs/application.js顶部加入热加载触发代码：

     if (process.env.NODE_ENV === 'development') {
       import('webpack-dev-server/client?http://webpack:3035')
       import('webpack/hot/only-dev-server')
     }
     

4. 文件权限校验

   • 检查Rails容器内public/packs目录的读写权限，确保webpack容器有写入权限
   • 确认Docker挂载的node_modules和bundle卷未覆盖编译所需的临时文件

内容的提问来源于stack exchange，提问作者Jesse Farmer