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

文章目录

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

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

需求背景

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

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

挂载网络共享路径

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

  1. 打开命令提示符(以管理员身份运行)。

  2. 使用 net use 命令挂载网络共享路径:

    cmd 复制代码
    net use Z: \\192.168.0.77\家庭共享 /user:your_username your_password /persistent:yes

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

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

检查连接状态

再次检查连接状态:

cmd 复制代码
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,这个可以自己随便写个空闲的)

nginx 复制代码
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进程:

cmd 复制代码
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标签去使用了。

相关推荐
运维-大白同学12 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
烦躁的大鼻嘎28 分钟前
【Linux】深入理解GCC/G++编译流程及库文件管理
linux·运维·服务器
乐大师29 分钟前
Deepin登录后提示“解锁登陆密钥环里的密码不匹配”
运维·服务器
ac.char35 分钟前
在 Ubuntu 上安装 Yarn 环境
linux·运维·服务器·ubuntu
敲上瘾36 分钟前
操作系统的理解
linux·运维·服务器·c++·大模型·操作系统·aigc
蓝田~1 小时前
观察者模式和订阅模式
windows·观察者模式
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
传而习乎2 小时前
Linux:CentOS 7 解压 7zip 压缩的文件
linux·运维·centos
soulteary2 小时前
突破内存限制:Mac Mini M2 服务器化实践指南
运维·服务器·redis·macos·arm·pika
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue