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容器部署了一個靜態資源服務，能夠訪問到靜態資源文件。