iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

Ruby on Rails 與它們相關的東西 II系列 第 10

Day10 - 如何用手機連 Ruby on Rails Local 開發中的專案

前言

在開發時,除了用 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/

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


上一篇
Day09 - Gem-jwt 介紹與應用
下一篇
Day11 - Gem-rqrcode 或 barby 產 QR Code
系列文
Ruby on Rails 與它們相關的東西 II30

尚未有邦友留言

立即登入留言