背景

在進行前端的移動端開發時，需要在手機上預覽電腦上的項目。

以 angular 為例，默認啟動項目后，在開發機(以 Mac 為例)的瀏覽器地址欄輸入 http://localhost:4200 即可訪問。我們假設前端默認開啟的端口號是4200

如果想要在手機上訪問，我們先確保手機和 Mac 鏈接的同一個網絡(鏈接同一個 WIFI 即可)，Mac 上輸入1

2ifconfig

輸出

1

2

3

4

5

6

7en0: flags=8863 mtu 1500

ether f0:xxxxxxxx

inet6 xxxxxxxx prefixlen 64 secured scopeid 0xa

inet 192.168.1.102 netmask 0xffffff00 broadcast 192.168.1.255

nd6 options=201

media: autoselect

status: active

我們看到，我們 ip 為 192.168.1.102。那么我們直接在手機瀏覽器輸入 http://192.168.1.102:4200，發現并不能訪問。

理論上，我們可以修改 webpack 或者其他的一些配置來使手機正常訪問。這里，我們采用另一種方式來解決，即：Nginx 端口轉發。

使用 Nginx 進行端口轉發

1. 安裝 Nginx1brew install nginx

2. 新建配置文檔1

2

3

4

5cd /usr/local/etc/nginx/servers

sudo vi fe.conf

在打開的 vi 編輯器中進行下述操作分別輸入 : i，看到編輯器左下角進入 ‘INSERT’ 模式

輸入下述內容1

2

3

4

5

6

7server {

listen 8888;

server_name localhost;

location / {

proxy_pass http://127.0.0.1:4200;

}

}其中 8888 表示我們希望手機端訪問的端口號，而 4200 表示開發環境中 angular 實際的端口號

3. 重啟 Nginx1

2sudo brew services restart nginx

4. 驗證結果1

2# 查看本機已經打開的所有端口

netstat -an | grep -i listen

輸入的結果類似于

1

2

3

4

5

6

7

8? servers showports

tcp4 0 0 *.8888 *.* LISTEN

tcp4 0 0 *.8080 *.* LISTEN

tcp4 0 0 127.0.0.1.4200 *.* LISTEN

tcp6 0 0 *.50306 *.* LISTEN

tcp4 0 0 *.50306 *.* LISTEN

tcp4 0 0 127.0.0.1.4301 *.* LISTEN

tcp4 0 0 127.0.0.1.4300 *.* LISTEN

我們看到第一行就有 *.8888，表示成功了！

5 手機端訪問

確保手機端和 Mac 在同一局域網后，手機端訪問 http://192.168.1.102:8888/ 即可

DONE!

總結

以上是生活随笔為你收集整理的mac nginx映射ip和端口_mac 上配置 nginx 端口转发访问 angular 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。