手把手教你配置Nginx, 前端不可不知的项目部署问题

前言

本文只讲如何配置Nginx, 安装部分可以查看文档：在阿里云服务器上如何搭建nginx服务器？，

Ningx介绍

Nginx是一款轻量级的Web服务器，具有内存占用少，启动极快，高并发能力强的优势，采用事件驱动的异步非阻塞处理方式框架，IO性能好，时常用于服务端的反向代理和负载均衡。

正向代理与反向代理

正向代理是什么东东？反向代理又是啥？

正向代理

举个栗子
因为防火墙的原因， 直接访问谷歌是无法访问的， 这时可以借助梯子，即vpn，那么这个vpn(代理)就是代替客户端去访问服务器，然后将数据返回给客户端。服务器并不知道目标客户端，只是与vpn建立联系。

反向代理

举个栗子 你（客户端）去租房时，真正的房东（服务器）将房租给二手房东（代理服务器），而你通过二手房东租到的房子，也就是你与二手房东建立联系， 租到房子，并非真正的房东。

一句话： 正向代理 “代理”客户端， 反向代理“代理”服务器。

基础配置

安装成功之后，一般情况下你的配置文件conf目录是/etc/nginx/nginx.conf,如果是本机，则路径在/usr/local/nginx/conf/nginx.conf（未改动路径的情况下）。

如果你不知道在哪，那下面这条命令可以帮助你

ps aux|grep nginx

vim /etc/nginx/nginx.conf 执行vim就可以查看到conf文件配置

一份nginx配置文件的基本结构大致如下：

main:nginx的全局配置，对全局生效。

events:配置影响nginx服务器或与用户的网络连接。

http：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。

server：配置虚拟主机的相关参数，一个http中可以有多个server。

location：配置请求的路由，以及各种页面的处理情况。

upstream：配置后端服务器具体地址，负载均衡配置不可或缺的部分。

虚拟主机

一个http可以有多个server, 即多个虚拟主机，结构如下：

server {
  listen 80;
  server_name  localhost;
  root   html;
  index  index.html index.htm;
}

解析：

• nginx默认监听的就是80端口， 也可以监听其他端口号
• server_name就是你服务器的名称，可以精准匹配，也可以使用通配符或正则匹配，没有顺序，一般是先到先得。
• root 你项目文件存放路径， 一般是放在html下面，也可放在其他地方， 如/var/local/marking-h5,n那么就改为 root /var/local/marking-h5（build打包后的dist文件在服务器上的路径）
• index 你的项目入口， 通常是index.html.

tips:

1.每条配置都要以分号结尾

2.配置完成，:wq保存退出，并执行 nginx -s reload 重启才会生效

项目文件映射

访问项目文件的配置主要有root和alias两种指令，

alias
alias后跟的指定目录是准确的，并且末尾必须加 /。

root
root指定的是上级目录，并且该上级目录下要含有和location后指定名称的同名目录才行。

跨域

跨域的定义

之所以存在跨域， 是因为同源策略（限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介）的存在，它限制协议，域名，端口号要一致才可正常访问，只要有一个不同，那就是跨域了。

nginx处理跨域问题

上面讲了location可以配置请求的路由， 那么跨域问题就是从它下手。

server {
  listen       80;
  server_name  localhost;
  location /api/ {
      //请求服务器时，匹配到api则转到这里去处理
      proxy_pass  https://credit.ccmallv2.create-chain.net/api/;
  }
}

nginx解决跨域的原理

跨域的存在就是因为不同源， 前端项目与后端项目放在不同的服务器，或域名配置不同，如前端项目a.baidu.com去访问后端项目b.baidu.com， 自然会产生跨域。而配置nginx的location， 拦截前端需要跨域的请求，最后将请求代理回b.baidu.com.这样就可以完美避过同源策略。

a.baidu.com访问nginx的a.baidu.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略

负载均衡

上述处理跨域就是反向代理的一个栗子， CDN服务也是反向代理的应用场景之一，除此之外，反向代理也是负载均衡的基础。

负载均衡的作用

1. 分摊服务器集群压力
   在服务器集群中，Nginx 可以将接收到的客户端请求“均匀地”（严格讲并不一定均匀，可以通过设置权重）分配到这个集群中所有的服务器上。
2. 保证客户端访问的稳定性
   Nginx还带有健康检查（服务器心跳检查）功能，会定期轮询向集群里的所有服务器发送健康检查请求，来检查集群中是否有服务器处于异常状态。一旦发现某台服务器异常，则剔除。

配置负载均衡

proxy_pass http://backserver/; 
upstream backserver{ 
    ip_hash; 
    server 127.0.0.1:9090 down; //(down 表示单前的server暂时不参与负载) 
    server 127.0.0.1:8080 weight=2; //(weight 默认为1.weight越大，负载的权重就越大) 
    server 127.0.0.1:6060; 
    server 127.0.0.1:7070 backup; //(其它所有的非backup机器down或者忙的时候，请求backup机器) 
} 

分配策略

1. 轮询（默认）
   每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。
2. weight(加权轮询)
   指定轮询几率，weight和访问比率成正比，用于后端服务器性能不均的情况。
3. ip_hash
   每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session的问题
4. fair
   按后端服务器的响应时间来分配请求，响应时间短的优先分配。
5. url_hash
   按访问url的hash结果来分配请求，使每个url定向到同一个（对应的）后端服务器，后端服务器为缓存时比较有效。

tips: 后端服务器状态

down：当前服务器不参与负载均衡

backup：当其他节点都无法使用时的备用服务器

max_fails：允许请求失败的次数，若到达就会休眠

fail_timeout：经过max_fails次失败后，服务器的暂停时间，默认为10smax_conns：限制每个服务器的最大接收连接数

指定页面

将前端项目打包部署到服务器上，如果是使用默认的hash模式，可以正常刷新，然而在history模式下，刷新出现404的错误，官方文档已经给出了解释，不赘述。

nginx配置

server {
    listen 8090;
    server_name localhost;
    location / {
        try_files $uri $uri/ /index.html;
        index index.html index.html;
    }
    root /var/local/wechat-marking-app;
}

其中最关键的一行 **try_files $uri $uri/ /index.html;**,意思是匹配不到任何静态资源，就返回到index.html页面，即页面的入口文件。

另外，nginx也可以指定错误页面

# 根据状态码，返回对于的错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /source/error_page;
}

相关文档

8分钟带你深入浅出搞懂Nginx

nginx 这一篇就够了

前端开发者必备的Nginx知识

前端工程师不可不知的Nginx知识

前端必备 Nginx 配置

友情提示：

为了更好的使用shell, zsh，bash等脚本命令， mac用户推荐使用iterm2, windows用户推荐使用cmder等终端工具.

小小祝福

2020.10.24

愿你无bug,今晚不加班; 愿你不秃头也变强; 单身的都找到对象，有对象的不劈腿;

---

❤️鼓励一下

感谢你的阅读，如果觉得文章有用，请点赞鼓励一下。

你的点赞就是对我的最大支持，如有疑问，欢迎评论指正。