Docker 部署 vue 專案

概述

技術棧：docker + vue3 + nginx

部署流程

1、docker下載安裝 nginx

docker pull nginx

2、建立nginx掛載目錄 /usr/local/nginx （可根據自己需要存放檔案的位置自行建立目錄）

mkdir -p /usr/local/nginx

3、建立default.conf：vim 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、將本地的vue專案進行打包，生成dist目錄

npm run build  # 執行該指令後，在專案根目錄中生成dist資料夾

5、將dist資料夾壓縮並上傳到掛載目錄中：/usr/local/nginx/

6、進入掛載目錄，並解壓出dist目錄，我們的index.html則在dist目錄下：

7、在與dist同目錄下，建立Dockerfile檔案，vim Dockerfile:

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

8、將Dockerfile構建映象(注：最後有一個.不能漏掉，這個構建表示當前目錄下的Dockerfile)

docker build -t nginx_vue3 .
# 檢視映象：docker images

9、啟動並掛在nginx

docker run -d -p 80:80 --name nginx -v /usr/local/nginx/dist:/usr/share/nginx/html --restart=always nginx

-d # 後臺執行容器
-p # 將宿主機的80埠對映到容器的80埠
--name # 指定容器的名稱
-v 掛載宿主機的目錄或檔案 到 容器中的目錄或檔案，實現檔案資料同步
----restart=always  # 將容器設定為服務自啟動（執行docker服務時，容器也就會跟著啟動）

# 最後的nginx_vue3為建立的映象名稱

10、檢視容器: docker ps

11、在瀏覽器中輸入ip，檢視vue是否部署成功

(^ _ ^)!

完成