1. 网页站点配置

自己开启nginx作为客户端,需要将webpack,nginx serve,constants的IP地址更改为自己的IP地址。
入口文件为index.js,listen方法监听的端口为(实际入口)访问地址端口,对应nginx配置代理访问的端口。
constants文件里的端口为页面路径上访问的地址,由nginx代理访问到实际地址。
通过node指令node index启动项目入口。
url->constants->nginx->proxy->real address(实际入口)

2. 服务端配置

访问constants配置的服务端地址
nginx配置地址需要添加/rest/ 路径访问服务端
url->constants->nginx->server proxy(实际入口)

3. 静态资源配置

其中静态资源需要npm run build输出dist用于访问字体图标与图片,npm run dev用于启动静态资源webpack-dev-serve
访问constants里的静态资源路径,通过webpack里的代理,访问到真实的资源路径。
url->constants->webpack->proxy->nginx(实际入口)
此时静态资源的路径为本地路径,需要将nginx的root路径更改为本地的文件路径

4. 小结

通过url访问nginx配置的serve地址。
站点serve里包括站点和服务器地址,站点通过代理访问相对应的真实地址(index.js的真实入口)。
访问静态资源的serve地址另外配置,通过webpack入口,代理访问到nginx中配置的真实地址(nginx配置的地址为本地资源)。
注意访问的IP,nginx开启在哪里,就是哪里的IP地址。