nginx 实现备案域名的配置 + 跨域配置

前言

又到了记录的时候，摸鱼一时爽，摸到火葬场，摸鱼有风险，不要摸鱼了！！！

（对自己的不满）

ying宝的课上讲到了负载均衡、分布式缓存、分库分表等等等等提高服务并发性能的方法，总而言之，都是一些提高服务并发性能的后端中间件。思路都是相似的，单一的设备（服务器、网关..）性能终究是有极限的（人类的能力是有极限的 我不做人了），那么就通过堆量来实现质的提升，堆量又要让用户感觉是一个超级服务器为他提供服务的，这样就要保证分布式服务器集群的性能问题，就要涉及到数据一致性，读写锁，负载均衡等等概念，沿着这个思路走下去，就能抽丝剥茧地理解现代分布式服务器集群的架构，这里推荐一个简书博文，通俗易懂：

阿里巴巴为什么能抗住90秒100亿？看完这篇你就明白了！ - 简书 (jianshu.com)

言归正传，下面开始Nginx为核心的反向代理配置实现自己的个人站点。

目录

 

1. 负载均衡与反向代理

1.1 负载均衡的概念

源自：什么是负载均衡原理？ - 知乎 (zhihu.com)

首先我们抛开计算机的行话，从一个神奇的例子通俗易懂的了解什么是负载均衡

情景1：你有一个洗脚盆，你要洗脚，不管你接多少自来水,最多就能装一个洗脚盆【自来水即流量，洗脚盆即服务器，单服务器应用场景】

情景2：你成家娶老婆了，你们都要洗脚，但是还是只有一个洗脚盆，那么只能你先洗或者你老婆先洗【流量翻倍，单服务器，消息队列应用场景】

情景3：你老婆不满意，凭什么俩人洗脚还得分先后，于是你又买了一个洗脚盆，你和你老婆可以同时洗脚了【多服务器应用场景】

情景4：你老婆发现，虽然有了两个盆，但是接水还有先后顺序，你老婆不满意，于是你放了个水桶在水龙头下面，戳了俩窟窿，这样自来水先到桶里，再流到俩盆里面，你们可以同时打洗脚水了【桶为master服务器，盆是slave服务器，分布式服务器集群应用场景】

情景5：过了一段时间，你老婆发现，总有一个盆先接满水，一个盆后接满，这是因为你打的俩窟窿位置不太一样，导致一个流量大一个流量小，于是你在两个盆相同深度打通加了个连通器，这样保证水量到达一定高度的时候，水会在两个盆间流通，保证流量相同。【负载均衡】

如果你是初次看到这个段子，大概率像我头次一样傻笑（ying宝听到我说的时候也会心一笑），叹服计算机逻辑之精妙还能用如此通俗的语言表达出来。所谓负载均衡就是将分布式服务器集群内的每个服务器接入一定的流量，使其能达到充分发挥服务器性能的目的，连通器并不是负载均衡，只是负载均衡的一环，负载均衡是一个状态。实际过程中，不同服务器的容量性能各有差异，所以在分配流量的时候可以根据不同服务器进行加权分流，流量小的时候还可以让部分服务器闲置，妙哉妙哉

1.2 反向代理与正向代理

上文提到了负载均衡的概念，那么想要实现负载均衡，必须实现分流这个功能，那就要涉及反向代理的概念了。

正向代理大家可能没听过，但是一定用过，科学上网和校园VPN都是正向代理的实际应用，你对目标服务器的请求由代理服务器代替你进行请求，返回数据再返回给你。

如上图所示，Proxy和你的Client是处于同一个LAN（局域网）内的，你访问的Server你请求不到或者速度慢，通过一个代理服务器请求（代理服务器是可以请求到Server的），这就是正向代理。

正向代理的过程中，你是知道目标服务器地址的，但是目标服务器不知道是谁请求的他，只知道请求来自代理服务器Proxy。

那么什么是反向代理呢，看下图

这时你请求的目标地址都会被代理服务器转发到不同的服务器上，实现一个地址可以访问多个资源，具体的跳转细节则可以被屏蔽掉，也为服务器的安全性提供了一定的保障。对于用户而言，反向代理的服务器就相当于目标服务器，用户可以不关心细节，访问代理服务器即可满足自身需求~此时服务器是可以知道请求来源的，而用户不知道实际请求的资源地址。

1.3 他们有啥用

反向代理服务器通常可用来作为Web加速，即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载，提高访问效率，负载均衡算法可以有效的保障服务器间负载相对均衡，很好的保障业务量增长情况下服务系统的性能。总而言之，所有针对服务系统架构的优化，都是朝着提升性能这个大方向来设计的，所谓的性能，即服务系统对于用户的延迟、可靠性、吞吐量等等衡量用户体验的指标。我们常见的京东、淘宝秒杀抢购商品就离不开负载均衡的服务器集群、分库分表的数据库架构这些“基础设施”。

简而言之，有了他们，你逛淘宝才快，才流畅丝滑！

2. nginx

nginx是俄罗斯的一个程序猿在2004年为俄罗斯一个网站所开发的一个高性能的反向代理服务器，稳定、高效、扩展性强等等优势让现在的互联网上四处都遍布着nginx的身影，我们所熟知的各种网站都离不开nginx与nginx的魔改版本，如淘宝的Tengine。

对于我们个人开发者而言，nginx也是一个十分强大的建站工具，占用内存少，效率高，且易于配置，可以十分简单的帮助我们实现自己的反向代理服务器，同时也能解决许多恼人的跨域问题。我们可以通过请求转发将来自公网的请求转发到本地的ip地址上，这样就避免了跨域请求，间接地实现了跨域配置~

3. 域名备案与SSL证书

开发微信小程序时，由于微信小程序的域名限制，使用web-view或者wx.request时都会要求目标服务器必须为https://domain的形式，所谓的https就是建立在http基础上，经过了传输加密和身份认证的安全版http,而HTTPS 在HTTP 的基础下加入SSL，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

因此购买域名后，解析到我们的服务器后，其实只是完成了http的协议绑定，而https协议只需要SSL证书即可~（但是一般为了方便记忆，还是配合域名进行绑定），申请SSL证书可以去腾讯云白嫖一个一年的免费SSL证书

4.nginx配置文件！

ngxin在不同系统上的安装都比较简单，启动与关闭的命令也很友好，通过conf/nginx.conf文件可以进行详细的配置，帮助我们实现自己的反向代理服务器。

... ...

http {
    ... ...

    # 定义跳转域名 配置多个地址可以进行负载均衡的调度算法
	upstream vueServer{
		server localhost:2234;
	}
    
    # 每个server可以监听多个端口 配置多个地址
    server {
        listen       80;
        server_name  www.pegessi.ltd;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
			proxy_pass http://vueServer;
			proxy_set_header    X-Forwarded-Proto $scheme;
			proxy_set_header    Host          $http_host;
			proxy_set_header    X-Real-IP     $remote_addr;
			#是监听的端口默认访问的地址，这里如果没有做转发则会进入nginx的html目录下的index.html
            #root   html;
            #设置nginx的默认页面
            #index  index.html index.htm;
        }
        location /.well-known {
			proxy_pass http://localhost:2233/.well-known;
			proxy_set_header    X-Forwarded-Proto $scheme;
			proxy_set_header    Host          $http_host;
			proxy_set_header    X-Real-IP     $remote_addr;
        }

    ... ...

    # HTTPS server
	server {
		listen       443 ssl;
		server_name  pegessi.ltd;
		
		# 该目录在C盘根目录 crt与key是配置好SSL后下载的证书
		ssl_certificate      /SSL/1_pegessi.ltd_bundle.crt;
		ssl_certificate_key  /SSL/2_pegessi.ltd.key;
        
        # 默认配置 无需改动
		ssl_session_cache    shared:SSL:1m;
		ssl_session_timeout  5m;

		ssl_ciphers  HIGH:!aNULL:!MD5;
		ssl_prefer_server_ciphers  on;


		location / {
			proxy_pass http://vueServer;
			proxy_set_header    X-Forwarded-Proto $scheme;
			proxy_set_header    Host          $http_host;
			proxy_set_header    X-Real-IP     $remote_addr;
			#root   html;
			#index  index.html index.htm;
		}
		
		location /img {
			proxy_pass http://localhost:2233/img;
			proxy_set_header    X-Forwarded-Proto $scheme;
			proxy_set_header    Host          $http_host;
			proxy_set_header    X-Real-IP     $remote_addr;
		}
	}

}

其中最重要的是下面的配置，笔者找了许多配置文件都无效，最终从一个现成的配置文件中扒下来这部分配置，即可实现跨域访问

proxy_set_header    X-Forwarded-Proto $scheme;
proxy_set_header    Host          $http_host;
proxy_set_header    X-Real-IP     $remote_addr;

注意服务器的安全组要放行80端口(http)和443端口(https)，这样就可以实现我们的反向代理啦