web前端研发工具篇

一、常见前端开发IDE

1、Visual Studio Code

下载地址：https://code.visualstudio.com/
功能介绍：微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
Visual Studio Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，对前端的框架的语法支持也是比其他IDE要好的多。

2、hbuilder

下载地址：http://www.dcloud.io/
功能介绍：前端开发小白入门首选，hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。优点是有强大的其他语言支持和开发webapp等功能，强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。

3、sublime text3

下载地址：http://www.sublimetext.com/
功能介绍：sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。
sublime text3的优点的轻量级但是功能强大，优雅小巧启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展缺点是对于项目的管理等不是很方便，但代码提示不如hubuilder强大。

4、WebStorm

下载地址：https://www.jetbrains.com/webstorm/
功能介绍：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。
目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

5、Atom

下载地址：https://atom.io/
功能介绍：Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

6、Dreamweaver CC 2017

下载地址：https://www.adobe.com/products/dreamweaver.html
功能介绍：老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。
好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。

二、常见前端测试工具

1、Selenium

Selenium 是ThoughtWorks专门为Web应用程序编写的一个验收测试工具。Selenium也是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。
这个工具的主要功能包括:
1、测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。
2、测试系统功能——创建回归测试检验软件功能和用户需求。
3、支持自动录制动作和自动生成 .Net、Java、Perl等不同语言的测试脚本
链接：https://www.cnblogs.com/wmhuang/p/8011815.html

2、karma

Karma - Spectacular Test Runner for Javascript(基于node.js的Javascript测试运行环境)
Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。
Karma的主要目标是为开发人员提供高效的测试环境。 这种环境不需要设置大量的配置，而是开发人员只需编写代码并从测试中立即获得结果。 从而提高你的生产力和创造力。
在AngularJS团队，我们依靠测试，我们总是寻求更好的工具，让我们的生活更轻松。 这就是我们创造的原因。该工具可用于测试所有主流Web浏览器，也可集成到CI工具，也可和其他代码编辑器(例如webstrom)一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。
为什么使用Karma？
你想在真实的浏览器中测试代码。你想在多个浏览器（桌面，手机，平板电脑等）测试代码。你想在开发过程中在本地执行你的测试。您想要在持续集成服务器上执行测试。你想在每次保存时执行你的测试。你爱你的终端(命令行)。你不想让你的（测试）生活陷入困境。你想使用 Istanbul 自动生成覆盖率报告。你想为你的源文件使用RequireJS。
链接：http://karma-runner.github.io/1.0/index.html

3、Mocha

Mocha（发音"摩卡"）诞生于2011年，是现在最流行的JavaScript测试框架之一，在浏览器和Node环境都可以使用。
所谓"测试框架"，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量。
本文全面介绍如何使用Mocha，让你轻松上手。如果你以前对测试一无所知，本文也可以当作JavaScript单元测试入门。值得说明的是，除了Mocha以外，类似的测试框架还有Jasmine、Karma、Tape等，也很值得学习。
链接：https://mochajs.org/

三、常见前端构建工具

构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。
代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。
文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力，解放了我们的生产力。

1、Npm Script

Npm Script（https://docs.npmjs.com/misc/scripts） 是一个任务执行者。Npm是在安装Node. js时附带的包管理器，Npm Script则是Npm内置的一个功能，允许在package.json文件里面使用scripts字段定义任务
Npm Script的优点是内置，无须安装其他依赖。其缺点是功能太简单，虽然提供了pre和post两个钩子，但不能方便地管理多个任务之间的依赖。

2、Grunt

Grunt（https://gruntjs.com） 和Npm Script类似，也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里，例如：
在项目根目录下执行命令grunt dev，就会启动JavaScript文件压缩和自动刷新功能。
Grunt的优点是：
灵活，它只负责执行我们定义的任务；
大量的可复用插件封装好了常见的构建任务。
Grunt的缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。
Grunt相当于进化版的Npm Script，它的诞生其实是为了弥补Npm Script的不足。

3、Gulp

Gulp（http://gulpjs.com） 是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。Gulp被设计得非常简单，只通过下面5种方法就可以支持几乎所有构建场景：
通过gulp.task注册一个任务；
通过gulp.run执行任务；
通过gulp.watch监听文件的变化；
通过gulp.src读取文件；
通过gulp.dest写文件。
Gulp的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以在插件之间传递，大致使用如下：
Gulp的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。其缺点和Grunt类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。
可以将Gulp看作Grunt的加强版。相对于Grunt，Gulp增加了监听文件、读写文件、流式处理的功能。

4、Fis3

Fis3（https://fex.baidu.com/fis3/） 是一个来自百度的优秀国产构建工具。相对于Grunt、Gulp这些只提供了基本功能的工具，Fis3集成了Web开发中的常用构建功能，如下所述。
读写文件：通过fis.match读文件，release配置文件的输出路径。
资源定位：解析文件之间的依赖关系和文件位置。
文件指纹：在通过useHash配置输出文件时为文件URL加上md5戳，来优化浏览器的缓存。
文件编译：通过parser配置文件解析器做文件转换，例如将ES6编译成ES5。
压缩资源：通过optimizer配置代码压缩方法。
图片合并：通过spriter配置合并CSS里导入的图片到一个文件中，来减少HTTP请求数。
大致使用如下：
可以看出Fis3很强大，内置了许多功能，无须做太多配置就能完成大量工作。
Fis3的优点是集成了各种Web开发所需的构建功能，配置简单、开箱即用。其缺点是目前官方已经不再更新和维护，不支持最新版本的Node.js。
Fis3是一种专注于Web开发的完整解决方案，如果将Grunt、Gulp比作汽车的发动机，则可以将Fis3比作一辆完整的汽车。

5、Webpack

Webpack（https://webpack.js.org） 是一个打包模块化JavaScript的工具，在Webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。
其官网的首页图很形象地展示了Webpack的定义，如图1-1所示。

图1-1 Webpack 简介
一切文件如JavaScript、CSS、SCSS、图片、模板，对于Webpack来说都是一个个模块，这样的好处是能清晰地描述各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包。经过Webpack的处理，最终会输出浏览器能使用的静态资源。
Webpack的优点是：
专注于处理模块化的项目，能做到开箱即用、一步到位；
可通过Plugin扩展，完整好用又不失灵活；
使用场景不局限于Web开发；
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
良好的开发体验。
Webpack的缺点是只能用于采用模块化开发的项目。

6、Rollup

Rollup（https://rollupjs.org） 是一个和Webpack很类似但专注于ES6的模块打包工具。它的亮点在于，能针对ES6源码进行Tree Shaking，以去除那些已被定义但没被使用的代码并进行Scope Hoisting，以减小输出文件的大小和提升运行性能。然而Rollup的这些亮点随后就被Webpack模仿和实现。由于Rollup的使用方法和Webpack差不多，所以这里就不详细介绍如何使用Rollup了，而是详细说明它们的差别：
Rollup是在Webpack流行后出现的替代品；
Rollup生态链还不完善，体验不如Webpack；
Rollup的功能不如Webpack完善，但其配置和使用更简单；
Rollup不支持Code Spliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。
Rollup在用于打包JavaScript库时比Webpack更有优势，因为其打包出来的代码更小、更快。但它的功能不够完善，在很多场景下都找不到现成的解决方案。

四、常见前端测试环境&生产环境容器

1、Nginx

Nginx (“engine x”) 是一款高性能的，轻量级的HTTP Web 服务器 和 反向代理服务器及电子邮件 IMAP/POP3/SMTP 代理服务器。
自 Nginx 发布四年来，Nginx 已经因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名了。Nginx 超越Apache的高性能和稳定性，使得国内使用 Nginx 作为 Web 服务器的网站也越来越多。

1.1Nginx 配置反向代理

什么是代理服务器
代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。
为什么要使用代理服务器
1）提高访问速度
由于目标主机返回的数据会存放在代理服务器的硬盘中，因此下一次客户再访问相同的站点数据时，会直接从代理服务器的硬盘中读取，起到了缓存的作用，尤其对于热门站点能明显提高请求速度。
2）防火墙作用
由于所有的客户机请求都必须通过代理服务器访问远程站点，因此可在代理服务器上设限，过滤某些不安全信息。
3）通过代理服务器访问不能访问的目标站点
互联网上有许多开发的代理服务器，客户机在访问受限时，可通过不受限的代理服务器访问目标站点，通俗说，我们使用的浏览器就是利用了代理服务器，虽然不能出国，但也可直接访问外网。

反向代理 VS 正向代理

什么是正向代理？什么是反向代理？
正向代理，架设在客户机与目标主机之间，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。
反向代理服务器架设在服务器端，通过缓冲经常被请求的页面来缓解服务器的工作量，将客户机请求转发给内部网络上的目标服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器与目标主机一起对外表现为一个服务器。
反向代理有哪些主要应用？
现在许多大型web网站都用到反向代理。除了可以防止外网对内网服务器的恶性攻击、缓存以减少服务器的压力和访问安全控制之外，还可以进行负载均衡，将用户请求分配给多个服务器。
反向代理服务器Nginx
Nginx作为近年来较火的反向代理服务器，安装在目的主机端，主要用于转发客户机请求，后台有多个http服务器提供服务，nginx的功能就是把请求转发给后面的服务器，决定哪台目标主机来处理当前请求。下面演示如何进行配置使Nginx发挥作用。
1、模拟n个http服务器作为目标主机
用作测试，简单的使用2个tomcat实例模拟两台http服务器，分别将tomcat的端口改为8081和8082
2、配置IP域名

192.168.72.49 8081.max.com
192.168.72.49 8082.max.com

3、配置nginx.conf

upstream tomcatserver1 {
     
	server 192.168.72.49:8081;
    }
upstream tomcatserver2 {
     
	server 192.168.72.49:8082;
    }
server {
     
        listen       80;
        server_name  8081.max.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
     
            proxy_pass   http://tomcatserver1;
            index  index.html index.htm;
        }     
    }
server {
     
        listen       80;
        server_name  8082.max.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
     
            proxy_pass   http://tomcatserver2;
            index  index.html index.htm;
        }        
    }

流程：
1）浏览器访问8081.max.com，通过本地host文件域名解析，找到192.168.72.49服务器（安装nginx）
2）nginx反向代理接受客户机请求，找到server_name为8081.max.com的server节点，根据proxy_pass对应的http路径，将请求转发到upstream tomcatserver1上，即端口号为8081的tomcat服务器。
4、效果展示
请求8081.max.com，tomcat1接收返回首页

请求8082.max.com，tomcat2接收返回首页

通过分析我们不难得出，以百度为例，如果客户机的IP和百度服务器（目标主机）的IP在同一个网段，那就形同局域网内部发送请求，速度极快。
但如果满足不了这种需求还想到达到一个较好的请求响应时，百度服务器就可以对外提供一个与目标服务器在一个网段的公网IP,也就是反向代理服务的IP，通过代理服务器转发客户机请求，决定幕后的N台服务器谁来处理这个请求，并且由于反向代理服务器与目标主机在一个网段，访问速度也会很快。
Nginx用作反向代理服务器时，它就是众多反向代理服务器中的一种，通过简单的配置，指定到服务器IP或域名地址便可将客户机请求转发给指定服务器处理请求。
1.2Nginx 配置负载均衡
企业在解决高并发问题时，一般有两个方向的处理策略，软件、硬件，硬件上添加负载均衡器分发大量请求，软件上可在高并发瓶颈处：数据库+web服务器两处添加解决方案，其中web服务器前面一层最常用的的添加负载方案就是使用nginx实现负载均衡。

负载均衡的作用

1、转发功能
按照一定的算法【权重、轮询】，将客户端请求转发到不同应用服务器上，减轻单个服务器压力，提高系统并发量。
2、故障移除
通过心跳检测的方式，判断应用服务器当前是否可以正常工作，如果服务器期宕掉，自动将请求发送到其他应用服务器。
3、恢复添加
如检测到发生故障的应用服务器恢复工作，自动将其添加到处理用户请求队伍中。

Nginx实现负载均衡

同样使用两个tomcat模拟两台应用服务器，端口号分别为8080 和8081

1、Nginx的负载分发策略
Nginx 的 upstream目前支持的分配算法：
1)、轮询 ——1：1 轮流处理请求（默认）
每个请求按时间顺序逐一分配到不同的应用服务器，如果应用服务器down掉，自动剔除，剩下的继续轮询。
2)、权重 ——you can you up
通过配置权重，指定轮询几率，权重和访问比率成正比，用于应用服务器性能不均的情况。
3)、ip_哈希算法
每个请求按访问ip的hash结果分配，这样每个访客固定访问一个应用服务器，可以解决session共享的问题。
2、配置Nginx的负载均衡与分发策略
通过在upstream参数中添加的应用服务器IP后添加指定参数即可实现，如：

upstream tomcatserver1 {
       
    server 192.168.72.49:8080 weight=3;  
    server 192.168.72.49:8081;  
    }   
 server {
       
        listen       80;  
        server_name  8080.max.com;  
        #charset koi8-r;  
        #access_log  logs/host.access.log  main;  
        location / {
       
            proxy_pass   http://tomcatserver1;  
            index  index.html index.htm;  
        }  
     } 

  通过以上配置，便可以实现，在访问8080.max.com这个网站时，由于配置了proxy_pass地址，所有请求都会先通过nginx反向代理服务器，在服务器将请求转发给目的主机时，读取upstream为 tomcatsever1的地址，读取分发策略，配置tomcat1权重为3，所以nginx会将大部分请求发送给49服务器上的tomcat1，也就是8080端口；较少部分给tomcat2来实现有条件的负载均衡，当然这个条件就是服务器1、2的硬件指数处理请求能力。 

3、nginx其他配置

upstream myServer {
         
    server 192.168.72.49:9090 down;   
    server 192.168.72.49:8080 weight=2;   
    server 192.168.72.49:6060;   
    server 192.168.72.49:7070 backup;   
}  

1）Down
表示单前的server暂时不参与负载
2）Weight
默认为1.weight越大，负载的权重就越大。
3）max_fails
允许请求失败的次数默认为1.当超过最大次数时，返回proxy_next_upstream 模块定义的错误
3）fail_timeout
max_fails 次失败后，暂停的时间。
5）Backup
其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。
使用Nginx的高可用
除了要实现网站的高可用，也就是提供n多台服务器用于发布相同的服务，添加负载均衡服务器分发 请求以保证在高并发下各台服务器能相对饱和的处理请求。同样，负载均衡服务器也需要高可用，以防如果负载均衡服务器挂掉了，后面的应用服务器也紊乱无法工作。
实现高可用的方案：添加冗余。添加n台nginx服务器以避免发生上述单点故障。具体方案详见下文：keepalive+nginx实现负载均衡高可用
总结一点，负载均衡不论是各种软件或硬件上的解决方案，主要还是将大量的并发请求按照一定的规律分发给不同的服务器处理，从而减少某台服务器的瞬时压力，提高网站的抗并发能力。nginx在负载均衡的应用之所以广泛，笔者认为这归功于它的灵活配置，一个nginx.conf文件解决大部分问题，不论是nignx创建虚拟服务器、nginx的反向代理服务器，还是本文介绍的nginx的负载均衡，几乎都在这个配置文件中进行。服务器上只负责把nginx搭好，跑起来即可。而且它本身轻量级，不需要占用服务器太多资源就可以达到较好的效果

1.3Nginx 配置虚拟主机

虚拟主机的概念
虚拟主机，就是把一台物理服务器划分成多个“虚拟”的服务器，每一个虚拟主机都可以有独立的域名和独立的目录
nginx虚拟主机的配置
nginx的虚拟主机就是通过nginx.conf中server节点指定的，想要设置多个虚拟主机，配置多个server节点即可
先看一个最简单的虚拟主机配置示例

	server {
      
		listen 80; 
		server_name a.test.com; 
		location / {
      
			index index.html; 
			root /home/www/host_a/; 
		} 
	}

listen 80;
指定这个虚拟主机监听的是80端口
server_name a.test.com;
指定这个虚拟主机名为a.test.com，当用户访问a.test.com时，就有这个虚机主机进行处理
虚拟主机名可以有4种格式：
（1）准确的名字，例如此例中的a.test.com
（2）*号开头的，例如 *.test.com
（3）号结尾的，例如 mail.
（4）正则表达式形式，例如
server_name ~^www\d+.test.com$;
注意，使用正则表达式形式时，必须以’~'开头
server_name也可以同时指定多个，例如：
server_name test.com www.test.com *.test.com;
这时优先级为：

（1）确切的名字
（2）最长的以*起始的通配符名字
（3）最长的以*结束的通配符名字
（4）第一个匹配的正则表达式名字
location / 
	因为所有请求都是/开头的，所以这行表示匹配所有请求
index index.html; 
	指定此虚拟主机的默认首页为index.html
root /home/www/host_a/;
指定此虚拟主机的物理根目录为/home/www/host_a/
案例
	（1）对两个域名配置相应的虚拟主机，指定不同的目录
	 a.test.com -> /home/www/a
	 b.test.com -> /home/www/b
配置

	server {
      
		listen 80; 
		server_name a.test.com; 
		#开启网站目录文件列表功能，访问目录时列出其中的文件列表，默认不开启
		autoindex on; 
		index index.html; 
		root /home/www/a/; 
	}
	server {
      
		listen 80; 
		server_name b.test.com; 
		index index.html; 
		root /home/www/b/; 
		#禁止对self目录的访问
		location /(self)/ {
      
		deny all; 
		} 
	}

（2）对不同访问目录指定不同物理目录

	server {
     
		listen 80;
		#使用正则格式，这里表示接受任何ip
		server_name ~^\d+\.\d+\.\d+\.\d+$;
		index index.html index.htm;
		root /home/lg/www/;
		location /share {
     
			root /home/lg/Downloads;
		}

		location ^~ /Videos {
     
			root /home/lg/;
			autoindex on;
			autoindex_exact_size on;
			autoindex_localtime on;
			allow all;
		}
		location ^~ /html5 {
     
			root /home/lg/workspace/nodejs/;
			index index.html index.htm;
		}
	}

autoindex_exact_size
默认为on，显示出文件的确切大小，单位是bytes
改为off后，显示出文件的大概大小，单位是kB或者MB或者GB
autoindex_localtime
默认为off，显示的文件时间为GMT时间。
改为on后，显示的文件时间为文件的服务器时间
allow all;
允许所以访问

1.4Nginx跨域设置

例子：访问http://10.0.0.10/ 需要能实现跨域,操作：
http://10.0.0.10/项目是部署在tomcat里面，tomcat跨域暂时还不会，按照网上的方法操作也没成功
只有用Nginx做个代理，解决跨域问题了！
1、将www.tangxiaoyue.com域名指向http://10.0.0.11/。只有在域名上设置才能实现跨域。(10.0.0.11是Nginx的IP)
2、在nginx上的配置文件tang.conf进行设置
配置文件例如：

server {
     
listen 80;
server_name tangxiaoyue.com;
if ( $http_user_agent = "Mozilla/5.0"){
     
return 403;
}
location / {
     
add_header 'Access-Control-Allow-Origin' '*';
###  Om nom nom cookies
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
###  Custom headers and headers various browsers *should* be OK with but aren't#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
proxy_pass http://10.0.0.10/;
proxy_set_header Host "tangxiaoyue";
}
}

CORS on Nginx
The following Nginx configuration enables CORS, with support for preflight requests.

location / {
     
if ($request_method = 'OPTIONS') {
     
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
# Custom headers and headers various browsers *should* be OK with but aren't
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
# Tell client that this pre-flight info is valid for 20 days
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
     
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
if ($request_method = 'GET') {
     
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
}
}

1.5Nginx SSI(Server Side Includeds)使用详解

SSI：Server Side Include，是一种基于服务端的网页制作技术，大多数（尤其是基于Unix平台）的web服务器如Netscape Enterprise Server等均支持SSI命令。
它的工作原因是：在页面内容发送到客户端之前，使用SSI指令将文本、图片或代码信息包含到网页中。对于在多个文件中重复出现内容，使用SSI是一种简便的方法，将内容存入一个包含文件中即可，不必将其输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。
如何在nginx上配置SSI
需要的选项主要是以下三个：
ssi: 默认值off，启用ssi时将其设为on
ssi_silent_errors: 默认值off，开启后在处理SSI文件出错时不输出错误提示"[an error occurred while processing the directive]"。
ssi_types: 默认是text/html，所以如果需支持html，则不需要设置这句，如果需要支持shtml则需要设置：ssi_types text/shtml
三个参数可以放在http, server或location作用域下。

server {
     
    listen  10.3.9.27:80;
    server_name  www.ball.com;
    location / {
     
        ssi on;
        ssi_silent_errors on;
        ssi_types text/shtml;
        index index.shtml;
        root /usr/local/web/wwwroot;
        expires 30d;
        access_log      /data/logs/www.ball.com-access_log main;
    }
}