欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用Nginx將前端Vue項(xiàng)目部署到云服務(wù)器

 更新時(shí)間:2024年04月18日 11:04:16   作者:luluy2425  
記錄使用Nginx將純前端的Vue3項(xiàng)目部署到阿里云服務(wù)器(Ubuntu?22.04)上,包含通過(guò)Nginx代理實(shí)現(xiàn)跨域請(qǐng)求、以及個(gè)人踩坑記錄,感興趣的朋友一起看看吧

記錄使用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ā)送不成功,一般可以采用ajaxjsonp發(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

參考鏈接:

 解決nginx:[error] invalid PID number ""in"/run/nginx.pid"

 快速部署vue項(xiàng)目

 查找nginx配置文件

到此這篇關(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不生效的解決辦法

    這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家解決問(wèn)題有一定的幫助,需要的朋友可以參考下
    2024-05-05
  • Vue中常見(jiàn)的幾種傳參方式小結(jié)

    Vue中常見(jiàn)的幾種傳參方式小結(jié)

    Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見(jiàn)的幾種傳參方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • vue2 自定義動(dòng)態(tài)組件所遇到的問(wèn)題

    vue2 自定義動(dòng)態(tài)組件所遇到的問(wèn)題

    這篇文章主要介紹了vue2 自定義 動(dòng)態(tài)組件的實(shí)現(xiàn)方法,需要的朋友可以參考下
    2017-06-06
  • vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理

    vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理

    這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-05-05
  • VUE3使用Element-Plus時(shí)如何修改ElMessage中的文字大小

    VUE3使用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-09
  • vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法

    vue 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
  • Vue2?模版指令元素綁定事件執(zhí)行順序解析

    Vue2?模版指令元素綁定事件執(zhí)行順序解析

    這篇文章主要為大家介紹了Vue2?模版指令元素綁定事件執(zhí)行順序解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法

    實(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)題

    這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由

    Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由

    這篇文章主要介紹了Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-01-01

最新評(píng)論