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的話,報錯的日志就可能是沒有權限,如下:

  2020/02/12 11:36:42 [error] 37614#0: *13 "/Users/admin/Desktop/test/test.html" is forbidden (13: Permission denied), client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", host: "localhost:9998"

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

a. 重新安裝 homebrew

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

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM