Docker 部署 vue 項目

Docker 部署 vue 項目

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

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

 

1.具體實現：

1. 用 vue cli 創建一個vue項目，修改一下創建出來的項目，在頁面上寫一個前端接口請求，構建一版線上資源 ，基於nginx docker鏡像構建成一個前端工程鏡像，然后基於這個前端工程鏡像，啟動一個容器 vuenginxcontainer。
2. 啟動一個基於 node 鏡像的容器 nodewebserver，提供后端接口。
3. 修改 vuenginxcontainer 的 nginx 配置，使前端頁面的接口請求轉發到 nodewebserver 上。
4. 稍作優化和改進。

2創建 vue 應用

3.1 vue cli 創建一個vue項目

3.2 構建vue項目

運行命令

yarn build / npm run build

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

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

接下來就來構建一個這樣的靜態資源站點。

4 構建vue應用鏡像

nginx 是一個高性能的HTTP和反向代理服務器，此處我們選用 nginx 鏡像作為基礎來構建我們的vue應用鏡像。

4.1 獲取 nginx 鏡像

docker pull nginx

• 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 {
 
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, 所以我們可以一會把構建出來的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

　　

• 自定義構建鏡像的時候基於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應用鏡像

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

docker build -t vuenginxcontainer .

　　

-t 是給鏡像命名 . 是基於當前目錄的Dockerfile來構建鏡像

 

 查看本地鏡像，運行命令

 docker images

 到此時我們的 vue 應用鏡像 vuenginxcontainer 已經成功創建。接下來，我們基於該鏡像啟動一個docker容器。

 

4.5 啟動 vue app 容器

Docker 容器Container： 鏡像運行時的實體。鏡像（Image）和容器（Container）的關系，就像是面向對象程序設計中的類和實例一樣，鏡像是靜態的定義，容器是鏡像運行時的實體。容器可以被創建、啟動、停止、刪除、暫停等 。

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

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

　　

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

 docker ps

 可以發現名為 vueApp的容器已經運行起來。此時訪問 http://localhost:3000 應該就能訪問到該vue應用:  目前為止，已經通過docker容器部署了一個靜態資源服務，可以訪問到靜態資源文件。