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

2023年 8月 18日 106.1k 0

身为一名前端开发人员,平时在工作中蛮少有机会接触到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
    
  • 创建Nginx编译目录并含有SSL配置
  • 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]\.";
    }
    
    

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论