windows系統下使用Docker Desktop將vite+vue佈署上nginx

由於Docker是基於Linux環境下指令去運行,因此研究如何在windows環境(目前使用的作業系統為windows 11)下將vite+vue打包好佈署上Docker執行

首先要先下載Docker Desktop安裝,詳細的安裝過程不贅述。

將打包好的vue檔案之disk資料夾放在自訂資料夾下,新增dockerfile和nginx.conf兩個檔案如下圖:

dockerfile 設定:

#從docker官網拉取標準的nginx image,我們需要基於標準的nginx image製作自己的image
FROM nginx

#複製目前的資料夾到指定image資料夾下
COPY ./dist /usr/share/nginx/html

#複製目前的nginx.conf到image裡做替換nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf

RUN echo

nginx.conf 設定:

worker_processes 1;
events{
    worker_connections 1024;
}

http{
    include  mime.types;
    
    server{
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html/;
            try_files $uri $uri/ /html/index.html last;
            index index.html index.htm;
        }
    }
}

在目前的資料夾下輸入如下產生image:

docker build -t nginx-image .

執行成功會顯示如下:

以及輸入下面命令查看image列表:

docker images

啟動Docker容器:

docker run -p 8099:80 -d --name vue-vite-ts nginx-image

啟動完成後執行下面命令查看目前正在執行的容器:

docker ps

Docker Desktop也可以看到如下圖:

在瀏覽器輸入網址 http://localhost:8099/ 可以看到結果如下圖: