云服务器上nginx配置端口号和别名

一、为什么需要使用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')));