快捷導(dǎo)航

Docker鏡像+nginx 部署 vue 項目的方法

更新時間：2020年10月03日 11:23:43 作者：guo&qi

這篇文章主要介紹了Docker鏡像+nginx 部署 vue 項目的方法，幫助大家更好的使用docke鏡像，感興趣的朋友可以了解下

一、打包vue項目

　　在開發(fā)完的vue項目輸入如下命名，打包生成dist文件夾

yarn build / npm run build

　　此時根目錄會多出一個文件夾：dist文件夾，里面就是我們要發(fā)布的東西。

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

二、獲取nginx 鏡像

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

　　在終端輸入：

docker pull nginx

　　即可以獲取到nginx鏡像。

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

　在終端輸入如下命令，可以看到nginx的鏡像

docker image ls

　　鏡像結(jié)果如下所示：

三、創(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;
    try_files $uri $uri/ /index.html;
  }

  #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;
  }
}

　　注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 非常重要?。?！

　　因為我們的應(yīng)用是單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當用戶在瀏覽器訪問地址時，就會返回404。

　　所以需要在服務(wù)端增加一個覆蓋所有情況的候選資源，如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個index.html頁面，這個頁面就是你app依賴的頁面。

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

四、創(chuàng)建 Dockerfile 文件

# 設(shè)置基礎(chǔ)鏡像
FROM nginx
# 定義作者
MAINTAINER lihui <1107136746@qq.com>
# 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html/
#用本地的 default.conf 配置來替換nginx鏡像里的默認配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

五、基于該Dockerfile構(gòu)建vue應(yīng)用鏡像

　　運行如下命令，注意不要少了最后的“ . ”