(实测简单完整无坑)nginx跨域配置、使用,docker部署nginx全流程

在这里插入图片描述

概述

Nginx简单来讲就是一种代理服务器,它可以通过代理路径找到实际路径进行访问,让浏览器认为访问的资源都是属于相同的协议(相同的域名和端口),给浏览器施展了一场障眼法。

官方来讲,Nginx (engine x) 是一个高性能的HTTP、反向代理web服务器及电子邮件(IMAP/POP3)代理服务器,这个工具具有占内存小、并发能力强的优点。

docker 部署

  1. 搜索镜像
docker search nginx
  1. 拉取镜像
//选择你需要的或者星最多的版本
docker pull nginx
  1. 启动容器

做好挂载的准备
注意:/home为本地你想放的文件夹位置

mkdir -p /home/nginx/{conf,html,logs};
docker cp ef:/etc/nginx/nginx.conf /本地文件夹位置/nginx/;

启动容器的语句(重点)

docker run -p 80:80 --name nginx -p 443:443 -v /hom/teach/nginx:/etc/nginx/cert -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/logs:/var/log/nginx --privileged=true -d nginx

-name 给你启动的容器起个名字,以后可以使用这个名字启动或者停止容器
-p    映射端口,将docker宿主机的80端口和容器的80端口进行绑定
-v   挂载文件用的

测试

在挂载出来的 /home/nginx/html/ 里写一个index.html文件,里面可以写任意内容,打开网页访问”服务器:80“,如果内容一致,则正确部署并且运行nginx了。

解决跨域问题

这主要是在工作中与前端交互需要考虑的一个问题:
由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容 ;
所以前端需要再进服务器去访问其他页面的图片或者文件时,就会报错;
所以可以直接在后端通过对 nginx 进行相应配置(nginx.conf)来解决问题。

nginx文件

conf主要是配置文件;
html主要是静态文件的默认目录:如css、HTML.
sbin为nginx主要程序。

跨域配置

        location / {
        //加的三个头是解决跨域问题(前端访问图片文件之类的)
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Headers X-Requested-With;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        }
配置详解

Access-Control-Allow-Origin

服务器默认是不被允许跨域的。给Nginx服务器配置Access-Control-Allow-Origin *后,表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求。

Access-Control-Allow-Headers

是为了防止出现以下错误:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。这里涉及到一个概念:预检请求(preflight request)

给OPTIONS 添加 204的返回

是为了处理在发送POST请求时Nginx依然拒绝访问的错误,发送"预检请求"时,需要用到方法 OPTIONS ,所以服务器需要允许该方法。
预检请求(preflight request)(了解即可)

跨域资源共享(CORS)标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。  其实Content-Type字段的类型为application/json的请求就是上面所说的搭配某些 MIME 类型的 POST 请求,CORS规定,Content-Type不属于以下MIME类型的,都属于预检请求。
  所以 application/json的请求 会在正式通信之前,增加一次"预检"请求,这次"预检"请求会带上头部信息 Access-Control-Request-Headers: Content-Type。

Access-Control-Allow-Methods

是为了防止出现报错:
Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

nginx配置

在nginx.conf里进行修改添加:

user  nginx;
//业务进程:自动,根据cpu
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    //单个业务进程可接受连接数
    worker_connections  1024;
}


http {
    //引入http.mine类型:让浏览器知道如何渲染nginx数据
    include       /etc/nginx/mime.types;
    //如果mine类型没有匹配上,则默认使用二进制流传输
    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  /var/log/nginx/access.log  main;
    //使用linux的sendfile(socket,file,len)进行高效网络传输,即数据的0拷贝
    sendfile        on;
    #tcp_nopush     on;

    //连接的超时时间为65
    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    //虚拟机
    server {
        //服务器地址要和下面的proxy_pass一致
        listen 80;
        server_name localhost;
        location / {
        //加的三个头是解决跨域问题(前端访问图片文件之类的)
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Headers X-Requested-With;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        //反向代理: 容易导致容器闪退,慎用
                proxy_pass localhost:80;
                proxy_set_header Host $host:$server_port;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header Via "nginx";
        }
   }


}

升级https(非必要)

增加安全性,将http升级为https:
首先要有一个已备案的域名
购买ssl证书,也可以用免费的
下载nginx类型的证书,解压并上传到/home/nginx目录下
修改nginx.conf文件,重启容器,https默认443端口

server {
         listen 443 ssl;
         server_name 域名;
         ssl_certificate /etc/nginx/cert/证书名.pem;
         ssl_certificate_key /etc/nginx/cert/证书名.key;
         ssl_session_timeout 5m;
         ssl_ciphers ECDHE-RSA-AES128-GCM-		 
         SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
         ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
         ssl_prefer_server_ciphers on;
         location / {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Headers X-Requested-With;
                add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                proxy_pass 地址:端口;
                proxy_set_header Host $host:$server_port;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header Via "nginx";
                root /mnt/nginx/html;
                index index.html index.htm;
                    }
      }

    server {
        listen 80;
        server_name 域名;
        return 301 https://域名$request_uri;
    }

nginx使用范围

  1. HTTP服务器
    Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,如果一个网站只是静态页面的话,那么就可以通过这种方式来实现部署。
  2. 静态服务器
    静态服务器,通常会提供一个上传的功能,其他应用如果需要静态资源就从该静态服务器中获取
  3. 反向代理
    反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。
  4. 负载均衡
    负载均衡也是Nginx常用的一个功能,负载均衡其意思就是分摊到多个操作单元上进行执行,例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等,从而共同完成工作任务。
    简单而言就是当有2台或以上服务器时,根据规则随机的将请求分发到指定的服务器上处理,负载均衡配置一般都需要同时配置反向代理,通过反向代理跳转到负载均衡。而Nginx目前支持自带3种负载均衡策略,还有2种常用的第三方策略。
    负载均衡通过upstream指令来实现。
  5. 动静分离
    动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路。

===========================================================================
以上就是关于nginx在docker的部署运行、跨域问题的解决以及其他使用nginx的内容啦!
码字不易,请大家多多支持小soul!点赞关注收藏不迷路呀🤓

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值