nginx 部署前端vue項目的方法實踐
一、??什么是nginx?
Nginx是一款輕量級的HTTP服務(wù)器,采用事件驅(qū)動的異步非阻塞處理方式框架,這讓其具有極好的IO性能,時常用于服務(wù)端的反向代理和負載均衡。
優(yōu)點:
- 支持海量高并發(fā):采用IO多路復(fù)用epoll。官方測試Nginx能夠支持5萬并發(fā)鏈接,實際生產(chǎn)環(huán)境中可以支撐2-4萬并發(fā)連接數(shù)。
- 內(nèi)存消耗少
- 可商業(yè)化
- 配置文件簡單 除了這些優(yōu)點還有很多,比如反向代理功能,灰度發(fā)布,負載均衡功能等
二、??nginx 部署前端vue項目步驟
2.1 ??安裝nginx
2.1.1 ??windows環(huán)境安裝
到nginx官方下載系統(tǒng)相關(guān)的nginx版本安裝
啟動命令:
cd F:\nginx-1.19.4 start nginx
2.1.2 ??linux環(huán)境安裝
通常情況下很少使用windows來作為nginx的服務(wù)器,一般使用linux。對于linux安裝nginx有兩種方式,一種是使用官方已經(jīng)編譯好的包來安裝,一種是使用源碼構(gòu)建安裝。
第一種方式參考官方地址https://nginx.org/en/linux_packages.html#stable
第二種方式參考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段,這種實際上就是下一個tar.gz包仍到linux服務(wù)去自己編譯。
在linux服務(wù)上和window環(huán)境上使用nginx部署vue項目并沒有太大差異,把構(gòu)建好的vue項目dist上傳到linux服務(wù)上,通用修改nginx服務(wù)器中的root來指向dist就ok了,然后使用
# centos 7 systemctl restart nginx.service # centos 6 service nginx restart # 或者是平滑重啟 service nginx reload
2.2 ??打包vue項目
執(zhí)行命令
npm run build
2.3 ??配置nginx
修改nginx配置文件,配置文件為conf下的nginx.conf,修改nginx.conf中的server配置片段
server { listen 80;#默認端口是80,如果端口沒被占用可以不用修改 server_name localhost; root E:/vue_project/my_project/dist;#vue項目的打包后的dist location / { try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404 index index.html index.htm; } #對應(yīng)上面的@router,主要原因是路由的路徑資源并不是一個真實的路徑,所以無法找到具體的文件 #因此需要rewrite到index.html中,然后交給路由在處理請求資源 location @router { rewrite ^.*$ /index.html last; } #.......其他部分省略 }
完成nginx配置后重新加載配置文件
nginx -s reload
nginx -s reload
瀏覽器中訪問:http://localhost 測試是否部署成功
到此這篇關(guān)于nginx 部署前端vue項目的方法實踐的文章就介紹到這了,更多相關(guān)nginx部署前端vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Nginx反向代理實現(xiàn)多端口跳轉(zhuǎn)的實戰(zhàn)分享
在現(xiàn)代Web開發(fā)中,Nginx作為一款高性能的開源反向代理服務(wù)器,提供了強大的功能來管理網(wǎng)絡(luò)流量和路由,本文將介紹如何利用 Nginx 的反向代理功能,以實現(xiàn)多端口跳轉(zhuǎn)的效果,需要的朋友可以參考下2024-02-02Nginx配置編寫時支持邏輯運算與大小寫字母轉(zhuǎn)換的方法
這篇文章主要介紹了Nginx配置編寫時支持邏輯運算與大小寫字母轉(zhuǎn)換的方法,其中大小寫字母轉(zhuǎn)換是以lower upper case模塊來實現(xiàn),需要的朋友可以參考下2016-01-01Linux centos7環(huán)境下Nginx安裝教程
這篇文章主要為大家詳細介紹了Linux centos7環(huán)境下Nginx安裝教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03使用?nginx?搭建代理服務(wù)器(正向代理?https?網(wǎng)站)的詳細步驟
這篇文章主要介紹了使用?nginx?搭建代理服務(wù)器(正向代理?https?網(wǎng)站)指南的相關(guān)操作,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08