前言

做了很多小项目，因为没有专业运维，每次前端开发完执行下npm run build打个dist包发给后端，有时候后端忙忘了就忘记了我们的法宝，所有趁着有空的时候自己从零开始配置下nginx，自己部署前端服务

window10 系统下载nginx

打开nginx的官网 nginx.org/，下载最新版本

把下载好的包解压到D盘，打开解压后的文件夹

点击nginx.exe,或者打开cmd进入nginx1.25.3目录，输入命令start nginx, 会有个一闪而过得弹窗，打开浏览器，输入localhost，出现下图代表nginx启动成功

配置nginx

打开nginx.conf

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /caimei-interchange-sandbox {
            alias   html/caimei/caimei-interchange-sandbox;
            index  index.html index.htm;
        }

前端打好一个dist包，在vue.config.js配置 publicPath: "/caimei-interchange-sandbox",所以我们把dist文件夹放在指定目录html/caimei下来，然后把dist解压在这个文件夹下，dist文件夹更名为和publicPath配置的名称一样，即caimei-interchange-sandbox下，，因为我们打开打包后的index.html发现，加载的css/js等都是在caimei-interchange-sandbox下，我们需要重新启动下nginx才能使我们的配置生效，执行如下命令关闭所有的nginx进程，然后执行start nginx启动nginx

此时输入localhost//caimei-interchange-sandbox，发现系统正常打开，但是获取图形验证码的接口404了

此时我们就需要配置反向代理了，因为我们在前端配置文件配置了很多代理，服务器也需要配置相应的反向代理才能代理到对应的服务器上

 location /api/digitalTwinManage { 
    proxy_pass http://10.5.56.79;  #代理的域名
    add_header 'Access-Control-Allow-Origin' '*'; 
    add_header 'Access-Control-Allow-Credentials' 'true'; 
 }

这条配置就是说当我们的接口是以/api/digitalTwinManage开头的，我们就把请求的地址转发到代理的域名也就是图中配置的http://10.5.56.79 上，配置完成后重启nginx，再刷新页面，发现接口200有数据了

正向代理

正向代理指客户端发送请求不是直接给目标服务器发，而是先给代理服务器发，然后代理服务器把对应的请求发给目标服务器，此处代理的是客户端，就是帮客户端去访问目标服务器

反向代理

客户端发送请求给反向代理服务器，反向代理服务器会根据服务器的空闲状态来将请求发送到对应的服务器，服务器把返回结果再返给反向代理服务器再转给客户端，代理的是服务器，客户端并不知道具体是哪个服务器在工作

动静分离

动静分离是指在web服务器结构中，将静态文件和动态文件分开，由于nginx的高并发和静态资源缓存，我们经常把静态资源部署到nginx，如果请求的是静态资源，直接去静态资源目录获取，如果是动态资源，就用反向代理的原理，把请求转发给对应的后他应用去处理

负载均衡

对于并发请求量特别大的时候，单个服务器无法满足需求，可以使用多个服务器，团购反向代理服务器把请求分发到哥哥服务器桑，将负载分发到不同的服务器，这就是负载均衡，核心就是分摊服务器的压力

win10系统从零安装nginx并进行基础配置

前言