nginx docker静态资源分离 作者：马育民 • 2020-07-28 09:57 • 阅读：10466 需要掌握：[nginx+tomcat负载均衡（docker）](https://www.malaoshi.top/show_1EF5xyFmZ8xp.html "nginx+tomcat负载均衡（docker）") # 为什么 动态资源 和 静态资源分离 [](https://www.malaoshi.top/upload/pic/nginx/QQ20200727-234725.png) 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 # 缓存静态资源文件 https://www.malaoshi.top/show_1EF21zT5XFZ4.html 原文出处：/show_1EF5yAFvYQGh.html