如何使用Nginx將前端Vue項(xiàng)目部署到云服務(wù)器
記錄使用Nginx將純前端的Vue3項(xiàng)目部署到阿里云服務(wù)器（Ubuntu 22.04）上，包含通過Nginx代理實(shí)現(xiàn)跨域請求、以及個人踩坑記錄~
1.安裝下載Nginx
執(zhí)行下列命令安裝：
apt-get install nginx
安裝完成后查看nignx版本，顯示版本信息則說明安裝成果
root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx -v nginx version: nginx/1.18.0 (Ubuntu)
啟動nginx，如正確啟動，則不會出現(xiàn)任何提示信息。
root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx root@iZbp1e23w2p1t5zrsvqb63Z:~#
nginx啟動成功后打開服務(wù)器的外網(wǎng)面板地址，可以看到如下界面，至此成功大半?。?/p>
2. 打包vue項(xiàng)目并上傳到服務(wù)器上
在VS Code中打開已完成的前端Vue項(xiàng)目，輸入如下命令進(jìn)行打包，打包完成后再當(dāng)前目錄下出現(xiàn)名為dist文件夾，即為需要上傳到服務(wù)器上的文件夾。
npm run build # 具體是否為build命令需查看項(xiàng)目目錄下的package.json文件（一般都是辣）
可以打開安裝好的寶塔界面，借助寶塔面板將dist文件夾上傳到服務(wù)器的某個目錄項(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命令打開配置文件進(jìn)行編輯：
vim /etc/nginx/nginx.conf
在http{}中添加服務(wù)server，如下所示
http {
#前面扒拉扒拉都不要動
include /etc/nginx/conf.d/*.conf; #原有別動
include /etc/nginx/sites-enabled/*; #原有別動
#下面是需要手動添加的：++++++++++++++++++
server {
listen 80 ; #可訪問端口號，默認(rèn)是80，也可設(shè)置為其它
server_name 47.98.101.114; #云服務(wù)器可訪問外網(wǎng)鏈接
#access_log logs/host.access.log main;
location / {
root /home/FloraThumb/dist; #這里寫vue項(xiàng)目在云服務(wù)器中的地址
index index.html; #這里是vue項(xiàng)目的首頁，需要保證dist中有index.html文件
}
error_page 500 502 503 504 /50x.html;#錯誤頁面
}
}nginx.conf文件配置完成后，需要重新加載配置文件，執(zhí)行如下命令
sudo nginx -c /etc/nginx/nginx.conf
完成后重新開啟Nginx服務(wù)：
nginx -s reload
此時點(diǎn)擊配置文件中所設(shè)置的連接： server_name: listen（ip:port）即可訪問部署完成的網(wǎng)頁，如此處需要訪問 http://47.98.101.114:80
大功告成啦~~~
4. 關(guān)于通過Nginx代理實(shí)現(xiàn)跨域請求
瀏覽器的同源策略：組織一個域的JavaScript腳本和另一個域的內(nèi)容進(jìn)行交互。
所謂同源（即同一個域），就是兩頁頁面具有相同協(xié)議（如http協(xié)議）、主機(jī)host和端口號port。
當(dāng)在前端vue項(xiàng)目中需要調(diào)取受同源策略保護(hù)的Web API時，即發(fā)生所謂跨域請求，此時發(fā)送不成功，一般可以采用ajax的jsonp發(fā)起跨域請求，而對于vue項(xiàng)目的axios不支持jsonp請求，可以選擇安裝'vue-jsonp'依賴項(xiàng)或修改vue.config.js文件來發(fā)起跨域請求，下文主要講后者的實(shí)現(xiàn)。
4.1 開發(fā)環(huán)境
在開發(fā)環(huán)境下，可以通過修改Vue項(xiàng)目的vue.config.js文件來實(shí)現(xiàn)跨域請求。
下述代碼中設(shè)置了兩個代理請求，一個是 '/api'，代理的目標(biāo)地址是 https://trefle.io；另一個是'/baidu'，代理的目標(biāo)地址是即百度領(lǐng)域翻譯API http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate
module.exports = {
devServer: {
proxy: {
'/api': { // '/api'是代理標(biāo)識，用于告訴node，url前面是/api的就是使用代理的
target: "https://trefle.io", //目標(biāo)地址，一般是指后臺服務(wù)器地址（只到域名即可）
changeOrigin: true, //是否跨域
// pathRewrite: { //重寫路徑（將帶有api換成空字符串）：此處不需要
// '^/api': ''
// }
},
'/baidu': { //
target: "http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate", //目標(biāo)地址，一般是指后臺服務(wù)器地址（只到域名即可）
changeOrigin: true, //是否跨域
pathRewrite: { //重寫路徑（將帶有/baidu換成空字符串）
'^/baidu': ''
}
},
}
}
}changeOrigin: true 代表支持跨域（必寫）;
pathRewrite代表重寫路徑，是可選項(xiàng)，根據(jù)需求選擇（/api無需重寫，而/baidu進(jìn)行重寫）；
無需重寫路徑以代理'/api'為例，在發(fā)起請求過程中，對于url中以'/api'開頭的請求，會將vue.config.js文件中'/api'對應(yīng)的target目標(biāo)地址連接到請求頭部，即若請求url為“ /api/v1/species/”，則實(shí)際會將請求發(fā)送到 https://trefle.io/api/v1/species，從而實(shí)現(xiàn)跨域請求；
export function getSpecialDetail(data){
return request({
url:"/api/v1/species/" + data.id ,
method:"GET",
headers:{
'Authorization': "<我的token>", #此處為token參數(shù)
}
})
}需要重寫路徑以代理'/baidu'為例,在發(fā)起請求過程中，對于url中以'/baidu'開頭的請求，會將vue.config.js文件中'/baidu'對應(yīng)的target目標(biāo)地址連接到請求頭部，即若請求url為“ /baidu”，則現(xiàn)將target串聯(lián)到url頭部 http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate/baidu，此時因?yàn)榇?/baidu 設(shè)置重寫路徑，將'/baidu'重寫為空字符，則實(shí)際請求發(fā)送到http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate，從而實(shí)現(xiàn)跨域請求；
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ù)器上時，此時在4.2中進(jìn)行的代理操作將會失效，需要額外對nginx進(jìn)行如下代理配置。
依舊需要先關(guān)閉nginx，在修改配置文件 /etc/nginx/nginx.conf ，如下為代理添加相關(guān)配置
server {
listen 80 ;#自己設(shè)置端口號
server_name 47.98.101.114;#自己設(shè)置項(xiàng)目名稱
#access_log logs/host.access.log main;
location / {
root /home/FloraThumb/dist;#這里寫vue項(xiàng)目的所在地址
index index.html;#這里是vue項(xiàng)目的首頁，需要保證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;#錯誤頁面
}完成后依舊重新加載配置文件
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3.0 項(xiàng)目搭建和使用流程，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
svg圖片在項(xiàng)目中使用的非常廣泛,下面這篇文章主要給大家介紹了關(guān)于vue3使用svg圖標(biāo)的多種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
在antd Form表單中select設(shè)置初始值操作
這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue打印瀏覽器頁面功能的兩種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue打印瀏覽器頁面功能的兩種實(shí)現(xiàn)方法,這個功能其實(shí)也是自己學(xué)習(xí)到的,做完也有一段時間了,一直想記錄總結(jié)一下,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue+ElementUI實(shí)現(xiàn)動態(tài)更換任意主題色(動態(tài)換膚)的全過程
眾所周知Element-UI有換膚功能,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI實(shí)現(xiàn)動態(tài)更換任意主題色(動態(tài)換膚)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能,實(shí)現(xiàn)思路非常簡單，本文結(jié)合實(shí)例代碼效果圖給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
Vue3實(shí)現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實(shí)際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09
better scroll可以實(shí)現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面添加水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09