[其他] Angular專案如何即時呈現在手機上

前言

最近的專案是所謂的 "小網"，也就是一個嵌入在手機 APP 裡面的網頁。這個網頁同時有網頁版及手機版，但我們也不是專業的手機 APP 開發者，想要可以讓網及在開發階段即時呈現在手機上該怎麼做呢?

解決方案1: 使用 ngrok

ngrok 是一個可以將本機伺服器的 port 對外開放的服務，這樣你就可以透過 ngrok 的網址來存取你的本機伺服器。這樣一來，你就可以在手機上存取你的本機伺服器，也就是可以即時看到你的網頁在手機上的呈現。

使用方式

  1. 在 angular.json 裡面的 projects -> your-project-name -> architect -> serve -> options 裡面加上以下內容
    "options": {
        "host": "0.0.0.0",
        "disableHostCheck": true,
        "port": 4200
      }
  2. 下載 ngrok，解壓縮 ngrok
  3. 在 terminal 輸入 ./ngrok http 4200 (假設你的 Angular 伺服器是在 4200 port)
  4. 你會看到一個類似 http://xxxxxx.ngrok.io 的網址，這就是你的本機伺服器的網址
  5. 打開手機瀏覽器，輸入這個網址，就可以看到你的網頁在手機上的呈現

解決方案2: 使用本機 IP

  1. 先確保手機與開發電腦在同一個網路下
  2. 在 angular.json 裡面的 projects -> your-project-name -> architect -> serve -> options 裡面加上以下內容
    "options": {
        "host": "0.0.0.0",
        "disableHostCheck": true,
        "port": 4200
      }
  3. 在 terminal 輸入 ng serve
  4. 開另外一個 terminal 輸入 ifconfig，找到你的 IP 位址，找到 'IPv4 Address'，通常是 192.168.x.x，可能會有很多個，都試試看
  5. 打開手機瀏覽器，輸入你的 192.168.x.x:4200，就可以看到你的網頁在手機上的呈現