前端網頁發布到nginx nginx上部署前端專案

這篇文章講述的部署方法，任何系統的伺服器都適合(eg: windows，mac，etc...)，同時也可以部署任何框架的前端專案(eg: vue, react, jq, etc...)

1. 開啟nginx的安裝目錄，這裡以mac系統為例：

在 etc 資料夾同級目錄下有個 var 資料夾，var 資料夾裡面有個 www 資料夾。這個 www 資料夾就是放置要部署的前端專案的地方。同理，其他系統的伺服器也找到這個 /var/www 路徑，把要部署的前端專案放入即可。

1.1 www 資料夾裡面的 index.html 和 50x.html 是 nginx 自帶的。index.html 就是 nginx 的歡迎頁面，一般用來判斷 nginx 是否啟動成功。50x.html 頁面就是報錯頁面。

1.2 song 和 dist 資料夾是我自己隨便放入的兩個前端專案，song 資料夾下面就乙個 test.html 頁面，dist 資料夾就是乙個打包之後的 vue 專案。

2. 開始配置 /etc/nginx/nginx.conf 檔案

2.1 配置 /song/test.html

2.2 配置 /dist/index.html。這種配置是訪問的9996埠下的子目錄dist，記得修改vue專案裡面的 assetspublicpath 和 router的 base 為 dist。

備註：如果伺服器是mac系統，被部署的前端專案如果沒有放在nginx的/var/www/目錄下的話，比如放到了桌面上，訪問時可能會報錯，如果nginx配置是ok的話，報錯的日誌就可能是沒有許可權，如下：

這時就可能是安裝的 homebrew 有問題，解決方案就是：(二選一即可)

a. 重新安裝 homebrew

b. 修改mac系統的許可權配置(自行google)

我個人的建議就是，被部署的專案直接放到 /var/www/ 目錄下即可。因為這個目錄就是nginx本身的，不會有任何許可權問題，而且這種方法適用於任何系統和任何專案。