nginx docker静态资源分离-马育民老师

需要掌握：[nginx+tomcat负载均衡（docker）](https://www.malaoshi.top/show_1EF5xyFmZ8xp.html "nginx+tomcat负载均衡（docker）")

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

[![](https://www.malaoshi.top/upload/pic/nginx/QQ20200727-234725.png)](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

# 缓存静态资源文件
http://www.malaoshi.top/show_1EF21zT5XFZ4.html

原文出处：http://malaoshi.top/show_1EF5yAFvYQGh.html