這篇文章講述的部署方法,任何系統的服務器都適合(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本身的,不會有任何權限問題,而且這種方法適用於任何系統和任何項目。