前端打包文件在nginx上403的解決辦法

遇到的問題表現出來就是如題所述，因此作為題目。

我們知道，前端有很多方便的構建和打包工具，如webpack等，通常我們會把前端文件打包到dist目錄下，部署到伺服器上，如nginx等。

這次遇到的問題是我下載了別人的一個代碼壓縮包，是一個vue.js+webpack的項目，構建好後上傳伺服器，可以保證的是伺服器上的nginx配置完全正確，但是在瀏覽器上怎麼訪問都是403 forbidden。

仔細觀察項目結構與文件許可權，發現項目下所有文件都是755的許可權，所有文件夾都是700的許可權，構建出來的文件也同樣繼承了這樣的許可權，導致nginx無法訪問文件。詳細原理請參考linux文件許可權和nginx文檔。

（如圖左為正常創建的文件許可權，右為異常許可權）

這裡也有一個鏈接描述了這個問題：403 Forbidden Error and How to Fix it | Nginx Tips

下麵我們需要修複文件許可權，使得所有文件是644許可權，而所有文件夾是755許可權。
一個一個設置太麻煩了，可以使用find命令加上文件類型判斷，來進行批量操作。

# 更改文件夾許可權
find . -type d -exec chmod 755 {} \;
# 更改普通文件許可權
find . -type f -exec chmod 644 {} \;

find命令的用法請參考man手冊。

這樣，我們再次在瀏覽器訪問服務端地址，就可以正常訪問了。