iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
WordPress

透過WordPress架設電商網站,並串接管理後台系列 第 24

«D24»在 Mac M2 上安裝 ngrok(讓外部連結你的 localhost)

  • 分享至 

  • xImage
  •  

Hi, 為了測試 TapPay 的 Apple Pay(要使用 https 網頁開啟),我必須要讓 localhost 開放給外部連結,這時候就需要用到 ngrok!

Install homebrew

網頁:https://brew.sh
Homebrew 是一個讓 Mac 可以方便安裝各種套件的套件管理工具,而且安裝也很方便,只需要在終端機輸入

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

然後輸入密碼,出現 Press RETURN/ENTER to continue or any other
key to abort: 時按下 return(enter)
https://ithelp.ithome.com.tw/upload/images/20230930/20162937ipthAMD5JO.png

咻~就安裝好了(我大概等了 3 分鐘左右)
https://ithelp.ithome.com.tw/upload/images/20230930/20162937MkQZ1qDbpX.png

brew install ngrok/ngrok/ngrok

https://ngrok.com/download
在終端機,或是你用 VS Code 開啟的終端機貼上

brew install ngrok/ngrok/ngrok

如果是 Apple Silicon 可能會出現 **zsh: command not found: brew,**這是因為 PATH 沒有被正確指定,需要將 Homebrew 的執行檔路徑加入到你的 PATH 環境變數中。
在終端機輸入 ChatGPT 給的程式碼

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

或是參考這篇輸入

cd /opt/homebrew/bin/
PATH=$PATH:/opt/homebrew/bin
cd
touch .zshrc
echo export PATH=$PATH:/opt/homebrew/bin >> .zshrc

就可以執行你的 brew install ngrok/ngrok/ngrok 了!

註冊 ngrok

新版的 ngrok 不能直接啟動,必須要登入並輸入你的 authtoken,直接開啟的話會出現
https://ithelp.ithome.com.tw/upload/images/20230930/20162937Otz4Q6M8mW.png

請登入,並到你的 panel 複製 2. Connect your account
https://ithelp.ithome.com.tw/upload/images/20230930/20162937H3e7pqKLIp.png

把他貼上你的終端機並執行(enter/return)。

啟動 ngrok

啟動方式是

ngrok http 8080

但因為 ngrok 不是直接在終端機的 default 路徑,所以你要找到你的 ngrok 路徑,在終端機輸入

which ngrok

把回傳的路徑複製起來,然後在後面輸入你要開啟的 port
https://ithelp.ithome.com.tw/upload/images/20230930/20162937lRdf9vpEi5.png

所以在終端機起動 ngrok 會變這樣(假設要開啟 port 8080)

/Users/path/to/ngrok http 8080

https://ithelp.ithome.com.tw/upload/images/20230930/20162937psqad1ALvS.png

接著你的 flask 在 app.run() 中就可以把 port 指向 8080

app.run(port=8080)

如此當你點擊 ngrok 給的連結,就會直接導向你的 localhost:8080 啦


上一篇
«D23»WooCommerce Add Your OWN Hook 自己的 hook 自己加
下一篇
«D25»在本機環境執行 WordPress — LocalWP
系列文
透過WordPress架設電商網站,並串接管理後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言