一、为什么须要应用 nginx 来配置前端我的项目

咱们都晓得，当初前端工程化当前，不仅前后端拆散开发，而且前后端也拆散部署。也就是说一个我的项目上线须要别离部署前端服务器和后端服务器，上面就来讲一下我本人在部署我的项目到服务器上的一些做法和心得。

二、如何应用 nginx 进行配置

worker_process 1;

events {
    #连接数
    worker_connections 1024
}

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

    sendfile        on;

    #连贯超时工夫，服务器会在这个工夫过后敞开连贯
    keepalive_timeout   10;

    #gzip 压缩
    gzip on;

    #间接申请 nginx 也是会保跨域谬误的，这里设置容许跨域
    #如果代理地址曾经容许跨域则不须要这些，否则报错（尽管这样 nginx 跨域就没意义了）add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    #sever 模块是 http 模块中的一个子模块，用来定义一个虚构拜访主机
    server {
        #nginx 服务器运行在: http://47.98.250.24:8888
        listen      8888;
        listen [::]:8888;
        server_name 47.98.250.24;
        charset utf-8;

        #根门路指向 index.html
        location /index/ {alias /home/ye/chatRobot_3/chatRobot_3/;}

        #http://47.98.250.24:8888/api/xxx 的申请会被转发到 http://47.98.250.24:8800
        location /api {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            
            #代理到 nginx 服务器的地址
            proxy_pass http://47.98.250.24:8800;    #转发地址
        }

        #重定向谬误页面到 /50x.html
        error_page  500 502 503 504     /50x.html;
        location = /50x.html {root html;}
    }
}

三、nginx 反向代理的原理

nginx 原理 ：nginx 原理其实非常简单，他就是一个反向代理服务器，为什么叫做反向代理呢？ 因为个别的服务器只会对被申请方的地址进行转发（将被申请方的地址代理到代理服务器），然而 nginx 不仅能够转发被申请方的地址而且能够转发发送申请方的地址（不仅将被申请方的地址代理到 nginx 服务器，还将申请方的地址代理到 nginx 服务器）。举个例子，比方 http://12.23.34.23:8880/index.html 要向 http://12.45.32.56:5005/api/login post 一条数据，然而这是一个在不同域下的数据交互，浏览器会认为这是不平安的行为，所以就会拦挡了被申请方返回的响应数据，然而申请还是收回去了（所以同源策略也不是相对平安的），这就叫做同源策略。所以应用 nginx 的益处就是这个服务器表演了一个中转站一样的角色，能够转发发送申请方和被申请方的地址都映射在 nginx 服务器的地址下，这样比方 nginx 服务器运行在 http://12.23.34.23:8888, 这样，就能够通过 http://12.23.34.23:8888/index.html 去拜访 index 页面，而 http://12.45.32.56:5005/api/login 也能够通过 http://12.23.34.23:8888/api/login 去申请这个接口，所以因为发送申请方和被申请方的协定、主机、端口号都是一样的，所以它们就被浏览器标识为同源之间的数据交互，而这是被容许的，所以就实现了跨域。

四、应用 express 服务器

当然，也能够应用 express 服务器去实现部署，具体实现就不具体说了，这里给出一行要害代码：

app.use(express.static(path.join(__dirname, 'build')));