如何使用Nginx將前端Vue項(xiàng)目部署到云服務(wù)器
記錄使用Nginx將純前端的Vue3項(xiàng)目部署到阿里云服務(wù)器(Ubuntu 22.04)上,包含通過(guò)Nginx代理實(shí)現(xiàn)跨域請(qǐng)求、以及個(gè)人踩坑記錄~
1.安裝下載Nginx
執(zhí)行下列命令安裝:
apt-get install nginx
安裝完成后查看nignx版本,顯示版本信息則說(shuō)明安裝成果
root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx -v nginx version: nginx/1.18.0 (Ubuntu)
啟動(dòng)nginx,如正確啟動(dòng),則不會(huì)出現(xiàn)任何提示信息。
root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx root@iZbp1e23w2p1t5zrsvqb63Z:~#
nginx啟動(dòng)成功后打開(kāi)服務(wù)器的外網(wǎng)面板地址,可以看到如下界面,至此成功大半??!
2. 打包vue項(xiàng)目并上傳到服務(wù)器上
在VS Code中打開(kāi)已完成的前端Vue項(xiàng)目,輸入如下命令進(jìn)行打包,打包完成后再當(dāng)前目錄下出現(xiàn)名為dist文件夾,即為需要上傳到服務(wù)器上的文件夾。
npm run build # 具體是否為build命令需查看項(xiàng)目目錄下的package.json文件(一般都是辣)
可以打開(kāi)安裝好的寶塔界面,借助寶塔面板將dist文件夾上傳到服務(wù)器的某個(gè)目錄項(xiàng),此處為 "home/FloraThumb/"。
3. 修改Nginx配置
首先需要先暫停Nginx服務(wù)(一定要做?。。。?/strong>:
root@iZbp1e23w2p1t5zrsvqb63Z:~#nginx -s stop root@iZbp1e23w2p1t5zrsvqb63Z:~#
使用如下命令查看Nginx配置文件路徑:
nginx -t
如下圖所示,本機(jī)的配置文件為 /etc/nginx/nginx/conf
使用vim命令打開(kāi)配置文件進(jìn)行編輯:
vim /etc/nginx/nginx.conf
在http{}中添加服務(wù)server,如下所示
http { #前面扒拉扒拉都不要?jiǎng)? include /etc/nginx/conf.d/*.conf; #原有別動(dòng) include /etc/nginx/sites-enabled/*; #原有別動(dòng) #下面是需要手動(dòng)添加的:++++++++++++++++++ server { listen 80 ; #可訪問(wèn)端口號(hào),默認(rèn)是80,也可設(shè)置為其它 server_name 47.98.101.114; #云服務(wù)器可訪問(wèn)外網(wǎng)鏈接 #access_log logs/host.access.log main; location / { root /home/FloraThumb/dist; #這里寫(xiě)vue項(xiàng)目在云服務(wù)器中的地址 index index.html; #這里是vue項(xiàng)目的首頁(yè),需要保證dist中有index.html文件 } error_page 500 502 503 504 /50x.html;#錯(cuò)誤頁(yè)面 } }
nginx.conf文件配置完成后,需要重新加載配置文件,執(zhí)行如下命令
sudo nginx -c /etc/nginx/nginx.conf
完成后重新開(kāi)啟Nginx服務(wù):
nginx -s reload
此時(shí)點(diǎn)擊配置文件中所設(shè)置的連接: server_name: listen(ip:port)即可訪問(wèn)部署完成的網(wǎng)頁(yè),如此處需要訪問(wèn) http://47.98.101.114:80
大功告成啦~~~
4. 關(guān)于通過(guò)Nginx代理實(shí)現(xiàn)跨域請(qǐng)求
瀏覽器的同源策略:組織一個(gè)域的JavaScript腳本和另一個(gè)域的內(nèi)容進(jìn)行交互。
所謂同源(即同一個(gè)域),就是兩頁(yè)頁(yè)面具有相同協(xié)議(如http協(xié)議)、主機(jī)host和端口號(hào)port。
當(dāng)在前端vue項(xiàng)目中需要調(diào)取受同源策略保護(hù)的Web API時(shí),即發(fā)生所謂跨域請(qǐng)求,此時(shí)發(fā)送不成功,一般可以采用ajax的jsonp發(fā)起跨域請(qǐng)求,而對(duì)于vue項(xiàng)目的axios不支持jsonp請(qǐng)求,可以選擇安裝'vue-jsonp'依賴項(xiàng)或修改vue.config.js文件來(lái)發(fā)起跨域請(qǐng)求,下文主要講后者的實(shí)現(xiàn)。
4.1 開(kāi)發(fā)環(huán)境
在開(kāi)發(fā)環(huán)境下,可以通過(guò)修改Vue項(xiàng)目的vue.config.js文件來(lái)實(shí)現(xiàn)跨域請(qǐng)求。
下述代碼中設(shè)置了兩個(gè)代理請(qǐng)求,一個(gè)是 '/api',代理的目標(biāo)地址是 https://trefle.io;另一個(gè)是'/baidu',代理的目標(biāo)地址是即百度領(lǐng)域翻譯API http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate
module.exports = { devServer: { proxy: { '/api': { // '/api'是代理標(biāo)識(shí),用于告訴node,url前面是/api的就是使用代理的 target: "https://trefle.io", //目標(biāo)地址,一般是指后臺(tái)服務(wù)器地址(只到域名即可) changeOrigin: true, //是否跨域 // pathRewrite: { //重寫(xiě)路徑(將帶有api換成空字符串):此處不需要 // '^/api': '' // } }, '/baidu': { // target: "http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate", //目標(biāo)地址,一般是指后臺(tái)服務(wù)器地址(只到域名即可) changeOrigin: true, //是否跨域 pathRewrite: { //重寫(xiě)路徑(將帶有/baidu換成空字符串) '^/baidu': '' } }, } } }
changeOrigin: true 代表支持跨域(必寫(xiě));
pathRewrite代表重寫(xiě)路徑,是可選項(xiàng),根據(jù)需求選擇(/api無(wú)需重寫(xiě),而/baidu進(jìn)行重寫(xiě));
無(wú)需重寫(xiě)路徑以代理'/api'為例,在發(fā)起請(qǐng)求過(guò)程中,對(duì)于url中以'/api'開(kāi)頭的請(qǐng)求,會(huì)將vue.config.js文件中'/api'對(duì)應(yīng)的target目標(biāo)地址連接到請(qǐng)求頭部,即若請(qǐng)求url為“ /api/v1/species/”,則實(shí)際會(huì)將請(qǐng)求發(fā)送到 https://trefle.io/api/v1/species,從而實(shí)現(xiàn)跨域請(qǐng)求;
export function getSpecialDetail(data){ return request({ url:"/api/v1/species/" + data.id , method:"GET", headers:{ 'Authorization': "<我的token>", #此處為token參數(shù) } }) }
需要重寫(xiě)路徑以代理'/baidu'為例,在發(fā)起請(qǐng)求過(guò)程中,對(duì)于url中以'/baidu'開(kāi)頭的請(qǐng)求,會(huì)將vue.config.js文件中'/baidu'對(duì)應(yīng)的target目標(biāo)地址連接到請(qǐng)求頭部,即若請(qǐng)求url為“ /baidu”,則現(xiàn)將target串聯(lián)到url頭部 http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate/baidu,此時(shí)因?yàn)榇?/baidu 設(shè)置重寫(xiě)路徑,將'/baidu'重寫(xiě)為空字符,則實(shí)際請(qǐng)求發(fā)送到http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate,從而實(shí)現(xiàn)跨域請(qǐng)求;
export function translate(data){ return request({ url:'/baidu', headers:{ 'Access-Control-Allow-Origin':'*', 'Content-Type':'application/x-www-form-urlencoded' }, method:"POST", data:data, }); }
4.2 部署環(huán)境
當(dāng)按照步驟1~3將vue項(xiàng)目部署到云服務(wù)器上時(shí),此時(shí)在4.2中進(jìn)行的代理操作將會(huì)失效,需要額外對(duì)nginx進(jìn)行如下代理配置。
依舊需要先關(guān)閉nginx,在修改配置文件 /etc/nginx/nginx.conf ,如下為代理添加相關(guān)配置
server { listen 80 ;#自己設(shè)置端口號(hào) server_name 47.98.101.114;#自己設(shè)置項(xiàng)目名稱 #access_log logs/host.access.log main; location / { root /home/FloraThumb/dist;#這里寫(xiě)vue項(xiàng)目的所在地址 index index.html;#這里是vue項(xiàng)目的首頁(yè),需要保證dist中有index.html文件 } #添加代理配置 location /api{ proxy_pass https://trefle.io; } location /baidu { proxy_pass http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate; } error_page 500 502 503 504 /50x.html;#錯(cuò)誤頁(yè)面 }
完成后依舊重新加載配置文件
sudo nginx -c /etc/nginx/nginx.conf
再重啟nginx服務(wù)即可
nginx -s reload
參考鏈接:
到此這篇關(guān)于用Nginx將前端Vue項(xiàng)目部署到云服務(wù)器的文章就介紹到這了,更多相關(guān)Nginx Vue項(xiàng)目部署到云服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家解決問(wèn)題有一定的幫助,需要的朋友可以參考下2024-05-05vue2 自定義動(dòng)態(tài)組件所遇到的問(wèn)題
這篇文章主要介紹了vue2 自定義 動(dòng)態(tài)組件的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時(shí)使用默認(rèn)的size無(wú)法滿足我們的需求時(shí),我們可以自定義字體的大小,但是直接重寫(xiě)樣式后,并沒(méi)有起作用,甚至使用::v-deep深度選擇器也沒(méi)有效果,本文介紹VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法
這篇文章主要介紹了實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由
這篇文章主要介紹了Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01