如何部署vue项目
本文小編為大家詳細介紹“如何部署vue項目”，內容詳細，步驟清晰，細節處理妥當，希望這篇“如何部署vue項目”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
1.寫在前面：
docker 是一個開源的應用容器引擎，讓開發者可以打包他們的應用以及依賴包到一個可移植的容器中，該容器包含了應用程序的代碼、運行環境、依賴庫、配置文件等必需的資源，通過容器就可以實現方便快速并且與平臺解耦的自動化部署方式，無論你部署時的環境如何，容器中的應用程序都會運行在同一種環境下。
默認已經安裝了 docker，@vue/cli
相關版本：
-
docker version 18.09.2, build 6247962
-
vue cli --version 3.3.0
-
macos mojave verison 10.14.1
運行環境為macos，如果與閱讀者操作系統之間存在差異，請自行調整
相關鏡像：
-
nginx:latest
-
node:latest
2.具體實現：
-
用 vue cli 創建一個vue項目，修改一下創建出來的項目，在頁面上寫一個前端接口請求，構建一版線上資源 ，基于nginx docker鏡像構建成一個前端工程鏡像，然后基于這個前端工程鏡像，啟動一個容器 vuenginxcontainer。
-
啟動一個基于 node 鏡像的容器 nodewebserver，提供后端接口。
-
修改 vuenginxcontainer 的 nginx 配置，使前端頁面的接口請求轉發到 nodewebserver 上。
-
稍作優化和改進。
3 創建 vue 應用
3.1 vue cli 創建一個vue項目
運行命令
yarnserve/npmrunserve
訪問 http://localhost:8081
3.2 改寫
稍微改寫一下頁面，在app.vue中 傳入helloworld 組件中的 msg 改為hello docker ; created 生命周期中加入一個接口請求
importaxiosfrom'axios';
……
axios.get('/api/json',{
params:{}
}).then(
res=>{
console.log(res);
}
).catch(
error=>{
console.log(error);
}
)
……
這時候會在頁面控制臺看到一個報錯信息:
/api/json 接口 404，當然此時這個接口還不存在，暫時寫到這里，一會再調這個接口。
3.3 構建vue項目
運行命令
yarnbuild/npmrunbuild
此時工程根目錄下多出一個dist
文件夾
如果將該dist目錄整個傳到服務器上，部署成靜態資源站點就能直接訪問到該項目。
接下來就來構建一個這樣的靜態資源站點。
4 構建vue應用鏡像
nginx 是一個高性能的http和反向代理服務器，此處我們選用 nginx 鏡像作為基礎來構建我們的vue應用鏡像。
4.1 獲取 nginx 鏡像
dockerpullnginx
-
docker鏡像（image）一個特殊的文件系統。docker鏡像是一個特殊的文件系統，除了提供容器運行時所需的程序、庫、資源、配置等文件外，還包含了一些為運行時準備的一些配置參數（如匿名卷、環境變量、用戶等）。 鏡像不包含任何動態數據，其內容在構建之后也不會被改變。 -
docker 鏡像相關操作有: 搜索鏡像
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默認為latest
4.2 創建 nginx config配置文件
在項目根目錄下創建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;
}
}
該配置文件定義了首頁的指向為/usr/share/nginx/html/index.html, 所以我們可以一會把構建出來的index.html文件和相關的靜態資源放到/usr/share/nginx/html目錄下。
4.3 創建 dockerfile 文件
fromnginx copydist//usr/share/nginx/html/ copynginx/default.conf/etc/nginx/conf.d/default.conf
-
自定義構建鏡像的時候基于dockerfile來構建。
-
from nginx 命令的意思該鏡像是基于 nginx:latest 鏡像而構建的。
-
copy dist/ /usr/share/nginx/html/ 命令的意思是將項目根目錄下dist文件夾下的所有文件復制到鏡像中 /usr/share/nginx/html/ 目錄下。
-
copy nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是將nginx目錄下的default.conf 復制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置來替換nginx鏡像里的默認配置。
4.4 基于該dockerfile構建vue應用鏡像
運行命令（注意不要少了最后的 “.” ）
dockerbuild-tvuenginxcontainer.
-t是給鏡像命名.是基于當前目錄的dockerfile來構建鏡像
查看本地鏡像，運行命令
dockerimagels|grepvuenginxcontainer
到此時我們的vue應用鏡像 vuenginxcontainer 已經成功創建。接下來，我們基于該鏡像啟動一個docker
容器。
4.5 啟動 vue app 容器
docker 容器container： 鏡像運行時的實體。鏡像（image）和容器（container）的關系，就像是面向對象程序設計中的類和實例一樣，鏡像是靜態的定義，容器是鏡像運行時的實體。容器可以被創建、啟動、停止、刪除、暫停等 。
基于 vuenginxcontainer 鏡像啟動容器，運行命令：
dockerrun\ -p3000:80\ -d--namevueapp\ vuenginxcontainer
docker run 基于鏡像啟動一個容器
-p 3000:80 端口映射，將宿主的3000端口映射到容器的80端口
-d 后臺方式運行
--name 容器名 查看 docker 進程
dockerps
可以發現名為 vueapp的容器已經運行起來。此時訪問 http://localhost:3000
應該就能訪問到該vue應用:
目前為止，已經通過docker容器部署了一個靜態資源服務，可以訪問到靜態資源文件。還有 /api/json這個接口數據沒有，接下來我們來解決一下這個問題。
5 接口服務
再部署一個 node 的容器來提供接口服務
5.1 express 服務
用 node web 框架express來寫一個服務，注冊一個返回json數據格式的路由 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}`);
運行該express應用需要node環境，我們基于node鏡像來構建一個新鏡像
5.2 獲取node鏡像
dockerpullnode
5.3 編寫 dockerfile 將express應用docker化
fromnode workdir/usr/src/app copypackage*.json./ runnpminstall copy.. expose8080 cmd["npm","start"]
構建鏡像的時候 node_modules 的依賴直接通過run npm install來安裝，項目中創建一個.dockerignore文件來忽略一些直接跳過的文件：
node_modules npm-debug.log
5.4 構建 nodewebserver 鏡像
運行構建命令：
dockerbuild-tnodewebserver.
5.5 啟動 nodeserver 容器
基于剛剛構建的 nodewebserver 鏡像 啟動一個名為 nodeserver 的容器來提供接口服務8080端口，并映射宿主的5000端口
dockerrun\ -p5000:8080\ -d--namenodeserver\ nodewebserver
查看當前docker進程
dockerps
可以發現 nodeserver 的容器也正常的運行起來。訪問以下 http://localhost:5000/json
能訪問到前面寫的json數據
到目前為止，后端接口服務也正常啟動了。只需最后把頁面請求的接口轉發到后端接口服務就能調通接口。
6. 跨域轉發
想要將 vueapp 容器 上的請求轉發到 nodeserver 容器上。首先需要知道 nodeserver 容器的ip地址和端口，目前已知 nodeserver 容器內部服務監聽在 8080 端口，還需要知道ip即可。
6.1 查看 nodeserver 容器的 ip 地址：
查看容器內部ip有多種方式，這里提供兩種：
進入容器內部查看
dockerexect-it02277acc3efcbash
cat/etc/hosts
docker inspect [ containerid ] 直接查看容器信息:
dockerinspect02277acc3efc
在其中找到 networks 相關配置信息：
記錄下node服務容器對應的ip，一會兒配置nginx轉發的時候會用到。
6.2 修改 nginx 配置
nginx 配置 location 指向 node 服務 default.conf （前端想要了解的nginx，關于nginx的配置已經 location 的具體寫法可以參考（一文弄懂nginx的location匹配 ））
添加一條重寫規則，將 /api/{path} 轉到目標服務的 /{path} 接口上。 在前面的nginx/default.conf文件中加入：
location/api/{
rewrite/api/(.*)/$1break;
proxy_passhttp://172.17.0.2:8080;
}
修改完了之后意識到一個問題：vueapp 容器是基于 vuenginxcontainer 這個鏡像運行的，而在一開始構建鏡像的時候是將 nginx配置 default.conf 直接構建進去了。因此如果需要修改 default.conf 還得再重新構建一個新的鏡像，再基于新鏡像來運行新的容器。
7. 改進
能不能每次修改配置文件后直接重啟容器就能讓新配置生效，答案當然是有。
在構建鏡像的時候 不把 nginx 配置復制到鏡像中，而是直接掛載到宿主機上，每次修改配置后，直接重啟容器即可。
7.1 修改 dockerfile 文件
把 vueclidemo 項目下的 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配置都通過掛載命令掛載在宿主機上。再看copy dist/ /usr/share/nginx/html/命令，如果每次構建的項目dist/下的內容變動都需要重新走一遍構建新鏡像再啟動新容器的操作，因此這條命令也可以刪除，使用掛載的方式來啟動容器。
7.2 重新運行vue應用容器
直接基于nginx鏡像來啟動容器 vuenginxnew ，運行命令：
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}將宿主機的sourcedir 掛載到容器的 targetdir 目錄上。 -
此處運行的命令較長，如果每次重新輸入難免麻煩，我們可以將完整的命令保存到一個
shell文件vueapp.sh中，然后直接執行sh vueapp.sh。
這樣就能每次修改了nginx配置或者 重新構建了vue應用的時候，只需重啟容器就能立馬生效。 此時我們再訪問 http://localhost:3000/api/json 能看到接口能正常返回，說明轉發生效了。
至此接口服務的轉發也調通了。
7.3 配置負載均衡
后端服務一般都是雙機或者多機以確保服務的穩定性。我們可以再啟動一個后端服務容器，并修改nginx的配置 來優化資源利用率，最大化吞吐量，減少延遲，確保容錯配置。
基于前面 4.5 節的類似操作，新啟動一個容器，并基于 5.1 節類似的操作，查看到 新容器的 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;
}
總結
- 上一篇： 云顶之弈九光阵容怎么搭配 九光阵容搭配技
- 下一篇： java中arg指的是什么意思