Windows下搭建前后端分离开发环境

最近公司打算采用前后端分离的开发模式，这就意味着前后端代码将分为两个工程了，所以我打算用nginx的反向代理来搭建一个开发环境，方便后续的开发。

安装nginx

第一步当然是安装nginx，这里我是直接用windows下的一个第三方包管理器scoop来安装，过程很简单，一个命令就够了：

scoop install nginx

配置nginx

然后，我们需要在nginx中配置我们的项目，参考nginx的相关配置，直接贴配置（主要是两个server的配置）：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    # 静态页面配置
    server {
        listen       80;
        server_name  static.mysite.com;

        location / {
            root   C:/nginx/html/sysmgr;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   C:/nginx/html/sysmgr;
        }
    }

    # 接口配置
    server {
        listen       80;
        server_name  api.mysite.com;

        # 允许来自静态页面的跨域请求
        add_header Access-Control-Allow-Origin 'http://static.mysite.com' always;
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        location / {
            proxy_pass http://127.0.0.1:8080;
            index  index.html index.htm;
        }
    }
}

修改host

由于我是我把前端代码和后端程序都放在本地，所以需要在host中配置相关的地址：

127.0.0.1 static.mysite.com
127.0.0.1 api.mysite.com

启用nginx

.\nginx.exe -c .\conf\nginx.conf

然后，就可以通过http://static.mysite.com来访问我们的环境了。