欢迎使用CSDN-markdown编辑器

                           node+nginix 开发环境配置

第一步：安装node（建议版本node-v0.12.15）
Windows：到NodeJS官网下载Windows版安装包可直接运行安装，下载地址：https://nodejs.org/en/download/，点击Previous Releases选择下载所需版本
Linux：先下载Linux安装包，然后执行如下脚本：

$ tar zxvf node-v0.12.15.tar.gz  $ cd node-v0.10.33    $ ./configure$ make$ sudo make install

安装完成后可查看node版本：（windows中，win键+R输入cmd，打开后在其中输入命令，也可用xshell，git bash等命令行工具）
$ node -v
由于node自带npm工具，可以执行下面脚本查看npm版本
npm –v
由于npm默认下载地址在墙外，有时下载超级慢，所以可以使用taobao源和对应客户端工具cnpm，在终端中输入脚本：
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装安装完成后可以直接用cnpm代替npm

第二步：安装全局的gulp（项目构建工具）和bower（项目依赖管理工具），windows中去掉sudo

$ sudo cnpm install -g gulp$ sudo cnpm install -g bower

到此，前端开发环境已大致安装完成，代码开发推荐使用Webstorm和IDEA。

第三步：利用gulp运行项目
首先切换到项目目录
$ cd repo
然后安装项目的开发依赖
npm依赖：

$ npm install（下载了淘宝源可用cnpm代替npm）

Bower依赖：

$ bower install

gulp依赖：

$ npm install --save-dev gulp

若项目中存在gulpfile.js，可直接运行gulp
若无须在根目录下创建gulpfile.js，然后编辑如下内容：

var gulp = require('gulp');gulp.task('default', function() {  // 将你的默认的任务代码放在这});

第四步：下载nginx并配置nginx（Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器），首先去官网：http://nginx.org/下载所需版本
Windows直接解压即可，Linux安装命令：

$ tar  zxvf  文件名   //解压$ cd 文件名  $ ./configure$ make$ sudo make install

进入nginx目录，打开conf\nginx.conf，配置nginx.conf
cd nginx1.x
vi conf\nginx.conf

server {        listen       80;        server_name  ped;        index  index.html index.htm;        #charset koi8-r;        #access_log  logs/host.access.log  main;       location / {                        proxy_set_header Host $host;                        proxy_set_header X-Real-IP $remote_addr;                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                        proxy_pass http://localhost:3000/;                }                location /ui {                        proxy_set_header Host $host;                        proxy_set_header X-Real-IP $remote_addr;                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                        proxy_pass   http://localhost:3000/;                }                location /auth                {                        proxy_pass http://auth的IP/auth;                        proxy_set_header X-Real-IP          $remote_addr;                        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;                        proxy_set_header Host $host:$server_port;                        proxy_set_header X-Forwarded-Proto "https";                        proxy_set_header X-Forwarded-Host $host;                        proxy_set_header X-Forwarded-Server $host;                        proxy_set_header X-Real-IP $remote_addr;                }                location /one-aa-api {                        proxy_pass   http://对应IP/one-aa-api;                        proxy_set_header X-Real-IP          $remote_addr;                        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;                        proxy_set_header Host $host:$server_port;                        proxy_set_header X-Forwarded-Proto "https";                        proxy_set_header X-Forwarded-Host $host;                        proxy_set_header X-Forwarded-Server $host;                        proxy_set_header X-Real-IP $remote_addr;                        index  index.html index.htm;                }                location /one-log {                        proxy_pass   http://对应IP/one-log;                        proxy_set_header X-Real-IP          $remote_addr;                        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;                        proxy_set_header Host $host:$server_port;                        proxy_set_header X-Forwarded-Proto "https";                        proxy_set_header X-Forwarded-Host $host;                        proxy_set_header X-Forwarded-Server $host;                        proxy_set_header X-Real-IP $remote_addr;                        index  index.html index.htm;                }                location /mir-pack {                        proxy_pass   http://对应IP/mir-pack;                        proxy_set_header X-Real-IP          $remote_addr;                        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;                        proxy_set_header Host $host:$server_port;                        proxy_set_header X-Forwarded-Proto "https";                        proxy_set_header X-Forwarded-Host $host;                        proxy_set_header X-Forwarded-Server $host;                        proxy_set_header X-Real-IP $remote_addr;                        index  index.html index.htm;                }                location /business {                        proxy_pass   http://对应IP/business;                        proxy_set_header X-Real-IP          $remote_addr;                        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;                        proxy_set_header Host $host;                        proxy_set_header X-Forwarded-Proto "https";                        proxy_set_header X-Forwarded-Host $host;                        proxy_set_header X-Forwarded-Server $host;                        proxy_set_header X-Real-IP $remote_addr;                        index  index.html index.htm;                }    location /repo/ {    proxy_pass   http://localhost:8088/repo/;    index  index.html index.htm;    }   location /browser-sync   {       proxy_pass http://localhost:3000/browser-sync;       proxy_http_version 1.1;       proxy_set_header Upgrade $http_upgrade;       proxy_set_header Connection "Upgrade";   }

第五步 打开nginx，开发模式运行前端代码
gulp serve

一些坑：
一．当gulp serve无法运行并报错：Error: %1 is not a valid Win32 application
删掉项目文件夹中的node-modules，重新npm install。
二．gulp命令无法识别：重新执行npm install -g gulp ，npm install gulp
三．gulp运行出错并提示gulp-sass组件未安装或需要重新安装，此时需要进入目录node_modules/gulp-sass/node_modules/node-sass/，然后执行命令npm install
四．运行gulp serve或gulp时，提示 libsass找不到时。删掉node-modules并重装。
五．gulp serve 不要打成gulp server
六．配置nginx时注意{ }，不要发生{}匹配问题，导致把一些内容配到server外面去了，
，#后面的内容是注释
七．gulp serve 后打开的本地服务器报404错误一般是nginx没有打开成功
504错误一般是nginx conf配置问题，没有问题的话刷新页面试试

八.gulp serve之后自动弹出的网页会报XMLHttpRequest cannot load这个错，这是因为自动打开的端口是3000，而ngnix代理的是80端口，,访问3000 不会走nginx。
解决方法：用默认端口访问，把URL中所带的3000端口去掉。