如何實現(xiàn)Docker部署vue項目

這篇文章主要介紹“如何實現(xiàn)Docker部署vue項目”，在日常操作中，相信很多人在如何實現(xiàn)Docker部署vue項目問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何實現(xiàn)Docker部署vue項目”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

在回民等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,網(wǎng)絡(luò)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),回民網(wǎng)站建設(shè)費用合理。

1.寫在前面：

docker 作為輕量級虛擬化技術(shù)，擁有持續(xù)集成、版本控制、可移植性、隔離性和安全性等優(yōu)勢。本文使用docker來部署一個vue的前端應(yīng)用，并盡可能詳盡的介紹了實現(xiàn)思路和具體步驟，以方便有類似需要的同學(xué)參考。

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

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

相關(guān)鏡像：

• nginx:latest

• node:latest

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

• 用 vue cli 創(chuàng)建一個vue項目，修改一下創(chuàng)建出來的項目，在頁面上寫一個前端接口請求，構(gòu)建一版線上資源 ，基于nginx docker鏡像構(gòu)建成一個前端工程鏡像，然后基于這個前端工程鏡像，啟動一個容器 vuenginxcontainer。

• 啟動一個基于 node 鏡像的容器 nodewebserver，提供后端接口。

• 修改 vuenginxcontainer 的 nginx 配置，使前端頁面的接口請求轉(zhuǎn)發(fā)到 nodewebserver 上。

• 稍作優(yōu)化和改進。

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

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

運行命令

yarn serve / npm run serve

訪問 http://localhost:8081

3.2 改寫

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

import axios from 'axios';

……

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

……

這時候會在頁面控制臺看到一個報錯信息:

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

3.3 構(gòu)建vue項目

運行命令

yarn build / npm run build

此時工程根目錄下多出一個 dist

文件夾

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

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

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

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

4.1 獲取 nginx 鏡像

docker pull nginx

• docker 鏡像（image）一個特殊的文件系統(tǒng)。docker鏡像是一個特殊的文件系統(tǒng)，除了提供容器運行時所需的程序、庫、資源、配置等文件外，還包含了一些為運行時準(zhǔn)備的一些配置參數(shù)（如匿名卷、環(huán)境變量、用戶等）。 鏡像不包含任何動態(tài)數(shù)據(jù)，其內(nèi)容在構(gòu)建之后也不會被改變。

• 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默認為latest

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

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

server {
 listen  80;
 server_name localhost;

 #charset koi8-r;
 access_log /var/log/nginx/host.access.log main;
 error_log /var/log/nginx/error.log error;

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

 #error_page 404    /404.html;

 # redirect server error pages to the static page /50x.html
 #
 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
  root /usr/share/nginx/html;
 }
}

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

4.3 創(chuàng)建 dockerfile 文件

from nginx
copy dist/ /usr/share/nginx/html/
copy nginx/default.conf /etc/nginx/conf.d/default.conf

• 自定義構(gòu)建鏡像的時候基于dockerfile來構(gòu)建。

• from nginx 命令的意思該鏡像是基于 nginx:latest 鏡像而構(gòu)建的。

• copy dist/ /usr/share/nginx/html/ 命令的意思是將項目根目錄下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鏡像里的默認配置。

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

運行命令（注意不要少了最后的 “.” ）

docker build -t vuenginxcontainer .

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

查看本地鏡像，運行命令

docker image ls | grep vuenginxcontainer

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

容器。

4.5 啟動 vue app 容器

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

基于 vuenginxcontainer 鏡像啟動容器，運行命令：

docker run \
-p 3000:80 \
-d --name vueapp \
vuenginxcontainer

docker run 基于鏡像啟動一個容器
-p 3000:80 端口映射，將宿主的3000端口映射到容器的80端口
-d 后臺方式運行
--name 容器名 查看 docker 進程

docker ps

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

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

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

5 接口服務(wù)

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

5.1 express 服務(wù)

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

'use strict';

const express = require('express');

const port = 8080;
const host = '0.0.0.0';

const app = express();
app.get('/', (req, res) => {
 res.send('hello world\n');
});

app.get('/json', (req, res) => {
 res.json({
  code: 0,
  data :'this is message from node container'
 })
});

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

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

5.2 獲取 node 鏡像

docker pull node

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

from node

workdir /usr/src/app

copy package*.json ./

run npm install

copy . .

expose 8080
cmd [ "npm", "start" ]

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

node_modules
npm-debug.log

5.4 構(gòu)建 nodewebserver 鏡像

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

 docker build -t nodewebserver .

5.5 啟動 nodeserver 容器

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

docker run \
-p 5000:8080 \
-d --name nodeserver \
nodewebserver

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

docker ps

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

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

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

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

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

6.1 查看 nodeserver 容器的 ip 地址：

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

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

docker exect -it 02277acc3efc bash

cat /etc/hosts

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

docker inspect 02277acc3efc

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

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

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/(.*) /$1 break;
 proxy_pass http://172.17.0.2:8080;
}

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

7. 改進

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

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

7.1 修改 dockerfile 文件

把 vueclidemo 項目下的 dockerfile 修改一下

from nginx
copy dist/ /usr/share/nginx/html/
copy nginx/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/ 命令，如果每次構(gòu)建的項目dist/下的內(nèi)容變動都需要重新走一遍構(gòu)建新鏡像再啟動新容器的操作，因此這條命令也可以刪除，使用掛載的方式來啟動容器。

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

直接基于nginx鏡像來啟動容器 vuenginxnew ，運行命令：

docker run \
-p 3000:80 \
-d --name vuenginxnew \
--mount type=bind,source=$home/selfwork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d \
--mount type=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 中，然后直接執(zhí)行 sh vueapp.sh 。

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

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

7.3 配置負載均衡

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

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

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

 upstream backend {
  server 172.17.0.2:8080;
  server 172.17.0.3:8080;
 }

 ……

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

8. 寫在后面

不習(xí)慣命令行的同學(xué)可以選用kitematic 來管理 docker 容器的狀態(tài)、數(shù)據(jù)目錄和網(wǎng)絡(luò)。所有對容量的操作都可以可視化的操作，這里就不做過多介紹了，有興趣的同學(xué)可以自行體驗下。

到此，關(guān)于“如何實現(xiàn)Docker部署vue項目”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁名稱：如何實現(xiàn)Docker部署vue項目
本文鏈接：http://www.muchs.cn/article22/pdhhcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、外貿(mào)建站、用戶體驗、移動網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)