前端文档查询

# nginx 相关

Nginx 相关知识

# 如何一台服务器部署多个网站

多个服务只需要运行在不同端口即可，在 Nginx 的配置中，我们只需要根据用户访问的地址来指向不同的端口就 行，那么这个怎么配置呢，以我个人的网站来一段基本配置


server {
    listen       80;
    server_name   chat.fuwutu.com;
    location / {
        proxy_pass   http://127.0.0.1:7000;
    }   
}

我们发现如此简单，两行即可，监听 80 端口，当访问的域名是 chat.fuwutu.com 的时候指向我们的 7000 端口 ，那么 7000 端口就是我们项目运行的真实端口，很明显呢这是一个后端 node 服务，这时候小伙伴有疑问了，如 果我们是前端静态项目怎么办，我打了包了啊，好像没有端口了，直接访问了啊，那我哪来的这个 proxy_pass 呢 ，也很简单


server {
        listen 80;
        server_name project1.jaingly.com;

        location / { 
                root /data/project1/;
                index index.html;
        }
}

我们发现 proxy_pass 变成了 root，root 呢指向了一个地址，那么我们就把自己项目放这个地址就行了，原来前 端的项目这么简单啊，这一下，我们就可以一下部署好多网站啦，既可以访问前端这种静态网站，也可以配置 node 项目这种带端口的啦，这下服务器想部署多少项目不是都可以了么。如果小伙伴没有域名的话呢 server_name 就需要变成 127.0.0.1 加上端口号或者项目地址了，比如 127.0.0.1:7000、127.0.0.1/project1 这样来区分项目。同时需要注意的是，这里使用的是相对路径是以我们 nginx -t 那里的配置文件 nginx.conf 那 一层为对比的路径，记住地址别放错了文件，否则找不到哟

# 使用 Https 服务

这个时候有兴趣的同学发现，那我这个没有 https 认证好丑啊，还提示不安全，我也想要一个 Https，那我们怎 么办呢，前面说到，Https 对应的是 443 的端口，那我们直接监听 443 不就可以了么，在默认配置中，我们看见 有监听 443 端口但是注释了，我们之间打开，配置和 80 完全一样没有区别，我们直接三下五初二，保存，重载 ，发现，咦报错了，原来说我们没有证书啊，没错，Https 是需要证书的，这个证书呢需要收费，但是作为卑微的 开发仔当然不愿意去花这个钱了呗，我个人呢是使用的腾讯云,小伙伴们可能使用的是其他厂商，但是肯定都会提 供免费的证书供大家使用，去到域名管理的地方找到申请免费的 Https 证书，腾讯云在我个人使用每次申请最多 一分钟非常的快，完了之后下载会发现里面有很多的格式。我么要下载 Nginx 的格式，下载之后呢，打开里面会 有很多文件，但我们只需要两个，crt 格式的和 key 格式的，然后我先放一个个人的基本配置


server {
    listen 443 ssl;
    server_name   chat.jiangly.com;
    ssl_certificate conf.d/chat.jiangly.com_ssl/1_chat.jiangly.com_bundle.crt; 
    ssl_certificate_key conf.d/chat.jiangly.com_ssl/2_chat.jiangly.com.key; 
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
    ssl_prefer_server_ciphers on;
    location / {
        proxy_pass   http://127.0.0.1:7000;
        root html; 
        index  index.html index.htm;
    }       
}

别的地方都是一样的我们不用关心，我们看到两个配置项，ssl_certificate_key、ssl_certificate 后面分别对 应了两个地址，那么这个地址呢就是我们刚下载的两个文件的地址，/对应的相对地址呢和上面相同，只需要配置 这两个文件，其他地方都不用改变，然后重载，这个时候就可以访问 https 服务了，这样一看我们的网站就很正 规了呢，我们通过这么几个基础功能就实现了自己的网站部署，并且可以多网站、多域名、没端口、带证书等等功 能，当然这还不够，我们还可以做更多的事情

# Websocket 服务

我们去开发项目的时候可能会经常使用到 websocket 服务，如果还是这样的配置呢，我们会发现，请求被拦截掉 了，这是为什么呢？其实是因为我们使用 ws 服务的时候需要告诉 nginx 我们需要对协议进行升级，所以当你遇 到这个问题的时候只需要增加两行配置即可


proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;

如果遇到这个问题，加上重载即可。

# server 匹配规则

我们上面看到我们可以写很多组的 server，那么 Nginx 是从上往下匹配的，当匹配到第一个之后就会立即退出， 所以如果你遇到当你的配置怎么也不生效的时候，先看看是不是在上面被其他规则匹配到了。

# history 路由模式、跨域、缓存、反向代理

当我们开发的前端项目例如 vue 时，路由通常会有两个选项，一个带**#的哈希路由一个不带，同时文档中还说了 我们要使用，history 就需要后端去改配置，实际这个在 nginx 就是简简单单的几行而已，我们只需要添加下面 这几行，就可以使用 history 路由了**，同时还有设置一些静态格式文件的缓存，设置跨域访问等等都是简单的 配置就可以了


# html设置history模式
location / {
    index index.html index.htm;
    proxy_set_header Host $host;
    # history模式最重要就是这里
    try_files $uri $uri/ /index.html;
    # index.html文件不可以设置强缓存 设置协商缓存即可
    add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

# 接口反向代理
location ^~ /api/ {
    # 跨域处理 设置头部域名
    add_header Access-Control-Allow-Origin *;
    # 跨域处理 设置头部方法
    add_header Access-Control-Allow-Methods 'GET,POST,DELETE,OPTIONS,HEAD';
    # 改写路径
    rewrite ^/api/(.*)$ /$1 break;
    # 反向代理
    proxy_pass http://static_env;
    proxy_set_header Host $http_host;
}

location ~* .(?:css(.map)?|js(.map)?|gif|svg|jfif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
    # 静态资源设置七天强缓存
    expires 7d;
    access_log off;
}

# 负载均衡

我们可以基于 upstream 模块来做负载均衡，也就是设置权重以及配置地址


upstream backserver{ 
    # 哈希算法，自动定位到该服务器 保证唯一ip定位到同一部机器 用于解决session登录态的问题
    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机器) 
}

我们可以看到四个服务都是我们本机，正式的生产场景中呢，我们其实应该是别的服务器的 ip 地址，一般 nginx 会独立部署到一台服务器，其他的服务会部署在其他服务器，所以在这样的场景下，我们需要这多台服务器在一个 内网环境中，否则如果走公网，那么就会白白增加耗时，这里是我们需要了解的点。

上述场景呢是我为大家总结的一些常用场景，其实 Nginx 还有其他许许多多的更细致的功能，例如，压缩，服务 错误的优雅降级等等功能，如果有兴趣或者真实需要用到的时候再去查阅文档吧，毕竟这玩意儿记太多配置可就有 点占用咱们大脑的宝贵内存了。

# 常用指令

说了上面那么多了，为大家总结几个常用指令供大家使用吧

指令 解释

nginx -s reopen 重启 Nginx

nginx -s reload 重新加载配置文件，优雅重启 推荐使用

nginx -s stop 强制停止

nginx -s quit 安全退出

nginx -t 检测配置文件地址 以及检测配置是否正常

nginx -v 显示版本信息并退出

killall nginx 杀死所有 nginx 进程

上述呢就是一些常用的基本命令了，更多命令呢平时用的较少了，需要再去查询吧，大部署的后端指令呢都是 -s 表示发射命令的意思，记住这些常用命令就足够我们日常使用了。

知识汇总   |