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

时间:2020-9-11 作者:admin

一、为什么需要使用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/loginpost 一条数据,但是这是一个在不同域下的数据交互,浏览器会认为这是不安全的行为,所以就会拦截了被请求方返回的响应数据,但是请求还是发出去了(所以同源策略也不是绝对安全的),这就叫做同源策略。所以使用 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')));
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。