Windows搭建Nginx代理本地盘的文件（共享路径或本地路径）

文章目录

- Windows搭建Nginx代理本地盘的文件 - 前言
- - 需求背景
  - 挂载网络共享路径
  - 检查连接状态
  - 下载Nginx
  - 编辑 Nginx 配置文件
  - 启动 Nginx
  - 检测Nginx是否成功启动
  - 使用方法
  - - 远程共享路径示例
    - 本地文件示例
  - 测试

Windows搭建Nginx代理本地盘的文件 - 前言

在开发过程中，确保文件的安全性和便捷访问是非常重要的。由于 JavaScript 出于安全性考虑，不能直接读取本地文件系统上的文件，我们需要一种方法来安全、可靠地访问这些文件。使用 Nginx 作为代理服务器，是一种既简单又高效的解决方案。本指南将详细介绍如何在 Windows 系统上搭建 Nginx 服务器，并将本地磁盘上的文件通过 Nginx 代理进行访问。

需求背景

文件安全性：在开发过程中，直接暴露本地文件系统可能会带来安全隐患。通过 Nginx 代理，可以有效地隔离文件系统，增强安全性。
JavaScript 限制：由于 JavaScript 不能直接访问本地文件系统，使用 Nginx 代理可以解决这一限制，使前端应用能够通过 HTTP 请求访问本地文件。

本指南将逐步讲解如何在 Windows 上安装和配置 Nginx，以便在开发过程中安全地代理和访问本地文件。

挂载网络共享路径

首先，确保网络共享路径已经成功挂载：

打开命令提示符（以管理员身份运行）。

使用 net use 命令挂载网络共享路径：

net use Z: \\192.168.0.77\家庭共享 /user:your_username your_password /persistent:yes

请将 your_username 和 your_password 替换为适当的凭据。/persistent:yes 确保连接在重新启动后仍然存在。

这将把网络共享路径挂载到 Z: 盘，并且设置为持久性连接。

检查连接状态

再次检查连接状态：

net use

显示如下面所示表示OK。一直不用的话它会自动断开连接，但是再次使用时会连接上的，无需担心。

状态       本地        远程                      网络

-------------------------------------------------------------------------------
OK           Z:        \\192.168.0.77\家庭共享   Microsoft Windows Network
命令成功完成。

下载Nginx

推荐下载稳定版的：Nginx下载链接

下载解压文件。

编辑 Nginx 配置文件

找到nginx.conf文件，位置在D:\nginx-1.26.0\nginx-1.26.0\conf目录，每个人解压的文件可能有差距，仅供参考。
添加或修改以下内容：
(注意：如果不是共享路径的话只需要配置为需要代理的路径即可，比如：C:/本地文件/素材/;我使用的端口是61707，这个可以自己随便写个空闲的)

server {
    listen 61707;
    server_name localhost;

    location /files/ {
        alias Z:/思帆亚马逊影像素材/;
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
}

效果图如下：只需替换原有的server内容即可。其他东西不要动。
在这里插入图片描述这个配置指定了一个服务器块，监听端口 61707，并设置了一个 location /files/ 块，将 URI 前缀 /files/ 映射到本地目录 Z:/思帆亚马逊影像素材/。此外，还启用了自动索引功能，以便列出目录内容。如果请求的文件不存在，则返回 404.html 页面。

启动 Nginx

在这里插入图片描述
如果遇到闪退的情况，大概率是端口被占用了，更换端口，重新启动。

也可以看下日志文件的内容，好定位问题所在。

在这里插入图片描述

检测Nginx是否成功启动

运行以下命令来列出当前正在运行的Nginx进程：

tasklist | findstr nginx

有显示内容表示启动成功，示例如下：

C:\Users\Administrator>tasklist | findstr nginx
nginx.exe                    26800 Console                    1      6,908 K
nginx.exe                    26764 Console                    1      7,436 K

使用方法

现在可以使用 URL 访问本地文件了。

远程共享路径示例

将以下网络共享路径：

\\192.168.0.77\家庭共享\思帆亚马逊影像素材\平面组\黎欣婷\海洋发夹4pcs\海洋发夹4pcs\zt1.jpg

替换为：

http://localhost:61707/files/平面组/黎欣婷/海洋发夹4pcs/海洋发夹4pcs/zt1.jpg

即可在浏览器中访问该文件。

本地文件示例

对于本地文件的访问方法也是类似的。假设本地文件路径为：

C:\本地文件\思帆亚马逊影像素材\平面组\黎欣婷\海洋发夹4pcs\海洋发夹4pcs\zt1.jpg

在浏览器中访问该文件的 URL 应为：

http://localhost:61707/files/平面组/黎欣婷/海洋发夹4pcs/海洋发夹4pcs/zt1.jpg

只需将本地文件路径中的盘符和前缀替换为 http://localhost:61707/files/，加上剩余的文件路径即可。这样，你可以通过浏览器访问本地文件，方便进行开发和调试。

例如：

本地文件路径：C:\本地文件\思帆亚马逊影像素材\平面组\黎欣婷\海洋发夹4pcs\海洋发夹4pcs\zt1.jpg
URL 访问路径：http://localhost:61707/files/平面组/黎欣婷/海洋发夹4pcs/海洋发夹4pcs/zt1.jpg

通过这种方式，你可以在开发过程中轻松访问和展示本地文件或网络共享路径下的文件。

测试

在这里插入图片描述
有了URL那么在前端就可以通过img标签去使用了。

秒客网