1、如何使用Nginx來部署我們打包好的前端Vue項目 因為這里做的演示是本地服務(wù)，就需要安裝在自己的電腦上 1確認你的電腦是否安裝homebrew，打開電腦終端輸入2確認homebrew是否安裝成功，輸入 3安裝nginx 4確認nginx是否安裝；首先確定此項目在本地能夠運行成功在本地命令行中輸入npm run start，無報錯，且打開3000有寫的路由為的頁面，如圖此為文件層級關(guān)系front為前端文件xk3為后臺express與數(shù)據(jù)庫mysql鏈接的文件用命令行進入后臺；查詢了好多資料，都沒有找到可以直接應(yīng)用的，綜合了好多，配置runner之后，前端項目里面需要在項目根目錄配置三個文件1gitlabciyml 文件 stages build deploy 設(shè)置緩存 cachepaths node_modules dist。

2、前言有這樣一個需求，需要在多個不同的服務(wù)器下部署同一個前端項目，正常操作是每一臺服務(wù)器都根據(jù)不同的IP地址build一個包依次部署，非常繁瑣，因此簡化為多個環(huán)境只需要用打一個包即可解決方案首先需要服務(wù)器設(shè)置；可以使用參數(shù)來設(shè)置，得到符合不同需要的編譯結(jié)果之后即可以將打包的文件部署到服務(wù)器上學(xué)習(xí)前端框架Vue的步驟如下了解Vue框架的基本概念和特點了解Vue框架的基本架構(gòu)和工作原理，包括Vue的視圖層渲染數(shù)據(jù)綁定組件化；二編譯部署1項目路徑下demo輸入命令npm run build編譯完成后會發(fā)現(xiàn)在demo文件夾下多出一個dist文件夾這里面就是編譯好的文件了2網(wǎng)上下載nginx，下載地址。

3、41 進入到nginx配置目錄usrlocalnginxconf，對 nginxconf 文件進行配置 使用include可以配置多個conf文件，如一個項目一個配置文件在同目錄下創(chuàng)建demo文件夾，并創(chuàng)建democonf配置文件 下面使用是以ip地址的方式；conf 詳細可參考這種方式只需要開放80端口，然后訪問二級域名這種方式的好處是只有一個server ，而且不需要二級域名用路徑location就能實現(xiàn)但是這種方式的一個缺點，就是vue項目前端需要改配置修改地方如下react 配置；那么如果前端如果布置，就具體看前端訪問量了，如果單機nginx無法負載，最廉價的方式就是直接扔文件服務(wù)器比如阿里的oss并且掛載域名，之后的事就交給阿里吧，如果瓶頸存在與通過ws或者aj與服務(wù)器的交互上，那應(yīng)該在負載均衡；也就是說，比如我們當(dāng)前的前端項目部署在 usrmyproj 目錄下，現(xiàn)在我們在瀏覽器發(fā)起 ipporttestApi 請求，那么此時 uri 為testApi，nginx會先去 $roottestApi 即usrlocalmyprojtestApi找是否存在該靜態(tài)資源；1安裝護衛(wèi)神主機大師，一鍵配置全能網(wǎng)站環(huán)境 2用主機大師開設(shè)網(wǎng)站，并綁定域名 3解析域名到服務(wù)器IP 4FTP上傳前端代碼到服務(wù)器 5輸入域名即可訪問前端代碼了。

4、因此，為了方便，我們可以使用Nginx獨立部署前端項目一 Nginx安裝步驟 1安裝GCCautomakepcrezlib和openssl 用rpm qa 命令查看是否安裝 如果沒有安裝，執(zhí)行以下命令 yum y install gcc gccc++ automake pcre；這里就不介紹同一端口和同一nginxconf，有需要的童鞋自行百度這里介紹不同項目的不同配置服務(wù)器中已經(jīng)部署了其他項目，這里做一個簡單的頁面做測試1新建目錄rootnginx8571 rootnginx8571html root；有幾種部署方式，由項目復(fù)雜度而定最簡單的簡單的小網(wǎng)站可以直接使用Nodejs作為web服務(wù)器，不做前后端分離，使用后端模板填充數(shù)據(jù)，代表框架express如果要做負載均衡或者響應(yīng)多端請求，那么采用前后端分離前端代碼可以；開發(fā)過程中要引用類庫地址時直接引用線上地址，會被webserver中轉(zhuǎn)到本地代碼上 發(fā)布時直接發(fā)布到對應(yīng)機器上就行，代碼里不用再修改線上路徑項目是你要做一件事建的項目，跟代碼模塊沒關(guān)系大公司前端代碼一般會發(fā)布帶。