美文网首页
nginx 配置~~~本身就是一个静态资源的服务器

nginx 配置~~~本身就是一个静态资源的服务器

作者: 一乐乐 | 来源:发表于2022-07-01 00:10 被阅读0次

    一、nginx 作用

    ★ 静态HTTP服务器

    ★ HTTP服务器(动静分离)

    ★ 反向代理

    ★ 负载均衡



    二、nginx 静态HTTP服务器配置

    • Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,同时现在也很流行动静分离,就可以通过Nginx来实现。
    # nginx 静态资源配置--静态服务器(也是最简单的配置)
    server {
        listen 80; # 监听端口号
        server_name localhost; # 主机名
        index index.html index.htm; # 默认页名称
        root html; # 静态资源存放目录
        location / { # 匹配路径
            root html; # 文件根目录
            index index.html index.htm; # 默认页名称
        }
        error_page 500 502 503 504 /50x.html; # 报错编码对应页面
        location = /50x.html {
            root html;
        }
    }
    

    ● url 和 uri:

    • 网址是url,url=主机:端口+uri
    • uri 是资源,是location后面的匹配规则,即 location uri

    ● location uri,当规则匹配上了就到root目录找页面

    location / { #匹配路径
            root html; #文件根目录
            index index.html index.htm; #默认页名称
        }
    

    ● location 配置方法

    • location 配置可以有两种配置方法

    ① 前缀 + uri(字符串/正则表达式)

    ② @ + name

    • 前缀含义

      = :精确匹配(必须全部相等)

      ~ :大小写敏感

      ~* :忽略大小写

      ^~ :只需匹配uri部分

      @ :内部服务跳转



    三、nginx HTTP服务器(动静分离--nginx+tomcat实现动静分离)

    • 静态资源:数据不变,请求不需要后台处理;动态资源:模板,jsp、templates等,数据需要后台处理后渲染到网页,动态网页。
    • Nginx可以根据一定规则把不变的资源和经常变的资源区分开,对动静资源进行拆分,实现对静态资源的做缓存,从而提高资源响应的速度。这就是网站静态化处理的核心思路。
    upstream tomcat{  
        server localhost:8080;  
    }   
    server {  
        listen       80;  
        server_name  localhost;  
        location / {  
            root   html;  
            index  index.html;  
        }  
        # 所有静态请求都由nginx处理,存放目录为html  
        location  ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {  
            root   html;  
        }  
        # 所有动态请求都转发给tomcat处理  
        location ~ *jsp$ {  
            proxy_pass  http://tomcat; # 代理转发
        }  
        error_page   500 502 503 504  /50x.html;  
        location = /50x.html {  
            root  html;  
        }  
    }
    



    四、 反向代理----使用proxy_pass

    server {
                   listen       80;
                   server_name  blog.yilele.site;
                   index   index.html;            
                   location / {
                            root /shan/blog/;
                            index index.html;
                   }
                  location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                              root /shan/blog/;
                              index index.html;
                              add_header Access-Control-Allow-Origin *;
                  }
                  # 反向代理
                  location /api {
                        proxy_pass http://ip地址或域名:端口号;
                   }  
    }
    



    ☺ nginx 配置springboot+vue 前后端分离项目

    1、思路:nginx 结合自身特性,本身一个静态资源的服务器

    (1) 通过nginx实现域名的方式访问网站,以及把对数据的请求通过nginx反向代理转发给后端容器(后端服务),避免了接口暴露的不安全

    ① 访问网站,首先习惯上访问网站的首页,通常访问路径是/ [location /],然后默认页面是首页;

    location / {
         root /shan/blog/;
         index index.html;
     }
    

    ② 默认页面,首页需要像css、js、图片等静态资源,才能显示出样式、动态效果等,需要通过匹配规则[location ~*.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$],指定root 到那个目录下获取这些静态资源。

    location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
        root /shan/blog/;
        index index.html;
        add_header Access-Control-Allow-Origin *;
     }
    

    ③ 默认首页,需要有数据

    在vue中首页实际上编写了很多个接口在请求数据,这些动态数据是来自 springboot项目(api 服务),需要咱通过定义一个匹配接口路径的规则[location /api],然后进行请求转发到 springboot项目(api 服务)

    2、通过dockerCompose+nginx配置实现部署spirngboot+vue前后端分离项目

    (1) dockerCompose 主要内容:

    version: "3"
    services:
      api:
        image: api
        container_name: api
        expose:
          - "8888"
      nginx:
        image: nginx
        container_name: nginx
        ports:
          - 80:80
          - 443:443
        volumes:
          - /mnt/docker/nginx/:/etc/nginx/
          - /mnt/shan/blog:/shan/blog
        links:
          - api
        depends_on:
          - api
    


    (2) nginx 主要配置:

    upstream apistream{
            server api:8888;# 通过dockerCompose编排,服务名相当于域名
    }
    
    server {
                   listen       80;
                   server_name  blog.yilele.site;
                   index   index.html;          
                   location / {
                            root /shan/blog/;
                            index index.html;
                   }
                  location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                            root /shan/blog/;
                            index index.html;
                            add_header Access-Control-Allow-Origin *;
                  }
                  location /api {# 请求https://blog.yilele.site/api 会代理转发到 api:8888
                          proxy_pass http://apistream;
                  }  
    }
    


    如果本文对你有帮助的话记得给一乐点个赞哦,感谢!

    相关文章

      网友评论

          本文标题:nginx 配置~~~本身就是一个静态资源的服务器

          本文链接:https://www.haomeiwen.com/subject/gkgqbrtx.html