23、web场景-静态资源规则与定制化
23、web场景-静态资源规则与定制化
# 静态资源规则与定制化
在Web开发中，静态资源（如CSS、JavaScript、图片等）是构建页面的重要组成部分。了解静态资源的处理规则和定制化方法，有助于提升网站的性能和用户体验。
## 一、静态资源处理规则
### 1. Spring Boot中的静态资源规则
#### 默认映射路径
- **默认目录**：`/static`、`/public`、`/resources`、`/META-INF/resources`。
- **访问方式**：将静态资源放在上述目录中，可通过`http://localhost:8080/资源名`直接访问。
#### 原理
- **处理流程**：请求先由`Controller`处理，无法处理的请求再由静态资源处理器处理。
- **自动配置**：通过`WebMvcAutoConfiguration`类自动配置静态资源映射。
#### 示例
- 访问`/static/css/style.css`，实际会查找`classpath:/static/css/style.css`。
### 2. Nginx中的静态资源规则
#### 配置示例
```nginx
server {
listen 80;
server_name example.com;
location / {
root /var/www/html;
index index.html index.htm;
}
location /static/ {
root /var/www;
expires 30d;
access_log off;
}
}
```
#### 说明
- **`location /`**：匹配所有请求，根目录为`/var/www/html`，默认首页为`index.html`。
- **`location /static/`**：匹配以`/static/`开头的请求，根目录为`/var/www`，设置缓存30天，关闭访问日志。
## 二、静态资源定制化
### 1. Spring Boot中的定制化
#### 修改访问路径
- **配置方式**：
```yaml
spring:
mvc:
static-path-pattern: /res/**
```
- **效果**：静态资源访问路径变为`http://localhost:8080/res/资源名`。
#### 修改资源目录
- **配置方式**：
```yaml
spring:
resources:
static-locations: classpath:/myres/
```
- **效果**：Spring Boot会从`classpath:/myres/`目录查找静态资源。
#### 使用WebJars
- **引入依赖**：
```xml
```
- **访问路径**：`http://localhost:8080/webjars/jquery/3.5.1/jquery.js`。
### 2. Nginx中的定制化
#### 设置别名（alias）
- **配置示例**：
```nginx
location /img/ {
alias /var/www/images/;
}
```
- **说明**：访问`http://example.com/img/logo.png`，实际会查找`/var/www/images/logo.png`。
#### 缓存设置
- **配置示例**：
```nginx
location /static/ {
root /var/www;
expires 1h;
add_header Cache-Control "public, max-age=3600";
}
```
- **说明**：设置静态资源缓存1小时。
#### 防盗链
- **配置示例**：
```nginx
location /images/ {
valid_referers none blocked example.com *.example.com;
if ($invalid_referer) {
return 403;
}
}
```
- **说明**：只允许来自`example.com`及其子域的请求访问`/images/`下的图片。
## 三、总结
- **Spring Boot**：通过简单的配置即可定制静态资源的访问路径和存储位置，适合快速开发。
- **Nginx**：提供更灵活的静态资源处理能力，如缓存、防盗链等，适合生产环境部署。
根据项目需求，选择合适的静态资源处理方案，并进行相应的定制化配置，可以有效提升网站的性能和安全性。