【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 resources
    location /public/ {
        root /path/to/your/public/directory;
        try_files $uri $uri/ =404;
    }

    # Optional: Handle other routes if needed
    location / {
        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;
    }
}

配置说明：

1. listen 7001:

   • 配置 Nginx 监听端口 7001。

2. server_name 47.120.10.110:

   • 配置服务器名称为 47.120.10.110。

3. location /public/images/:

   • 配置匹配 /public/images/ 路径的 location 块。
   • root: 指定图片文件的根目录路径，假设你的图片存储在 /path/to/your/images/directory。
   • try_files: 尝试找到请求的文件，如果找不到则返回 404 错误。

4. Optional: Handle other static resources:

   • 如果你有其他静态资源，可以配置相应的 location 块。例如 /public/ 路径可以对应到 /path/to/your/public/directory。

5. 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;
    }
}

使用步骤：

1. 将 Nginx 配置文件保存到适当的路径（通常是 /etc/nginx/sites-available/ 或 /etc/nginx/conf.d/）。
2. 检查配置文件的语法是否正确：

   sudo nginx -t
   

3. 重新加载 Nginx 配置：

   sudo systemctl reload nginx
   

4. 确保你的图片文件存储在 /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;
    }
}

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

1. 如果你要另起一个server就将.conf配置文件放在conf.d/目录下；
2. 如果你要沿用当前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 server
    location /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 server
    location /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:

  • 设置请求头信息。

访问图片资源

• 现在，你可以通过 http://47.120.10.110/public/images/picture.jpg 来访问你的图片文件，这个请求将会被代理到 http://localhost:7001/public/images/picture.jpg。

重新加载 Nginx 配置

完成配置后，保存文件并重新加载 Nginx 配置：

sudo systemctl reload nginx

这样，Nginx 将会处理 /public/images/ 路径下的所有请求，并将它们代理到你的后端服务器 http://localhost:7001/public/images/。确保所有路径和配置都正确无误，这样浏览器就能正确地加载和显示你的图片资源了。

【Vinca】 欢迎点赞、评论、收藏，您的支持将是我分享更多资源的动力哦~
🌸