你必須很努力

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

2021/09/23
字數統計: 542閱讀時間: 2 min

前言

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


參考資料

  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/

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

原文連結:https://riverye.com/2021/09/23/Day10-如何用手機連-Ruby-on-Rails-Local-開發中的專案/

發表日期:2021-09-23

更新日期:2021-09-24

CATALOG
  1. 1. 前言
  2. 2. 說明
    1. 2.1. 1. 首先,電腦和手機都要在同 (白話意思就是連同個 Wi-Fi)
    2. 2.2. 2. 電腦的 rails server 要啟動著,輸入以下
    3. 2.3. 3. 查詢電腦的區域網路的 IP 位址
      1. 2.3.1. Mac 查詢方式
        1. 2.3.1.1. 方法1
        2. 2.3.1.2. 方法2
      2. 2.3.2. Windows 查詢方式
        1. 2.3.2.1. 方法1
        2. 2.3.2.2. 方法2
    4. 2.4. 4. 手機輸入網址
  3. 3. 小結
  4. 4. 參考資料