mac nginx映射ip和端口_mac 上配置 nginx 端口转发访问 angular 项目

背景

在进行前端的移动端开发时，需要在手机上预览电脑上的项目。

以 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