背景

使用Vue框架建立一個網站，掌握如何使用nginx在Docker容器中提供服務。

首先，我們將使用Vue CLI生成入門Vue應用程式，我們將這個應用命名vue-nginx-docker

npx @vue/cli create vue-nginx-docker

建立應用程式後，進入到新的應用程式資料夾

cd vue-nginx-docker

現在我們需要幾個檔案才能與Docker一起使用：Dockerfile和一個.dockerignore檔案。

touch Dockerfile

對於我們的.dockerignore檔案，請確保像忽略git一樣忽略我們的依賴檔案node_modules。

echo "node_modules" > .dockerignore

構建Dockerfile

這裡我們透過使用Docker的多階段multi-stage構建完成這個過程：

階段1：用於構建前端資源的node映象階段2：Nginx階段為前端資源提供服務的階段1：構建前端檔案

我們的第一階段將：

使用node映象將我們所有的Vue檔案複製到工作目錄中用yarn安裝專案依賴項用yarn構建應用程式

FROM node:10 AS builderWORKDIR /appCOPY . .RUN yarn install && yarn build

階段2：準備Nginx服務

我們的第二階段將：

使用Nginx映象從Nginx映象中刪除所以不需要的靜態檔案從builder我們在第一階段建立的容器中複製我們的靜態檔案為我們的容器指定入口點以執行nginx

FROM nginx:alpineWORKDIR /usr/share/nginx/htmlRUN rm -rf ./*COPY --from=builder /app/dist .ENTRYPOINT ["nginx", "-g", "daemon off;"]

重要的是，Vue的dist預設將靜態資源構建到該資料夾中，因此我們從那裡複製檔案。如果您的應用由於某種原因將檔案構建到另一個資料夾中，請進行相應調整。這裡我們就完成整個Dockerfile的內容了:

FROM node:10 AS builderWORKDIR /appCOPY . .RUN yarn install && yarn buildFROM nginx:alpineWORKDIR /usr/share/nginx/htmlRUN rm -rf ./*COPY --from=builder /app/dist .ENTRYPOINT ["nginx", "-g", "daemon off;"]

現在我們已經組裝了Dockerfile，讓我們構建一個名為vue-nginx的映象：

docker build -t vue-nginx .

現在我們的映象已構建，我們可以使用以下命令啟動一個容器，該容器將在埠8080上為我們的應用程式提供服務。

docker run --rm -it -p 8080:80 vue-nginx

然後訪問http://localhost:8080即可訪問vue應用程式。