日常开发中我们常用到的那些Nginx操作，从安装到配置详解

身为一名前端开发人员，平时在工作中蛮少有机会接触到Nginx，正好最近开发了一个个人博客，在上线时遇到了诸多问题，这里来做个汇总记录，巩固知识点或者将来查阅。

安装

安装相关依赖

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

安装wget

yum install wget

下载Nginx压缩包并解压

wget https://nginx.org/download/nginx-1.16.1.tar.gz
tar -zxvf nginx-1.16.1.tar.gz

mkdir /usr/local/nginx
cd nginx-1.16.1
./configure --prefix=/usr/local/nginx --with-http_ssl_module

编译安装

make & make install

添加环境变量

vim /etc/profile

在最底下添加nginx的sbin目录,若有多个用:分隔

export PATH=/usr/local/nginx/sbin

测试

nginx -v

此时输出当前nginx版本，安装成功

Nginx常用命令

# 开启服务
start nginx

# 快速停止
nginx -s stop

# 有序停止
ngxinx -s quit

# 重启
nginx -s reload

# 配置检查
nginx -t

nginx.conf常用配置

好了，接下来我们进入正题，来到/usr/local/nginx/conf

跨域问题

众所周知，浏览器因为安全策略，当页面与请求在协议、ip、端口号有任一不一致的情况下会产生跨域问题。在开发阶段我们通过构建工具的pathRewrite解决，然而线上该如何解决呢，通常这里我们通过配置反向代理

# server块下添加
location ^~/api/ {
  proxy_pass http://127.0.0.1:8090/;
}

当路径中匹配到/api时将会请求proxy_pass后面的路径地址(并不包含/api)，所以当浏览器进行数据请求时可能仍然是80端口，但实际上请求已经代理到了8090端口

注意localtion的匹配规则：优先匹配前缀最长，其次是正则表达式

页面刷新404

在我们的Vue、React单页面中，有两种路由模式，hash与history。hash路由会在url地址后面拼上#,不是很好看(个人觉得)。

还有一种就是history了，但是当我们的路由发生变化时进行刷新操作，虽然浏览器的url地址变了，但是服务器上的静态资源里只有index.html，所以无法正确的返回相应的页面

这里我们仍然在server块下编辑

 location / {
      root   html;
      try_files $uri /index.html; # 这是新增的
      index  index.html index.htm;
  }

try_files $uri /index.html; 命令的作用是在请求不到相应资源时跳转到指定的路径

虽然这一步操作解决了404的问题，但是又产生了新的问题

root/alias代理

当我们进行了上一步的操作之后，会发现如果在html目录下还有其他的项目时，比如html目录还有个blog-admin的前端页面，这里的页面刷新时我们期望是访问blog-admin的index.html，但是上一步的操作会仍将页面跳转到html目录下的index.html

这里我们再加一次代理

location /blog-admin/ {
  alias /usr/local/nginx/html/blog-admin/; # 结尾一定要加上 /
  try_files $uri /blog-admin/index.html;
}

或者

location /blog-admin/ {
  root /usr/local/nginx/html/;
  try_files $uri /blog-admin/index.html;
}

root与alias的区别是

root在请求时会在后面拼上location后跟的地址
alias会直接请求配置的访问地址

SSL配置

首先我们在服务器运行商那里下载提供的证书，在nginx安装根目录下创建cert文件夹，将证书里的key、pem文件放进去

我们创建一个新的server块

server {
        listen       443 ssl;
        server_name  localhost;
        # 路径就是刚才所添加的两个文件
        ssl_certificate     ./cert/xxxxxx.pem;
        ssl_certificate_key ./cert/xxxxxx.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   html;
            index  index.html index.htm;
        }
    }

获取请求Ip

在我的项目中需要拿到用户ip的真实地址来查询归属地，然而为了解决跨域问题使用了反向代理从而所有的请求都会被解析成内网访问，这里我们需要添加配置

       location ^~/api/ {
       	proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	   	proxy_pass http://127.0.0.1:8090/;
	   }

其他

这里列举下其他我添加或修改的配置

server {
    # 修改文件传输大小限制 默认1M 设置0则表示无限制
    client_max_body_size 10m; 

    # gzip压缩
    gzip on;
		
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  
    gzip_proxied any;
  
    gzip_vary on;
  
    gzip_disable "MSIE [1-6]\.";
}