當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

如何部署vue项目

發(fā)布時(shí)間：2023/12/15 综合教程 22 生活家

生活随笔收集整理的這篇文章主要介紹了如何部署vue项目小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本文小編為大家詳細(xì)介紹“如何部署vue項(xiàng)目”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何部署vue項(xiàng)目”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

1.寫在前面：

docker 是一個(gè)開源的應(yīng)用容器引擎，讓開發(fā)者可以打包他們的應(yīng)用以及依賴包到一個(gè)可移植的容器中，該容器包含了應(yīng)用程序的代碼、運(yùn)行環(huán)境、依賴庫、配置文件等必需的資源，通過容器就可以實(shí)現(xiàn)方便快速并且與平臺(tái)解耦的自動(dòng)化部署方式，無論你部署時(shí)的環(huán)境如何，容器中的應(yīng)用程序都會(huì)運(yùn)行在同一種環(huán)境下。

默認(rèn)已經(jīng)安裝了 docker，@vue/cli

相關(guān)版本：

docker version 18.09.2, build 6247962
vue cli --version 3.3.0
macos mojave verison 10.14.1

運(yùn)行環(huán)境為macos，如果與閱讀者操作系統(tǒng)之間存在差異，請(qǐng)自行調(diào)整

相關(guān)鏡像：

nginx:latest
node:latest

2.具體實(shí)現(xiàn)：

用 vue cli 創(chuàng)建一個(gè)vue項(xiàng)目，修改一下創(chuàng)建出來的項(xiàng)目，在頁面上寫一個(gè)前端接口請(qǐng)求，構(gòu)建一版線上資源，基于nginx docker鏡像構(gòu)建成一個(gè)前端工程鏡像，然后基于這個(gè)前端工程鏡像，啟動(dòng)一個(gè)容器 vuenginxcontainer。
啟動(dòng)一個(gè)基于 node 鏡像的容器 nodewebserver，提供后端接口。
修改 vuenginxcontainer 的 nginx 配置，使前端頁面的接口請(qǐng)求轉(zhuǎn)發(fā)到 nodewebserver 上。
稍作優(yōu)化和改進(jìn)。

3 創(chuàng)建 vue 應(yīng)用

3.1 vue cli 創(chuàng)建一個(gè)vue項(xiàng)目

運(yùn)行命令

yarnserve/npmrunserve

訪問 http://localhost:8081

3.2 改寫

稍微改寫一下頁面，在app.vue中傳入helloworld 組件中的 msg 改為hello docker ; created 生命周期中加入一個(gè)接口請(qǐng)求

importaxiosfrom'axios';

……

axios.get('/api/json',{
params:{}
}).then(
res=>{
console.log(res);
}
).catch(
error=>{
console.log(error);
}
)

……

這時(shí)候會(huì)在頁面控制臺(tái)看到一個(gè)報(bào)錯(cuò)信息:

/api/json 接口 404，當(dāng)然此時(shí)這個(gè)接口還不存在，暫時(shí)寫到這里，一會(huì)再調(diào)這個(gè)接口。

3.3 構(gòu)建vue項(xiàng)目

運(yùn)行命令

yarnbuild/npmrunbuild

此時(shí)工程根目錄下多出一個(gè)dist

文件夾

如果將該dist目錄整個(gè)傳到服務(wù)器上，部署成靜態(tài)資源站點(diǎn)就能直接訪問到該項(xiàng)目。

接下來就來構(gòu)建一個(gè)這樣的靜態(tài)資源站點(diǎn)。

4 構(gòu)建vue應(yīng)用鏡像

nginx 是一個(gè)高性能的http和反向代理服務(wù)器，此處我們選用 nginx 鏡像作為基礎(chǔ)來構(gòu)建我們的vue應(yīng)用鏡像。

4.1 獲取 nginx 鏡像

dockerpullnginx

docker鏡像（image）一個(gè)特殊的文件系統(tǒng)。docker鏡像是一個(gè)特殊的文件系統(tǒng)，除了提供容器運(yùn)行時(shí)所需的程序、庫、資源、配置等文件外，還包含了一些為運(yùn)行時(shí)準(zhǔn)備的一些配置參數(shù)（如匿名卷、環(huán)境變量、用戶等）。鏡像不包含任何動(dòng)態(tài)數(shù)據(jù)，其內(nèi)容在構(gòu)建之后也不會(huì)被改變。
docker 鏡像相關(guān)操作有: 搜索鏡像docker search [repository[:tag]]、拉取鏡像docker pull [repository[:tag]]、查看鏡像列表docker image ls、刪除鏡像：docker image rm [repository[:tag]] / docker rmi [repository[:tag]]等等。
docker 鏡像名稱由repository和tag組成[repository[:tag]]，tag默認(rèn)為latest

4.2 創(chuàng)建 nginx config配置文件

在項(xiàng)目根目錄下創(chuàng)建nginx文件夾，該文件夾下新建文件default.conf

server{
listen80;
server_namelocalhost;

#charsetkoi8-r;
access_log/var/log/nginx/host.access.logmain;
error_log/var/log/nginx/error.logerror;

location/{
root/usr/share/nginx/html;
indexindex.htmlindex.htm;
}

#error_page404/404.html;

#redirectservererrorpagestothestaticpage/50x.html
#
error_page500502503504/50x.html;
location=/50x.html{
root/usr/share/nginx/html;
}
}

該配置文件定義了首頁的指向?yàn)?code>/usr/share/nginx/html/index.html, 所以我們可以一會(huì)把構(gòu)建出來的index.html文件和相關(guān)的靜態(tài)資源放到/usr/share/nginx/html目錄下。

4.3 創(chuàng)建 dockerfile 文件

fromnginx
copydist//usr/share/nginx/html/
copynginx/default.conf/etc/nginx/conf.d/default.conf

自定義構(gòu)建鏡像的時(shí)候基于dockerfile來構(gòu)建。
from nginx 命令的意思該鏡像是基于 nginx:latest 鏡像而構(gòu)建的。
copy dist/ /usr/share/nginx/html/ 命令的意思是將項(xiàng)目根目錄下dist文件夾下的所有文件復(fù)制到鏡像中 /usr/share/nginx/html/ 目錄下。
copy nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是將nginx目錄下的default.conf 復(fù)制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置來替換nginx鏡像里的默認(rèn)配置。

4.4 基于該dockerfile構(gòu)建vue應(yīng)用鏡像

運(yùn)行命令（注意不要少了最后的 “.” ）

dockerbuild-tvuenginxcontainer.

-t是給鏡像命名.是基于當(dāng)前目錄的dockerfile來構(gòu)建鏡像

查看本地鏡像，運(yùn)行命令

dockerimagels|grepvuenginxcontainer

到此時(shí)我們的vue應(yīng)用鏡像 vuenginxcontainer 已經(jīng)成功創(chuàng)建。接下來，我們基于該鏡像啟動(dòng)一個(gè)docker

容器。

4.5 啟動(dòng) vue app 容器

docker 容器container：鏡像運(yùn)行時(shí)的實(shí)體。鏡像（image）和容器（container）的關(guān)系，就像是面向?qū)ο蟪绦蛟O(shè)計(jì)中的類和實(shí)例一樣，鏡像是靜態(tài)的定義，容器是鏡像運(yùn)行時(shí)的實(shí)體。容器可以被創(chuàng)建、啟動(dòng)、停止、刪除、暫停等。

基于 vuenginxcontainer 鏡像啟動(dòng)容器，運(yùn)行命令：

dockerrun\
-p3000:80\
-d--namevueapp\
vuenginxcontainer

docker run 基于鏡像啟動(dòng)一個(gè)容器
-p 3000:80 端口映射，將宿主的3000端口映射到容器的80端口
-d 后臺(tái)方式運(yùn)行
--name 容器名查看 docker 進(jìn)程

dockerps

可以發(fā)現(xiàn)名為 vueapp的容器已經(jīng)運(yùn)行起來。此時(shí)訪問 http://localhost:3000

應(yīng)該就能訪問到該vue應(yīng)用:

目前為止，已經(jīng)通過docker容器部署了一個(gè)靜態(tài)資源服務(wù)，可以訪問到靜態(tài)資源文件。還有 /api/json這個(gè)接口數(shù)據(jù)沒有，接下來我們來解決一下這個(gè)問題。

5 接口服務(wù)

再部署一個(gè) node 的容器來提供接口服務(wù)

5.1 express 服務(wù)

用 node web 框架express來寫一個(gè)服務(wù)，注冊(cè)一個(gè)返回json數(shù)據(jù)格式的路由 server.js:

'usestrict';

constexpress=require('express');

constport=8080;
consthost='0.0.0.0';

constapp=express();
app.get('/',(req,res)=>{
res.send('helloworld\n');
});

app.get('/json',(req,res)=>{
res.json({
code:0,
data:'thisismessagefromnodecontainer'
})
});

app.listen(port,host);
console.log(`runningonhttp://${host}:${port}`);

運(yùn)行該express應(yīng)用需要node環(huán)境，我們基于node鏡像來構(gòu)建一個(gè)新鏡像

5.2 獲取node鏡像

dockerpullnode

5.3 編寫 dockerfile 將express應(yīng)用docker化

fromnode

workdir/usr/src/app

copypackage*.json./

runnpminstall

copy..

expose8080
cmd["npm","start"]

構(gòu)建鏡像的時(shí)候 node_modules 的依賴直接通過run npm install來安裝，項(xiàng)目中創(chuàng)建一個(gè).dockerignore文件來忽略一些直接跳過的文件：

node_modules
npm-debug.log

5.4 構(gòu)建 nodewebserver 鏡像

運(yùn)行構(gòu)建命令：

dockerbuild-tnodewebserver.

5.5 啟動(dòng) nodeserver 容器

基于剛剛構(gòu)建的 nodewebserver 鏡像啟動(dòng)一個(gè)名為 nodeserver 的容器來提供接口服務(wù)8080端口，并映射宿主的5000端口

dockerrun\
-p5000:8080\
-d--namenodeserver\
nodewebserver

查看當(dāng)前docker進(jìn)程

dockerps

可以發(fā)現(xiàn) nodeserver 的容器也正常的運(yùn)行起來。訪問以下 http://localhost:5000/json

能訪問到前面寫的json數(shù)據(jù)

到目前為止，后端接口服務(wù)也正常啟動(dòng)了。只需最后把頁面請(qǐng)求的接口轉(zhuǎn)發(fā)到后端接口服務(wù)就能調(diào)通接口。

6. 跨域轉(zhuǎn)發(fā)

想要將 vueapp 容器上的請(qǐng)求轉(zhuǎn)發(fā)到 nodeserver 容器上。首先需要知道 nodeserver 容器的ip地址和端口，目前已知 nodeserver 容器內(nèi)部服務(wù)監(jiān)聽在 8080 端口，還需要知道ip即可。

6.1 查看 nodeserver 容器的 ip 地址：

查看容器內(nèi)部ip有多種方式，這里提供兩種：

進(jìn)入容器內(nèi)部查看

dockerexect-it02277acc3efcbash

cat/etc/hosts

docker inspect [ containerid ] 直接查看容器信息:

dockerinspect02277acc3efc

在其中找到 networks 相關(guān)配置信息：

記錄下node服務(wù)容器對(duì)應(yīng)的ip，一會(huì)兒配置nginx轉(zhuǎn)發(fā)的時(shí)候會(huì)用到。

6.2 修改 nginx 配置

nginx 配置 location 指向 node 服務(wù) default.conf （前端想要了解的nginx，關(guān)于nginx的配置已經(jīng) location 的具體寫法可以參考（一文弄懂nginx的location匹配））

添加一條重寫規(guī)則，將 /api/{path} 轉(zhuǎn)到目標(biāo)服務(wù)的 /{path} 接口上。在前面的nginx/default.conf文件中加入：

location/api/{
rewrite/api/(.*)/$1break;
proxy_passhttp://172.17.0.2:8080;
}

修改完了之后意識(shí)到一個(gè)問題：vueapp 容器是基于 vuenginxcontainer 這個(gè)鏡像運(yùn)行的，而在一開始構(gòu)建鏡像的時(shí)候是將 nginx配置 default.conf 直接構(gòu)建進(jìn)去了。因此如果需要修改 default.conf 還得再重新構(gòu)建一個(gè)新的鏡像，再基于新鏡像來運(yùn)行新的容器。

7. 改進(jìn)

能不能每次修改配置文件后直接重啟容器就能讓新配置生效，答案當(dāng)然是有。

在構(gòu)建鏡像的時(shí)候不把 nginx 配置復(fù)制到鏡像中，而是直接掛載到宿主機(jī)上，每次修改配置后，直接重啟容器即可。

7.1 修改 dockerfile 文件

把 vueclidemo 項(xiàng)目下的 dockerfile 修改一下

fromnginx
copydist//usr/share/nginx/html/
copynginx/default.conf/etc/nginx/conf.d/default.conf

將copy nginx/default.conf /etc/nginx/conf.d/default.conf命令刪除，nginx配置都通過掛載命令掛載在宿主機(jī)上。再看copy dist/ /usr/share/nginx/html/命令，如果每次構(gòu)建的項(xiàng)目dist/下的內(nèi)容變動(dòng)都需要重新走一遍構(gòu)建新鏡像再啟動(dòng)新容器的操作，因此這條命令也可以刪除，使用掛載的方式來啟動(dòng)容器。

7.2 重新運(yùn)行vue應(yīng)用容器

直接基于nginx鏡像來啟動(dòng)容器 vuenginxnew ，運(yùn)行命令：

dockerrun\
-p3000:80\
-d--namevuenginxnew\
--mounttype=bind,source=$home/selfwork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d\
--mounttype=bind,source=$home/selfwork/docker/vueclidemo/dist,target=/usr/share/nginx/html\
nginx

--mount type=bind,source={sourcedir},target={targetdir}將宿主機(jī)的sourcedir 掛載到容器的 targetdir 目錄上。
此處運(yùn)行的命令較長(zhǎng)，如果每次重新輸入難免麻煩，我們可以將完整的命令保存到一個(gè)shell文件vueapp.sh中，然后直接執(zhí)行sh vueapp.sh。

這樣就能每次修改了nginx配置或者重新構(gòu)建了vue應(yīng)用的時(shí)候，只需重啟容器就能立馬生效。此時(shí)我們?cè)僭L問 http://localhost:3000/api/json 能看到接口能正常返回，說明轉(zhuǎn)發(fā)生效了。

至此接口服務(wù)的轉(zhuǎn)發(fā)也調(diào)通了。

7.3 配置負(fù)載均衡

后端服務(wù)一般都是雙機(jī)或者多機(jī)以確保服務(wù)的穩(wěn)定性。我們可以再啟動(dòng)一個(gè)后端服務(wù)容器，并修改nginx的配置來優(yōu)化資源利用率，最大化吞吐量，減少延遲，確保容錯(cuò)配置。

基于前面 4.5 節(jié)的類似操作，新啟動(dòng)一個(gè)容器，并基于 5.1 節(jié)類似的操作，查看到新容器的 ip (172.17.0.3)

修改一下nginx/default.conf（新增 upstream ，修改 location /api/ 中的 proxy_pass）:

upstreambackend{
server172.17.0.2:8080;
server172.17.0.3:8080;
}

……

location/api/{
rewrite/api/(.*)/$1break;
proxy_passbackend;
}

總結(jié)

以上是生活随笔為你收集整理的如何部署vue项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

项目
Vue

上一篇：云顶之弈九光阵容怎么搭配九光阵容搭配技
下一篇： vue-cli安装教程