nginx docker静态资源分离

需要掌握:nginx+tomcat负载均衡(docker)

为什么 动态资源 和 静态资源分离

jsp等动态内容交由tomcat处理,nginx转发请求

静态资源文件(html、css、js、图片等)由nginx处理,速度更快。
如果静态资源也由tomcat处理,给tomcat带来不必要的负担,而且速度慢;而且nginx转发请求,显然增添不必要的步骤,速度更慢

原理

配置多个 location 块:

  • 访问动态资源,通过反向代理转发给tomcat

  • 访问静态资源,到静态资源路径去找相应文件
    所以启动nginx docker时,需要 挂载静态资源路径

修改docker-compose.yml文件

在nginx配置中 挂载静态资源路径,如下:

version: '3'
services:
  nginx:
    image: nginx   # 镜像
    container_name: nginx   # 指定容器名称
    networks:
      - mynet
    ports:   # bridge网络模式,指定映射端口
       - "8000:80"
    # network_mode: "host"   # 指定网络模式
    restart: always   # 当docker服务启动时,容器总是跟着启动
    volumes:
      - /root/docker_nginx/conf.d:/etc/nginx/conf.d
      - /root/docker_nginx/static:/nginx_static   # 挂载静态资源路径
  tomcat1:
    image: tomcat   # 镜像
    container_name: tomcat1   # 指定容器名称
    networks:
      - mynet
    ports:   # bridge网络模式,指定映射端口
       - "8080:8080"
    restart: always   # 当docker服务启动时,容器总是跟着启动
    volumes:
      - /root/docker_nginx/webapps1:/usr/local/tomcat/webapps
  tomcat2:
    image: tomcat   # 镜像
    container_name: tomcat2   # 指定容器名称
    networks:
      - mynet
    ports:   # bridge网络模式,指定映射端口
       - "8081:8080"
    restart: always   # 当docker服务启动时,容器总是跟着启动
    volumes:
      - /root/docker_nginx/webapps2:/usr/local/tomcat/webapps
networks:
  mynet:

准备静态文件

css

在 /root/docker_nginx/static路径下创建css文件夹

mkdir /root/docker_nginx/static/css

在该路径下创建 style.css 文件

vim /root/docker_nginx/static/css/style.css

内容如下:

* {
    color: red;
}

js

在 /root/docker_nginx/static路径下创建js文件夹

mkdir /root/docker_nginx/static/js

在该路径下创建 1.js 文件

vim /root/docker_nginx/static/js/1.js

内容如下:

alert(1);

图片

在 /root/docker_nginx/static路径下创建imgs文件夹

mkdir /root/docker_nginx/static/imgs

上传一张图片

html

在 /root/docker_nginx/static路径下创建html文件夹

mkdir /root/docker_nginx/static/html

在该路径下创建 index.html 文件

vim /root/docker_nginx/static/html/index.html

内容如下:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="/css/style.css">
        <script type="text/javascript" src="/js/1.js"></script>
    </head>
    <body>
    测试静态资源分离 <img src='/imgs/1.png'/>
    </body>
</html>

配置

修改/root/docker_nginx/conf.d/default.conf

vim /root/docker_nginx/conf.d/default.conf

内容如下(通过url匹配):

# 增加 upstream 块,配置要负载均衡的服务
upstream tomcats {    # tomcats是名字,可任意起,一般不要有下划线
    server tomcat1:8080 ;   # 由于使用自定义bridge网络,所以可以通过容器名通信
    server tomcat2:8080 ;
}

server{
    listen 80;
    server_name localhost;

    location /html {   # 处理url:http://ip:port/html/xxx
        root   /nginx_static;   # 设置根路径,拼装后是:/nginx_static/html
        index index.html;   # 默认首页是index.html
    }
    location /js {   # 处理url:http://ip:port/js/xxx
        root   /nginx_static;   # 设置根路径,拼装后是:/nginx_static/js
    }
    location /css {   # 处理url:http://ip:port/css/xxx
        root   /nginx_static;   # 设置根路径,拼装后是:/nginx_static/css
    }
    location /imgs {   # 处理url:http://ip:port/imgs/xxx
        root   /nginx_static;   # 设置根路径,拼装后是:/nginx_static/imgs
        expires      7d;   # 缓存7天
    }

    location / {
        proxy_pass http://tomcats;
        proxy_connect_timeout       2;
    }
}

使配置文件生效

方法一:重启nginx docker容器

方法二:进入nginx docker容器,重新加载配置文件:

nginx -s reload

根据url后缀匹配(参考)

#图片缓存7天
location ~ .*\.(png|gif|ico|jpg|jpeg|eot|svg|svgz|mp4|ogg|ogv|webm|ttf|woff)$ {
    root   F:\apache-tomcat-web\ROOT;
    expires      7d;
}
#js、css缓存7天
location ~ .*\.(js|css)$ {
    root   F:\apache-tomcat-web\ROOT;
    expires      7d;
}
#html不缓存
location ~ .*\.(htm|html)$ {
    root   F:\apache-tomcat-web\ROOT;
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}

测试

访问 http://106.13.165.100:8000/html/ 能够正常显示 index.html 页面,图片、css样式、执行js脚本

访问 http://106.13.165.100:8000/test/index.html ,能够实现负载均衡,间隔显示 tomcat1、tomcat2页面

验证静态资源由nginx处理(参考)

关闭tomcat后,直接访问静态资源文件,如果能访问到,就说明nginx的静态文件分离是可行的

注意: 在地址栏中输入http://localhost 会报404错误,要输入全部路径http://localhost/index.jsp

缓存静态资源文件

http://www.malaoshi.top/show_1EF21zT5XFZ4.html