Docker 部署 vue 專案

docker 作為輕量級虛擬化技術，擁有持續整合、版本控制、可移植性、隔離性和安全性等優勢。本文使用docker來部署乙個vue的前端應用，並盡可能詳盡的介紹了實現思路和具體步驟，以方便有類似需要的同學參考。

docker 是乙個開源的應用容器引擎，讓開發者可以打包他們的應用以及依賴包到乙個可移植的容器中，該容器包含了應用程式的**、執行環境、依賴庫、配置檔案等必需的資源，通過容器就可以實現方便快速並且與平台解耦的自動化部署方式，無論你部署時的環境如何，容器中的應用程式都會執行在同一種環境下。

用 vue cli 建立乙個vue專案，修改一下建立出來的專案，在頁面上寫乙個前端介面請求，構建一版線上資源 ，基於nginx docker映象構建成乙個前端工程映象，然後基於這個前端工程映象，啟動乙個容器 vuenginxcontainer。

啟動乙個基於 node 映象的容器 nodewebserver，提供後端介面。

修改 vuenginxcontainer 的 nginx 配置，使前端頁面的介面請求**到 nodewebserver 上。

稍作優化和改進。

3.2 構建vue專案#

執行命令

yarn build / npm run build

此時工程根目錄下多出乙個dist資料夾

如果將該dist目錄整個傳到伺服器上，部署成靜態資源站點就能直接訪問到該專案。

nginx 是乙個高效能的http和反向**伺服器，此處我們選用 nginx 映象作為基礎來構建我們的vue應用映象。

docker pull nginx

在專案根目錄下建立nginx資料夾，該資料夾下新建檔案default.conf

server

#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

}

該配置檔案定義了首頁的指向為/usr/share/nginx/html/index.html, 所以我們可以一會把構建出來的index.html檔案和相關的靜態資源放到/usr/share/nginx/html目錄下。

4.3 建立 dockerfile 檔案#

from nginx

copy dist/ /usr/share/nginx/html/

copy nginx/default.conf /etc/nginx/conf.d/default.conf

執行命令（注意不要少了最後的 「.」 ）

docker build -t vuenginxcontainer .

-t是給映象命名.是基於當前目錄的dockerfile來構建映象

docker images

到此時我們的vue應用映象 vuenginxcontainer 已經成功建立。接下來，我們基於該映象啟動乙個docker容器。

docker 容器container： 映象執行時的實體。映象（image）和容器（container）的關係，就像是物件導向程式設計中的類和例項一樣，映象是靜態的定義，容器是映象執行時的實體。容器可以被建立、啟動、停止、刪除、暫停等 。

docker run \

-p 3000:80 \

vuenginxcontainer

docker ps

Docker 部署VUE專案

淺嚐docker nginx部署專案，涉及到的都是比較簡單的操作，如有錯誤，請指正！謝謝！在docker中啟動vue容器時，本質上是啟動了乙個nginx服務，我們要做的就是將專案構建成我們 定製 的nginx服務映象，再進行容器啟動。建立dockerfile dockerfile內容 其本質就是用來...

Docker 部署 vue 專案（Nginx）

環境 win10上安裝的docker 裡面有兩個檔案 dist vue專案打包之後生成的dist檔案複製過來的 dockerfile dockerfile 是乙個用來構建映象的文字檔案，注意這個沒有檔案字尾 可參考 dockerfile檔案裡的內容 設定基礎映象 nginx 是映象名稱 from n...

docker 自動化部署vue 專案

最近把專案的部署換成了自動化部署，採用jenkins docker docker compose 阿里雲容器映象服務 本來一開始是拉取 在自己伺服器上build的，考慮到自己伺服器的效能，最後還是採用了阿里雲的 記錄一下docker部署 vue 的過程。node 構建 nginx 發布 from n...