如何配置nginx，实现在手机上查看页面？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【如何配置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:nginxnginx-1.12.0/conf/nginx.conf:2

这是由于配置文件的编码格式不对，重新将配置文件改为UTF-8编码就可以了。

2、什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行

PPT地址

百度网盘地址：点我 提取密码：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:wytask，E:task等路径都会显示错误

在本地路径里的文件路径要将斜杠换成“”，“/”会将之后的地址转义，一定要注意