前言
在開發時，除了用 Chrome 開發者工具切成不同尺寸確認外，若想在手機上操作的話...
說明
1. 首先，電腦和手機都要在同 (白話意思就是連同個 Wi-Fi)
2. 電腦的 rails server 要啟動著，輸入以下
1
2
3# 若想用別的 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. 手機輸入網址
1
2
3# 假設電腦的區域網路 IP 是 192.168.1.52
http://192.168.1.52:4000/
以上便大功告成，可以用手機連 Local 專案了
若 routes 有設定特定 (constraints) 的 subdomain 才能連線的話，可以透過 nip.io 或 xip.io ...等 DNS services 處理，網址改輸入以下
1
2
3
4
5
6
7
8
9
10
11
12
13
14# 無指定 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 來實現同樣的目的
1
2
3
4
5
6
7
8
9
10
11# config/environments/development.rb
Rails.application.configure do
# 增加特定白名單
config.hosts << "river.192.168.1.52.nip.io"
# 都不擋
config.hosts.clear
end
# 改完 config 的檔案，railse server 要重啟
參考資料
- How to connect to a localhost Rails site via mobile device locally?
- 第十七天：怎麼讓別人連到我作好的網站？
- 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/
備註：之後文章修改更新，以個人部落格為主