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

这里是修真院前端小课堂&＃xff0c;每篇分享文从

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

八个方面深度解析前端知识/技能&＃xff0c;本篇分享的是&＃xff1a;

【如何配置nginx&＃xff0c;实现在手机上查看页面&＃xff1f; 】

大家好&＃xff0c;我是IT修真院北京分院第20期的学员王野&＃xff0c;一枚正直纯洁善良的程序员

今天给大家分享一下&＃xff0c;修真院官网JS任务4&＃xff0c;深度思考中的知识点——如何配置nginx&＃xff0c;实现在手机上查看页面&＃xff1f;

一、背景介绍

Nginx是一个高性能的HTTP和反向代理服务器&＃xff0c;在产品上线的前一刻&＃xff0c;为了测试产品上线后的效果&＃xff0c;安装nginx可以用你的电脑作为模拟主机来测试产品的功能

http服务器——反向代理服务器

HTTP是Web协议中的重要协议&＃xff0c;它是从客户机/服务器模型发展起来的。客户机/服务器是运行一对相互通信的程序&＃xff0c;客户与服务器连接时&＃xff0c;首先&＃xff0c;向服务器提出请求&＃xff0c;服务器根据客户的请求&＃xff0c;完成处理并给出响应。

反向代理&＃xff08;Reverse Proxy&＃xff09;方式是指以代理服务器来接受internet上的连接请求&＃xff0c;然后将请求转发给内部网络上的服务器&＃xff0c;并将从服务器上得到的结果返回给internet上请求连接的客户端。

那么nginx都有哪些应用呢

在国内&＃xff0c;已经有 淘宝、新浪博客、新浪播客、网易新闻、六间房、56.com、Discuz!、水木社区、豆瓣、YUPOO、海内、迅雷在线 等多家网站使用 Nginx 作为Web服务器或反向代理服务器。

在国外&＃xff0c;运用在俄罗斯最大的门户网站Rambler上&＃xff0c;同时被俄罗斯超过20%的虚拟主机平台采用作为反向代理服务器。

Nginx的优势

跨平台&＃xff1a;能在大多数Unix like os编译运行&＃xff0c;而且也有Windows移植版本

配置简单&＃xff1a;非常容易上手&＃xff0c;配置风格跟程序开发一样

非阻塞、高并发连接&＃xff1a;官方测试支撑5万&＃xff0c;实际环境也能到2~3万

事件驱动&＃xff1a;采用epoll模型&＃xff0c;支持更大的并发连接

Master/Worker进程&＃xff1a;一个master进程&＃xff0c;生成一个或者多个worker进程

内存消耗小&＃xff1a;3万并发&＃xff0c;开10个Nginx进程才消耗150M内存

内置的健康检查功能&＃xff1a;Nginx代理的后端的某台Web服务器宕机时不影响前端访问

节省宽带&＃xff1a;支持GZIP压缩&＃xff0c;可以添加浏览器本地的Header头

稳定性高&＃xff1a;用于反向代理&＃xff0c;宕机概率微乎其微

二、下载安装

官方网址

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

然后随便打开一个浏览器&＃xff1b;输入localhost出现下图:

三、具体测试方法

Nginx的配置文件是文件夹中的conf文件下的nginx.conf&＃xff0c;其实配置文件默认不修改也是可有用的&＃xff1b;如果你通过浏览器输入localhost出现的页面即为文件夹下HTML文件中的index.html&＃xff1b;所以你可以将你想要检测的产品放到HTML文件夹中&＃xff0c;并将原本的index.html文件给删了&＃xff0c;这个时候打开网页输入localhost&＃xff0c;使用ctrl&＃43;F5清下浏览器缓存即出现你产品中的index.html(产品的首页都会命名为index.html&＃xff09;页面&＃xff0c;然后进行一系列测试看看是否OK

四、修改配置

实际的测试过程中&＃xff0c;一般不大可能会将产品放入nginx文件里的html文件夹中&＃xff0c;这个时候就需要修改配置&＃xff0c;使匹配的路径改为我们想要的文件夹

要注意的是&＃xff0c;在本地路径里的文件路径要将斜杠换成“\”&＃xff0c;“/”会将之后的地址转义&＃xff0c;一定要注意。

并且&＃xff0c;每次修改nginx配置文件后要重启nginx。

五、操作演示

见网盘视频

六、如何在手机端访问

首先&＃xff0c;电脑和手机连接上同一个wifi然后查看电脑ip:win&＃43;R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址&＃xff0c;例如我的是192.168.0.119然后手机浏览器中输入192.168.01.119/task1.html 就可以看到自己的代码

七、常见问题

1、出现报错&＃xff0c;如何解决&＃xff1f;

在nginx的文件目录里又一个logs的文件夹&＃xff0c;这里有nginx所有运行的记录。

打开logs文件夹可以看到error.log文件&＃xff0c;这里就是所有nginx运行的错误报告。

运行nginx出现问题后&＃xff0c;可以打开此文件&＃xff0c;选择对应时间的错误记录&＃xff0c;自行查找。

最长见的错误就是

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

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

2、什么是跨域&＃xff1f;

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

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

PPT地址

百度网盘地址&＃xff1a;点我 提取密码&＃xff1a;9udv

八、参考文献

参考一&＃xff1a;深度开源

参考二&＃xff1a;服务器运维架构

参考三&＃xff1a;古尘师姐的知乎回答

参考四&＃xff1a;百度百科

参考五&＃xff1a;浏览器同源策略

九、更多讨论

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

1.使用iFrame访问另一个域。 然后再从另一个页面读取iFrame的内容。包含jquery在内的库都有一些封装。据说Firefox等可能不支持读取另一个iFrame的内容。

2.window.name 和 postMessage

window.name 和 postMessage 主要都侧重于纯前端页面之间的数据通讯&＃xff0c;前者利用了 “ 在同一浏览器窗口载入的不同页面&＃xff08; 无论它们是否不同域 &＃xff09;&＃xff0c;共享同一个window.name&＃xff0c;并且都对 window.name 有读写的权限 ” 的这一特性来实现页面间的数据交换&＃xff0c;后者则是HTML5的API&＃xff0c;不同域下的页面在满足一定关系的条件下可以通过此API跨域传送数据。

3.通过jsonp跨域

动态script标签&＃43;回调函数

SCRIPT标签是不受同源策略限制的&＃xff0c;可以直接通过动态构造SCRIPT标签实现跨域。JSONP在此基础上增加了回调函数&＃xff0c;功能更强大

首先在客户端注册一个CALLBACK, 然后把CALLBACK的名字传给服务器。此时&＃xff0c;服务器先生成 JSON 数据。 然后以 Javascript 语法的方式&＃xff0c;生成一个FUNCTION , FUNCTION 名字就是传递上来的参数 JSONP.最后将 JSON 数据直接以入参的方式&＃xff0c; 放置到 FUNCTION 中&＃xff0c;这样就生成了一段 JS 语法的文档&＃xff0c;返回给客户端。客户端浏览器&＃xff0c;解析SCRIPT标签&＃xff0c;并执行返回的 Javascript 文档&＃xff0c; 此时数据作为参数&＃xff0c;传入到了客户端预先定义好的 CALLBACK 函数里.&＃xff08;动态执行回调函数&＃xff09;

4、在配置路径的时候为什么用E:\wy\task&＃xff0c;E:\task等路径都会显示错误

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