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

小鱼儿与大前端
8,276 阅读8分钟

前言

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

Ningx介绍

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

正向代理与反向代理

正向代理是什么东东？反向代理又是啥？
「「正向代理」」
「「举个栗子」」 因为防火墙的原因， 直接访问谷歌是无法访问的， 这时可以借助梯子，即vpn，那么这个vpn(代理)就是代替客户端去访问服务器，然后将数据返回给客户端。服务器并不知道目标客户端，只是与vpn建立联系。
「「反向代理」」
「「举个栗子」」 你（客户端）去租房时，真正的房东（服务器）将房租给二手房东（代理服务器），而你通过二手房东租到的房子，也就是你与二手房东建立联系， 租到房子，并非真正的房东。
一句话： 「「正向代理 “代理”客户端， 反向代理“代理”服务器。」」

基础配置

安装成功之后，一般情况下你的配置文件conf目录是/etc/nginx/nginx.conf,如果是本机，则路径在/usr/local/nginx/conf/nginx.conf（未改动路径的情况下）。
如果你不知道在哪，那下面这条命令可以帮助你

ps aux|grep nginx
红圈标注的就是nginx的路径
红圈标注的就是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 重启才会生效

2.执行nginx -s reload之后并不能明确知道是否已经启动,可以使用 ps -ef |grep nginx 查看进程 ❞❞

项目文件映射

访问项目文件的配置主要有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等终端工具.

04.07更新

填坑指南

1.解决nginx报错: [warn] conflicting server name “localhost“ on 0.0.0.0:8088, ignored
分析原因

修改nginx配置参数后，使用nginx -t检查配置.
提示successfull后就可以使用 nginx -s reload来重新加载配置
我配置的过程中遇到这样的问题，就是绑定了主机名后，重新加载配置时会出现警告
nginx: [warn] conflicting server name “localhost“ on 0.0.0.0:8088, ignored
意思是重复绑定了server name,但这个警告不会影响到服务器运行。而且，这个重复绑定的意思是现在运行的nginx服务和将要加载的新配置中的重复，所以，这个警告其实是不必的。

解决方案

查找nginx.conf 或者 /usr/local/nginx/conf/conf.d 中 server_name 后面跟的域名，有没有在别的server块内出现
要避免同一个域名不能指向多个目录
如果有重复的域名配置，修改一下，保存重启nginx

2.默认只有一个80端口号，没有申请其他的端口号，多个项目应该怎么区分呢？
解决方案

可以通过项目名来区分。访问链接上也带上项目名来使用。

举个栗子

根路径/var/project, 子项目A /projectA, 那么完整路径就是/var/project/projectA， 访问路径就是这个域名加/projectA， 前端路由接在后面即可。

3. 使用其他的端口号， 怎么没有生效？

如果你的服务器是在阿里云的， 那么这个端口号也是需要在这上面去申请配置的，相当于开白名单。

小小祝福

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

❤️鼓励一下

感谢你的阅读，如果觉得文章有用，请点赞鼓励一下。
你的点赞就是对我的最大支持，如有疑问，欢迎评论指正。

avatar
文章
阅读
粉丝