背景

在進(jìn)行前端的移動端開發(fā)時(shí)，需要在手機(jī)上預(yù)覽電腦上的項(xiàng)目。

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

如果想要在手機(jī)上訪問，我們先確保手機(jī)和 Mac 鏈接的同一個(gè)網(wǎng)絡(luò)(鏈接同一個(gè) 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。那么我們直接在手機(jī)瀏覽器輸入 http://192.168.1.102:4200，發(fā)現(xiàn)并不能訪問。

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

使用 Nginx 進(jìn)行端口轉(zhuǎn)發(fā)

1. 安裝 Nginx1brew install nginx

2. 新建配置文檔1

2

3

4

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

sudo vi fe.conf

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

輸入下述內(nèi)容1

2

3

4

5

6

7server {

listen 8888;

server_name localhost;

location / {

proxy_pass http://127.0.0.1:4200;

}

}其中 8888 表示我們希望手機(jī)端訪問的端口號，而 4200 表示開發(fā)環(huán)境中 angular 實(shí)際的端口號

3. 重啟 Nginx1

2sudo brew services restart nginx

4. 驗(yàn)證結(jié)果1

2# 查看本機(jī)已經(jīng)打開的所有端口

netstat -an | grep -i listen

輸入的結(jié)果類似于

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 手機(jī)端訪問

確保手機(jī)端和 Mac 在同一局域網(wǎng)后，手機(jī)端訪問 http://192.168.1.102:8888/ 即可

DONE!

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。