使用 Docker 部署 Vue3 專案 示範

要把 Vue3 專案放入 Docker 中非常簡單，建立一個 Dockerfile：

    
FROM node:19.7 as build-stage
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
    

打包成 docker image：

    
docker build -t my_vue_docker_image .
    

執行：

    
docker run -d --name my_vue_docker_container -p 80:80 my_vue_docker_image
    

不過，有個小問題，如果使用連結進入時會出現 nginx 的 404 畫面。因為我們把 vue3 打包成一個 html 檔案，其他連結例如 /page1 進來時找不到對應的 html 檔案，於是就出現 nginx 的 404 頁面了。

要解決也很簡單，可以透過調整 nginx 的設定檔，將連結轉給 index.html 這個檔案即可。
我們建立 nginx/default.conf 這個檔案，並填入以下內容：

    
server {
    listen 80;
    server_name localhost;

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

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
    

然後修改 Dockerfile ，將這個設定檔的內容放入容器內，取代原本的設定檔：

    
FROM node:19.7 as build-stage
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
    

再次部署後導向我們有的路徑就不會再出現 404 了！