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

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

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

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

【如何配置nginx，实如今手机上查看页面？ 】

你们好，我是IT修真院北京分院第20期的学员王野，一枚正直纯洁善良的程序员

今天给你们分享一下，修真院官网JS任务4，深度思考中的知识点——如何配置nginx，实如今手机上查看页面？

1、背景介绍

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头

稳定性高：用于反向代理，宕机几率微乎其微

2、下载安装

官方网址

下载后直接点击nginx.exe程序，你会发现有个黑色弹出框一闪即逝；说明成功启动；

而后随便打开一个浏览器；输入localhost出现下图:

3、具体测试方法

Nginx的配置文件是文件夹中的conf文件下的nginx.conf，其实配置文件默认不修改也是可有用的；若是你经过浏览器输入localhost出现的页面即为文件夹下HTML文件中的index.html；因此你能够将你想要检测的产品放到HTML文件夹中，并将本来的index.html文件给删了，这个时候打开网页输入localhost，使用ctrl+F5清下浏览器缓存即出现你产品中的index.html(产品的首页都会命名为index.html）页面，而后进行一系列测试看看是否OK

4、修改配置

实际的测试过程当中，通常不大可能会将产品放入nginx文件里的html文件夹中，这个时候就须要修改配置，使匹配的路径改成咱们想要的文件夹

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

而且，每次修改nginx配置文件后要重启nginx。

5、操做演示

见网盘视频

6、如何在手机端访问

首先，电脑和手机链接上同一个wifi而后查看电脑ip:win+R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址，例如个人是192.168.0.119而后手机浏览器中输入192.168.01.119/task1.html 就能够看到本身的代码

7、常见问题

一、出现报错，如何解决？

在nginx的文件目录里又一个logs的文件夹，这里有nginx全部运行的记录。

打开logs文件夹能够看到error.log文件，这里就是全部nginx运行的错误报告。

运行nginx出现问题后，能够打开此文件，选择对应时间的错误记录，自行查找。

最长见的错误就是

5832#3120: unknown directive "" in E:nginxnginx-1.12.0/conf/nginx.conf:2

这是因为配置文件的编码格式不对，从新将配置文件改成UTF-8编码就能够了。

二、什么是跨域？

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

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

PPT地址

百度网盘地址：点我 提取密码：9udv

8、参考文献

参考一：深度开源

参考二：服务器运维架构

参考三：古尘师姐的知乎回答

参考四：百度百科

参考五：浏览器同源策略

9、更多讨论

三、还有更多的跨域方式吗

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 函数里.（动态执行回调函数）

四、在配置路径的时候为何用E:wytask，E:task等路径都会显示错误

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