一些Nginx知识（持续更新）

跟着大佬一起来 前端开发者必备的Nginx知识 and nginx配置ssl实现https访问

nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。

nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。

安装

在官网上选择适合的版本，我选的是window版本的： nginx.org/en/download… 下载安装文件后解压，可以看到这样子： （不用双击nginx.exe）

配置文件路径： conf / nginx.conf

下面是一个nginx配置文件的基本结构：

events { 

}

http 
{
    server
    { 
        location path
        {
            ...
        }
        location path
        {
            ...
        }
     }

    server
    {
        ...
    }

}

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

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

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

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

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

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

内置变量

下面是nginx一些配置中常用的内置全局变量，你可以在配置的任何位置使用它们。

变量名	功能
$host	请求信息中的Host，如果请求中没有Host行，则等于设置的服务器名
$request_method	客户端请求类型，如GET、POST
$remote_addr	客户端的IP地址
$args	请求中的参数
$content_length	请求头中的Content-length字段
$http_user_agent	客户端agent信息
$http_cookie	客户端cookie信息
$remote_port	客户端的端口
$server_protocol	请求使用的协议，如HTTP/1.0、·HTTP/1.1`
$server_addr	服务器地址
$server_name	服务器名称
$server_port	服务器的端口号

在命令行执行开启、关闭、重启命令：

开启：start nginx

关闭：nginx.exe -s quit

重启：nginx.exe -s reload  （修改配置文件后需要重启才生效）

nginx解决跨域的原理

例如：

• 前端server的域名为：fe.server.com
• 后端服务的域名为：dev.server.com

现在我在fe.server.com对dev.server.com发起请求一定会出现跨域。

现在我们只需要启动一个nginx服务器，将server_name设置为fe.server.com,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回dev.server.com。如下面的配置：

server {
        listen       80;
        server_name  fe.server.com;
        location / {
                proxy_pass dev.server.com;
        }
}

这样可以完美绕过浏览器的同源策略：fe.server.com访问nginx的fe.server.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。

例子

实际上根据项目添加server

当前 192.X.X.X:5678 端口 用户访问后 前端代码dist文件中index.html

前端vue项目中ajax交互跨域解决方案使用的是vue.config.js中的devServer中proxy代理，所以nginx中还需要一个location去处理，前端跨域请求转发的问题，所以proxy中的跨域转发前缀要和nginx中的跨域转发前缀保持一致，页面接口交互才能正常实现

将路径清空

# 项目 history路由模式
server {
    listen	5678; # 给用户使用5678端口并监听
    server_name	192.X.X.X; # 本机服务器ip地址为：192.X.X.X
    client_max_body_size 100m; # 上传大文件的配置，nginx默认20M容量，想要上传更大文件，就要额外设置
    location / { # 定位具体的文件入口
        try_files $uri $uri/ /index.html; # 解决vue中history路由模式，部署后刷新页面404问题，hash路由模式则不需要
        root D:/nginx-1.18.0/html/dist; # 前端代码dist文件所在磁盘目录位置
        index index.html; # dist文件夹中的入口文件index.html
    }
    location /api/ { # 处理前端跨域转发请求 前端前缀需清空 
        # 后端服务启用的端口是9999，所以这里就转发到这个地址
        proxy_pass http://192.X.X.X:9999/;
        # 下面三句话是用来获取用户访问的ip的
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
    location /potato-cli-market/ { #自己后端的网页页面地址 都是例子可以更改
        proxy_pass http://192.X.X.X:9999/potato-cli-market/;
    }
    location /potato-cli/ { #自己后台管理系统的网页页面地址 都是例子可以更改
        proxy_pass http://192.X.X.X:9999/potato-cli-market/;
    }
}

nginx配置ssl实现https访问

申请证书

申请腾讯云的免费证书 或者 免费申请支持泛域名的ssl证书https证书

下载的是一个zip文件，解压后打开里面的Nginx文件夹，把1_XXX.com_bundle.crt跟2_XXX.com.key文件复制下来。

配置文件

nginx的配置文件是nginx.conf 打开配置。

配置文件在/ect/nginx，现在把刚才的两个证书文件复制过来，待会直接配置使用就行了。nginx的配置文件是nginx.conf，里面的配置内容有以下，

# 运行用户，默认即是nginx，可以不进行设置
user  nginx;
#Nginx进程，一般设置为和CPU核数一样
worker_processes  1;

#错误日志存放目录
error_log  /var/log/nginx/error.log warn;
#进程pid存放位置
pid        /var/run/nginx.pid;

events {
    worker_connections  1024; # 单个后台进程的最大并发数
}

http {
    include       /etc/nginx/mime.types; #文件扩展名与类型映射表
    default_type  application/octet-stream; #默认文件类型
    #设置日志模式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main; #nginx访问日志存放位置

    sendfile        on; #开启高效传输模式
    #tcp_nopush     on; #减少网络报文段的数量

    keepalive_timeout  65; #保持连接的时间，也叫超时时间

    #gzip  on; #开启gzip压缩

    include /etc/nginx/conf.d/*.conf; #包含的子配置项位置和文件
}

这是全局配置。为了更好管理，我们还是在最后一行声明的/etc/nginx/conf.d文件夹里进行子项目配置。 打开里面的default.conf

#设定虚拟主机配置
server {
  #侦听443端口，这个是ssl访问端口
  listen    443;
  #定义使用 访问域名
  server_name  XXX.com;
  #定义服务器的默认网站根目录位置
  root /web/www/website/dist;  

  #设定本虚拟主机的访问日志
  access_log  logs/nginx.access.log  main;

  # 这些都是腾讯云推荐的配置，直接拿来用就行了，只是修改证书的路径，注意这些路径是相对于/etc/nginx/nginx.conf文件位置
  ssl on;
  ssl_certificate 1_XXX.com_bundle.crt;
  ssl_certificate_key 2_XXX.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 / {     
  root /web/www/website/dist;      
      #定义首页索引文件的名称
      index index.html;
  }

  #静态文件，nginx自己处理
  location ~ ^/(images|javascript|js|css|flash|media|static)/ {
      #过期30天，静态文件不怎么更新，过期可以设大一点，
      #如果频繁更新，则可以设置得小一点。
      expires 30d;
  }

  #禁止访问 .htxxx 文件
  #    location ~ /.ht {
  #    deny all;
  #}

}
server
{
  # 80端口是http正常访问的接口
  listen 80;
  server_name XXX.com;
  # 在这里，我做了https全加密处理，在访问http的时候自动跳转到https
  rewrite ^(.*) https://$host$1 permanent;
}