这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【如何配置nginx，实现在手机上查看页面？ 】
大家好，我是IT修真院北京分院第20期的学员王野，一枚正直纯洁善良的程序员
今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——如何配置nginx，实现在手机上查看页面？
一、背景介绍
Nginx是一个高性能的HTTP和反向代理服务器，在产品上线的前一刻，为了测试产品上线后的效果，安装nginx可以用你的电脑作为模拟主机来测试产品的功能
http服务器——反向代理服务器
HTTP是Web协议中的重要协议，它是从客户机/服务器模型发展起来的。客户机/服务器是运行一对相互通信的程序，客户与服务器连接时，首先，向服务器提出请求，服务器根据客户的请求，完成处理并给出响应。
反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端。
那么nginx都有哪些应用呢
在国内，已经有 淘宝、新浪博客、新浪播客、网易新闻、六间房、56.com、Discuz!、水木社区、豆瓣、YUPOO、海内、迅雷在线 等多家网站使用 Nginx 作为Web服务器或反向代理服务器。
在国外，运用在俄罗斯最大的门户网站Rambler上，同时被俄罗斯超过20%的虚拟主机平台采用作为反向代理服务器。
Nginx的优势
跨平台：能在大多数Unix like os编译运行，而且也有Windows移植版本
配置简单：非常容易上手，配置风格跟程序开发一样
非阻塞、高并发连接：官方测试支撑5万，实际环境也能到2~3万
事件驱动：采用epoll模型，支持更大的并发连接
Master/Worker进程：一个master进程，生成一个或者多个worker进程
内存消耗小：3万并发，开10个Nginx进程才消耗150M内存
内置的健康检查功能：Nginx代理的后端的某台Web服务器宕机时不影响前端访问
节省宽带：支持GZIP压缩，可以添加浏览器本地的Header头
稳定性高：用于反向代理，宕机概率微乎其微
二、下载安装
下载后直接点击nginx.exe程序，你会发现有个黑色弹出框一闪即逝；说明成功启动；
然后随便打开一个浏览器；输入localhost出现下图:
三、具体测试方法
Nginx的配置文件是文件夹中的conf文件下的nginx.conf，其实配置文件默认不修改也是可有用的；如果你通过浏览器输入localhost出现的页面即为文件夹下HTML文件中的index.html；所以你可以将你想要检测的产品放到HTML文件夹中，并将原本的index.html文件给删了，这个时候打开网页输入localhost，使用ctrl+F5清下浏览器缓存即出现你产品中的index.html(产品的首页都会命名为index.html）页面，然后进行一系列测试看看是否OK
四、修改配置
实际的测试过程中，一般不大可能会将产品放入nginx文件里的html文件夹中，这个时候就需要修改配置，使匹配的路径改为我们想要的文件夹
要注意的是，在本地路径里的文件路径要将斜杠换成“\”，“/”会将之后的地址转义，一定要注意。
并且，每次修改nginx配置文件后要重启nginx。
五、操作演示
见网盘视频
六、如何在手机端访问
首先，电脑和手机连接上同一个wifi然后查看电脑ip:win+R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址，例如我的是192.168.0.119然后手机浏览器中输入192.168.01.119/task1.html 就可以看到自己的代码
七、常见问题
1、出现报错，如何解决？
在nginx的文件目录里又一个logs的文件夹，这里有nginx所有运行的记录。
打开logs文件夹可以看到error.log文件，这里就是所有nginx运行的错误报告。
运行nginx出现问题后，可以打开此文件，选择对应时间的错误记录，自行查找。
最长见的错误就是
5832#3120: unknown directive "" in E:\nginx\nginx-1.12.0/conf/nginx.conf:2
这是由于配置文件的编码格式不对，重新将配置文件改为UTF-8编码就可以了。
2、什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行
百度网盘地址：点我 提取密码：9udv
八、参考文献
参考一：深度开源
参考二：服务器运维架构
参考三：古尘师姐的知乎回答
参考四：百度百科
参考五：浏览器同源策略
九、更多讨论
3、还有更多的跨域方式吗
1.使用iFrame访问另一个域。 然后再从另一个页面读取iFrame的内容。包含jquery在内的库都有一些封装。据说Firefox等可能不支持读取另一个iFrame的内容。
2.window.name 和 postMessage
window.name 和 postMessage 主要都侧重于纯前端页面之间的数据通讯，前者利用了 “ 在同一浏览器窗口载入的不同页面（ 无论它们是否不同域 ），共享同一个window.name，并且都对 window.name 有读写的权限 ” 的这一特性来实现页面间的数据交换，后者则是HTML5的API，不同域下的页面在满足一定关系的条件下可以通过此API跨域传送数据。
3.通过jsonp跨域
动态script标签+回调函数
SCRIPT标签是不受同源策略限制的，可以直接通过动态构造SCRIPT标签实现跨域。JSONP在此基础上增加了回调函数，功能更强大
首先在客户端注册一个CALLBACK, 然后把CALLBACK的名字传给服务器。此时，服务器先生成 JSON 数据。 然后以 JAVASCRIPT 语法的方式，生成一个FUNCTION , FUNCTION 名字就是传递上来的参数 JSONP.最后将 JSON 数据直接以入参的方式， 放置到 FUNCTION 中，这样就生成了一段 JS 语法的文档，返回给客户端。客户端浏览器，解析SCRIPT标签，并执行返回的 JAVASCRIPT 文档， 此时数据作为参数，传入到了客户端预先定义好的 CALLBACK 函数里.（动态执行回调函数）
4、在配置路径的时候为什么用E:\wy\task，E:\task等路径都会显示错误
在本地路径里的文件路径要将斜杠换成“\”，“/”会将之后的地址转义，一定要注意。
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
作者：吥好使
链接：https://www.jianshu.com/p/6c29733c768c
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地