Docker鏡像+nginx 部署 vue 項目

1、打包vue項目

　　在開發完的vue項目輸入以下命名，打包生成dist文件夾

yarn build / npm run build

　　此時根目錄會多出一個文件夾：dist文件夾，裏面就是咱們要發佈的東西。

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

2、獲取nginx 鏡像

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

　　在終端輸入：

docker pull nginx

　　便可以獲取到nginx鏡像。

　　Docker鏡像是一個特殊的文件系統，除了提供容器運行時所需的程序、庫、資源、配置等文件外，還包含了一些爲運行時準備的一些配置參數（如匿名卷、環境變量、用戶等）。 鏡像不包含任何動態數據，其內容在構建以後也不會被改變。

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

docker image ls

　　鏡像結果以下所示：

3、建立 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;
        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;  很是重要！！！

　　由於咱們的應用是單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器訪問地址時，就會返回404。

　　因此須要在服務端增長一個覆蓋全部狀況的候選資源，若是URL匹配不到任何靜態資源，則應該返回同一個index.html頁面，這個頁面就是你app依賴的頁面。

　　上面的文件定義了首頁的指向爲 /usr/share/nginx/html/index.html, 因此咱們能夠一會把構建出來的index.html文件和相關的靜態資源放到/usr/share/nginx/html目錄下。

4、建立 Dockerfile 文件

# 設置基礎鏡像
FROM nginx
# 定義做者
MAINTAINER lihui <1107136746@qq.com>
# 將dist文件中的內容複製到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/  /usr/share/nginx/html/
#用本地的 default.conf 配置來替換nginx鏡像裏的默認配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

5、基於該Dockerfile構建vue應用鏡像

　　運行以下命令，注意不要少了最後的「 . 」

docker build -t test .

　　-t 是給鏡像命名 ，test是生成鏡像的名字，. 是基於當前目錄的Dockerfile來構建鏡像。

　　基於vue的鏡像就生成好了！