【Nginx】静态资源访问配置

@ nginx 静态资源访问配置

Nginx 静态资源访问配置

通过该片文章，你能了解图中的内容：

在这里插入图片描述

实际问题

Nginx 应该怎么写，才能匹配这个图片资源路径？

http://47.120.10.110:7001/public/images/picture.jpg

解决方案

你需要配置一个 Nginx 服务器块，并指定适当的 location 指令来处理这个 URL 路径。下面是一个示例配置：

server {listen 7001;server_name 47.120.10.110;location /public/images/ {root /path/to/your/images/directory;try_files $uri $uri/ =404;}# Optional: Handle other static resourceslocation /public/ {root /path/to/your/public/directory;try_files $uri $uri/ =404;}# Optional: Handle other routes if neededlocation / {proxy_pass http://your_backend_server;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

配置说明：

listen 7001:
- 配置 Nginx 监听端口 7001。
server_name 47.120.10.110:
- 配置服务器名称为 47.120.10.110。
location /public/images/:
- 配置匹配 /public/images/ 路径的 location 块。
- root: 指定图片文件的根目录路径，假设你的图片存储在 /path/to/your/images/directory。
- try_files: 尝试找到请求的文件，如果找不到则返回 404 错误。
Optional: Handle other static resources:
- 如果你有其他静态资源，可以配置相应的 location 块。例如 /public/ 路径可以对应到 /path/to/your/public/directory。
Optional: Handle other routes if needed:
- 如果你有其他需要处理的路由，可以使用 proxy_pass 将请求转发到后端服务器。

完整示例：

假设你的图片文件存储在 /var/www/myapp/public/images/，你的 Nginx 配置文件可能如下：

server {listen 7001;server_name 47.120.10.110;location /public/images/ {root /var/www/myapp;try_files $uri $uri/ =404;}location /public/ {root /var/www/myapp;try_files $uri $uri/ =404;}location / {proxy_pass http://127.0.0.1:3000;  # 假设你的后端服务器在本地的 3000 端口proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

使用步骤：

将 Nginx 配置文件保存到适当的路径（通常是 /etc/nginx/sites-available/ 或 /etc/nginx/conf.d/）。
检查配置文件的语法是否正确：
```
sudo nginx -t
```
重新加载 Nginx 配置：
```
sudo systemctl reload nginx
```
确保你的图片文件存储在 /var/www/myapp/public/images/ 目录下。

这样，当你访问 http://47.120.10.110:7001/public/images/picture.jpg 时，Nginx 会从指定的文件目录中查找并返回对应的图片文件。

配置文件命名

在 /etc/nginx/conf.d/ 目录中保存 Nginx 配置文件时，可以使用任何你认为合适的文件名，只要它以 .conf 扩展名结尾即可。通常建议使用描述性强的文件名，以便于理解和管理。比如，如果你的配置是用于某个特定的应用或网站，可以命名为 <your_application>.conf 或者 <your_website>.conf。

例如，如果你的应用名为 myapp，那么可以命名为 myapp.conf：

sudo nano /etc/nginx/conf.d/myapp.conf

然后在该文件中编写你的 Nginx 配置。完成后，保存文件并重新加载 Nginx 配置使其生效：

sudo systemctl reload nginx

这样，Nginx 将根据 myapp.conf 中的配置来处理请求。

为什么是存放在 `conf.d/` 目录？

先来看系统目录树：

/
├── etc/
│   ├── nginx/
│   │   ├── conf.d/
│   │   ├── default.d/
│   │   └── nginx.conf
│   └── opt
├── sys
├── tmp
├── ...
└── www

图示：

在这里插入图片描述

nginx.conf 核心代码：

http {include /etc/nginx/conf.d/*.conf;server {include /etc/nginx/default.d/*.conf;}
}

相信你已经看明白了！简单解释就是：

如果你要另起一个server就将.conf配置文件放在conf.d/目录下；
如果你要沿用当前server，比如在 80端口服务下，创建一个静态资源映射：

# /nginx/nginx.conf
server {listen 80;server_name example.com;# 根据上面的 `include`会自动引用`/nginx/default.d/*.conf/`配置文件# 自然就包含下面的`static.conf`配置文件}# /nginx/default.d/static.conf
location /api/public/images/ {alias /path/to/your/images/directory/;try_files $uri $uri/ =404;
}

不需要端口号，怎么处理

假设你希望通过 http://47.120.10.110/public/images/picture.jpg 来访问该图片，示例配置：

Nginx 配置

server {listen 80;server_name 47.120.10.110;# Proxy /api requests to the backend serverlocation /api {proxy_pass http://localhost:7001;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}# Proxy /public/images/ requests to the backend serverlocation /public/images/ {proxy_pass http://localhost:7001/public/images/;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}# Other configurations...
}

配置说明

listen 80:
- 配置 Nginx 监听 80 端口。
server_name 47.120.10.110:
- 设置服务器名称为 47.120.10.110。
location /api:
- 代理 /api 路径的请求到 http://localhost:7001。
location /public/images/:
- 代理 /public/images/ 路径的请求到 http://localhost:7001/public/images/。
proxy_pass http://localhost:7001/public/images/:
- 将 /public/images/ 的请求代理到你的本地服务 http://localhost:7001/public/images/。
proxy_http_version 1.1:
- 使用 HTTP/1.1 版本。
proxy_set_header:
- 设置请求头信息。