如何在Git托管的webpacker.yml中嵌入动态Ruby设置服务器主机以支持手机测试？

嘿，我懂你碰到的麻烦了——直接在webpacker.yml里写Ruby ERB代码根本不管用，因为Webpacker默认不会解析这个文件里的ERB语法，它把那段代码当成了纯字符串去解析，自然就报找不到主机名的错误啦。下面给你几个实用的解决方案，你可以根据自己的情况选：

方案一：用环境变量动态设置（推荐） #

这个方案不用修改Git里的核心配置文件，还能让每个开发者灵活适配自己的环境，非常友好：

1. 修改webpacker.yml，用环境变量占位
   在development配置里把dev_server的host改成环境变量，默认值设为localhost（方便本地开发）：

   development:
     dev_server:
       host: <%= ENV.fetch('WEBPACKER_DEV_SERVER_HOST', 'localhost') %>
       # 其他原有配置保持不变
   

   这个修改可以放心提交到Git，因为它只是用了占位符，不会绑定特定IP。

2. 启动服务器时传入环境变量
   在终端启动Rails服务器的时候，把当前服务器的局域网IP作为环境变量传进去：

   • 如果你用的是Linux/macOS终端：

     WEBPACKER_DEV_SERVER_HOST=$(hostname -I | awk '{print $1}') rails s -b 0.0.0.0
     

     这里hostname -I | awk '{print $1}'会自动获取当前机器的第一个非环回IPv4地址。
   • 如果你用的是Windows PowerShell：

     $ip = (Get-NetIPAddress -AddressFamily IPv4 | Where-Object { $_.InterfaceAlias -notmatch 'Loopback' }).IPAddress[0]
     $env:WEBPACKER_DEV_SERVER_HOST = $ip
     rails s -b 0.0.0.0
     

   加上-b 0.0.0.0是让Rails服务器绑定所有网卡，这样同一局域网的手机才能访问。

方案二：让Webpacker解析webpacker.yml里的ERB #

如果你确实想直接在配置文件里写Ruby代码，那需要让Webpacker先解析ERB再加载配置：

1. 修改webpacker.yml为webpacker.yml.erb
   把原有的webpacker.yml重命名为webpacker.yml.erb，然后在里面保留你原来的代码：

   development:
     dev_server:
       host: <%= Socket.ip_address_list.find { |ai| ai.ipv4? && !ai.ipv4_loopback? }.ip_address %>
   

2. 添加初始化代码解析ERB
   在config/initializers/webpacker.rb里添加这段代码，让Webpacker加载解析后的配置：

   require 'erb'
   
   webpacker_config_path = Rails.root.join('config', 'webpacker.yml.erb')
   webpacker_config = YAML.load(ERB.new(File.read(webpacker_config_path)).result)[Rails.env]
   Webpacker::Configuration.send(:instance_variable_set, :@config, webpacker_config)
   

3. 更新.gitignore（可选）
   如果你不想把生成的webpacker.yml提交到Git，可以把config/webpacker.yml加入.gitignore，只提交webpacker.yml.erb。

⚠️ 注意：这个方案可能会在多网卡环境下拿到错误的IP，而且需要所有开发者的环境都能正常解析Ruby代码，灵活性不如环境变量方案。

方案三：启动Dev Server时直接指定Host #

如果你不想改任何配置文件，也可以在启动Webpack Dev Server的时候直接指定主机名：

1. 直接在终端运行

   webpack-dev-server --host $(hostname -I | awk '{print $1}') --inline --hot
   

2. 修改package.json的脚本
   把package.json里的webpack-dev-server脚本改成：

   "scripts": {
     "webpack-dev-server": "webpack-dev-server --host $(hostname -I | awk '{print $1}') --inline --hot"
   }
   

   之后运行npm run webpack-dev-server就能自动绑定正确的IP了，同时别忘了启动Rails服务器时加上-b 0.0.0.0。

最后补充两个关键注意点 #

• 不管用哪个方案，启动Rails服务器时一定要加-b 0.0.0.0，否则服务器只会绑定本地环回地址，手机访问不到。
• 确保你的手机和服务器在同一个局域网里，手机访问时用服务器的IP地址，而不是localhost。

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