文章目錄
- 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標簽去使用了。
