手把手教你Vue項目實現本地Docker部署

前言

近幾年來，Docker 技術的應用已經愈來愈流行，目前已經產生前端工程Docker 化，身爲前端開發的我，花了幾天時間研究了下 Docker 的知識點，並實現了 Docker 本地部署 Vue 項目。但願能夠給有須要的同窗一點幫助。

什麼是Docker?

Docker 是一個開源的應用容器引擎，讓開發者能夠打包他們的應用以及依賴包到一個可移植的容器中，而後發佈到任何流行的Linux 機器上，也能夠實現虛擬化，容器是徹底使用沙箱機制，相互之間不會有任何接口。簡言之，就是能夠在 Linux 上鏡像使用的這麼一個容器。點擊查看更多能夠了解更多Docker知識。

爲何前端須要瞭解Docker

首先，目前產生前端工程 Docker 化的趨勢，學習而且掌握這個技術有利於提升自身競爭力。
其次，前端 Docker化 有利於前端開發工程師更專一於開發自己，弱化軟件環境，下降項目部署難度。

具體實現！擼它。

Docker安裝

brew cask install docker
複製代碼

本人是 mac 電腦，因此介紹下 mac 下的安裝方式，windows 或 其餘系統的同窗，能夠點擊查看更多瞭解其餘安裝方式。

在載入 Docker app 後，點擊 Next，可能會詢問你的 macOS 登錄密碼，你輸入便可。以後會彈出一個 Docker 運行的提示窗口，狀態欄上也有有個小鯨魚的圖標。

啓動終端後，經過命令能夠檢查安裝後的 Docker 版本。

$ docker --version
Docker version 19.03.8, build afacb8b
複製代碼

構建vue項目

首先，選擇一個建立好的Vue項目（本案例是採用一個先後端分離的單頁Vue項目）
接下來，運行 npm run build 命令，生成一個打包的 dist 文件（ps：具體打包命名根據項目配置而定。）你會發現，項目中多了一個 dist 文件夾。

獲取Nginx鏡像

本案例的Vue 項目是一個先後端分離項目，前端界面在服務器上只須要能被外部訪問到便可，因此直接使用 Nginx 的 Docker 來部署就行。

docker pull nginx:alpine
複製代碼

本博主推薦使用 alpine 版本，由於這個體積小，只須要 19.7MB，而 latest 版本須要 127MB。

使用 Dockerfile 定製鏡像

首先，在項目根目錄中新建一個文件，命名爲 Dockerfile

編輯Dockerfile 文件

FROM nginx:alpine
複製代碼

FROM：定製的鏡像都是基於 FROM 的鏡像，這裏的 nginx 就是定製須要的基礎鏡像。後續的操做都是基於nginx。

打包鏡像

docker build -t vuetest:v1 .
複製代碼

意思是當前目錄的 Dockerfile 建立了一個鏡像，建立鏡像的倉庫是vuetest, 標籤是v1。

查看鏡像

docker images
複製代碼

命令執行後，能夠查看鏡像信息。

運行容器

docker run -P -d vuetest:v1
複製代碼

查看端口信息

docker ps
複製代碼

訪問localhost:32770

納尼？這算哪門子的部署？哈哈哈，小夥伴們莫急，且聽我慢慢道來！在 Dockerfile 中咱們只是引入了 nginx 鏡像，咱們開發的代碼並不在其中。因此在打包鏡像時，須要將咱們開發的代碼也打包其中。

二次編輯Dockerfile 文件

FROM nginx:alpine
COPY ./dist/  /usr/share/nginx/html/
複製代碼

在上次的 Dockerfile 文件中，添加了 COPY 內容，意思是將 dist 文件，複製到 /usr/share/nginx/html/中。其中/usr/share/nginx/html/ 是 Nginx 的默認文件路徑。

從新打包鏡像，並運行容器

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps
複製代碼

咱們看到終端輸出的 port 是32782，咱們運行 localhost：32782，發現訪問ok，可是頁面一刷新就提示nginx 404。
這個緣由是由於在 Vue 項目中,咱們使用了 history 路由模式。這個模式會致使刷新後找不到當前頁面。這邊打算採用官方推薦的作法，在 Nginx 中添加一些配置。
點擊瞭解更多查看更多解決方案。

新建nginx.conf文件

新建並編輯 nginx.conf 文件內容

server {
    listen       80;
    server_name  localhost;
    # uding gzip
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

複製代碼

解決404 問題主要是 try_files $uri $uri/ /index.html =404;
這段代碼的意思是，若是當前訪問的地址不存在，就指向index.html
另外，爲了解決資源過大問題，這邊採用了gzip壓縮。減小體積。

三次編輯Dockerfile 文件

FROM nginx:alpine
COPY ./dist/  /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
複製代碼

COPY /nginx.conf/etc/nginx/conf.d/default.conf 命令的意思是將根目錄下的 nginx.conf 複製到 etc/nginx/conf.d/default.conf，用本地的 nginx.conf 配置來替換 nginx 鏡像裏的默認配置。

從新打包鏡像，並運行容器

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps
複製代碼

訪問終端生成好的端口號，刷新ok。大功告成！！！

Tips

• 問題1：命令行太多，記不住哇~還有別的方案嗎？

  答：咱們以前下載的 Docker 是具備圖形界面的，咱們能夠配合圖形界面來使用，好比：咱們能夠點擊小鯨魚-Dashboard，查看當前容器的運行狀態，還能夠一鍵點擊訪問配置好的項目頁面地址

  

• 問題2：運行的容器名稱能夠自定義嗎？我不想使用默認的！！！

  
  答：固然能夠。

  docker run -P -d vuetest:v1
  複製代碼

  將以上命令改成以下就行：

  docker run --name myproject -P -d vuetest:v1
  複製代碼

  該命令的意思爲運行vuetest:v1鏡像，並將運行的容器名稱設置爲myproject，且在後臺運行容器，並返回容器ID

  
  

• 問題3: 博主能夠提供更多常見的命令嗎？或者高階應用？

  
  答：固然能夠，你們能夠點擊查看更多來學習更多命令。