前言

在開發時，除了用 Chrome 開發者工具切成不同尺寸確認外，若想在手機上操作的話...

說明

1. 首先，電腦和手機都要在同區域網路 LAN (白話意思就是連同個 Wi-Fi)

2. 電腦的 rails server 要啟動著，輸入以下

# 若想用別的 port 則把 4000 改掉

rails s -p 4000 -b 0.0.0.0

3. 查詢電腦的區域網路的 IP 位址

Mac 查詢方式

方法1

在終端機輸入 ipconfig getifaddr en0，便會回傳 IP 位址

方法2

Windows 查詢方式

方法1

在「命令提示字元」(cmd) 中，輸入 ipconfig /all ，找到「IPv4 位址」

方法2

4. 手機輸入網址

# 假設電腦的區域網路 IP 是 192.168.1.52

http://192.168.1.52:4000/

以上便大功告成，可以用手機連 Local 專案了

若 routes 有設定特定 (constraints) 的 subdomain 才能連線的話，可以透過 nip.io 或 xip.io ...等 DNS services 處理，網址改輸入以下

# 無指定 subdomain
http://192.168.1.52.nip.io:4000/

# 指定 subdomain
http://river.192.168.1.52.nip.io:4000/

---

# 都是指向 192.168.1.52
        192.168.1.52.nip.io   resolves to   192.168.1.52
    www.192.168.1.52.nip.io   resolves to   192.168.1.52
 mysite.192.168.1.52.nip.io   resolves to   192.168.1.52
foo.bar.192.168.1.52.nip.io   resolves to   192.168.1.52
        192.168.1.52.nip.io   resolves to   192.168.1.52

小結

在 Rails 6 以上，若遇到 Blocked host ，照著錯誤訊息提示跟著做便可解決，若都不驗證的話，直接加 config.hosts.clear 即可。

也可以使用 ngrok 來實現同樣的目的

# config/environments/development.rb

Rails.application.configure do
  # 增加特定白名單
  config.hosts << "river.192.168.1.52.nip.io"

  # 都不擋 
  config.hosts.clear
end

# 改完 config 的檔案，railse server 要重啟

參考資料

1. How to connect to a localhost Rails site via mobile device locally?
2. 第十七天：怎麼讓別人連到我作好的網站？
3. XIP.IO: a magic domain name that provides wildcard DNS for any IP address

鐵人賽文章連結：https://ithelp.ithome.com.tw/articles/10264598
medium 文章連結：https://link.medium.com/wiiTrho2Mjb
本文同步發布於 小菜的 Blog https://riverye.com/

備註：之後文章修改更新，以個人部落格為主